using GraphQL Mutations with Apollo Client and Redux Toolkit

Viewed 32

I don't know If I'm doing this the right way, it's the first time I've implemented GraphQL Apollo Client with Redux Toolkit.

So I have a Thunk:

import { createAsyncThunk } from "@reduxjs/toolkit";
import { useMutation } from "@apollo/client";
import {LOGIN_USER} from "../../graphql/mutations/auth";

export const Authenticate = createAsyncThunk(
    "auth/login",
    async (data, thunkAPI) => {
        const {email, password} = data;
        const [login, { loading, error, data: user }] = useMutation(LOGIN_USER,{
            variables: {
                email,
                password
            }
        });
        await login();
        if (error) {
            return thunkAPI.rejectWithValue(error);
        }
        console.log(user);
        return user;
    }

)

the mutation looks like this:

import {gql} from "graphql-tag";

export const LOGIN_USER = gql`
    mutation login($email: String!, $password: String!) {
        login(email: $email, password: $password) {
            id
            email
            name
            token
        }
    }
`;

However, In my component, when I dispatch the action, nothing happens, I've checked the network tab, but there are no requests to my apollo server.

import {Authenticate} from "../../features/user/userActions";
import {useDispatch, useSelector} from "react-redux";

const handleSubmit = async (event) => {
        event.preventDefault();
        dispatch(Authenticate({email, password}));
    };

    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");

I'd appreciate any provided help and support

0 Answers
Related