Graphql: Error passing variables

[wembleyos77]

Hello.

Due this code

function useGQLMutation(
  key: string,
  query: string,
) {
  const endpoint = 'http://localhost:3000/graphql';
  const graphQLClient = new GraphQLClient(endpoint);
  const fetchData = () => graphQLClient.request(endpoint, query);

  return useMutation<unknown, unknown, Record<any, any>>(key, fetchData);
}

  const login = useGQLMutation('login', gql`
      mutation Login($credentials: AuthenticateInput) {
        login(credentials: $credentials) {
          id
        }
      }
  `);

Resolver:

  @Mutation(() => User, { nullable: true })
  async login(@Arg('credentials') credentials: AuthenticateInput) {
    const { email, password } = credentials;

    const salted = await bcrypt.hash(password, 10);

    const user = await User.findOne({ email });

    if (!user) {
      throw new Error('Invalid user email');
    }

    const isPasswordValid = await bcrypt.compare(password, salted);

    if (!isPasswordValid) {
      throw new Error('Password invalid');
    }

    return user;
  }

Im getting error:

"message": "Variable "$credentials" of required type "AuthenticateInput!" was not provided."

[wembleyos77]

Seems like no variables are passing by using useMutation.

[TkDodo]

You need to pass variables to the mutate function returned from useMutation

[wembleyos77]

<LoginForm onSubmit={(credentials) => login.mutate(credentials)} />

They are being passed here.

[wembleyos77]

https://github.com/wembleyos77/ts-gql here is an repo, just run lerna bootstrap && yarn start

[TkDodo]

the repo yields 404 for me - is it public?

I think your useMutation signature is wrong:

return useMutation<unknown, unknown, Record<any, any>>(key, fetchData);

this looks like useQuery to me. useMutation only takes a mutationFn:

const { mutate } = useMutation(variables => doARequest(variables))

mutate({ variables, go, here })

[wembleyos77]

That did the trick!