0

I'm trying to make a mutation request to my graphql api but I'm getting an invalid value error. I'm using graphql codegen with typescript and react on my front end. I directly copied my working graphql mutation that I created on graphql playground. Codegen isn't giving any errors when I generate, typescript isn't giving me any errors and I have checked my syntax like 10 times but I can't for the life of me figure out why it's going wrong.

error code: GRAPHQL_VALIDATION_FAILED

error message: "Argument "data" has invalid value {email: $email, username: $username, password: $password, confirmPassword: $confirmPassword}."

My backend resolver looks like this

@Mutation(() => LoginResponse)
  async signupLocal(
    @Arg("data") signupLocalInput: SignupLocalInput,
    @Ctx() { res }: MyContext
  ): Promise<LoginResponse> {
    const user = await signupLocalService(signupLocalInput);
    sendRefreshToken(res, createRefreshToken(user));
    return {
      accessToken: createAccessToken(user),
      user,
    };
  }

My frontend graphql mutation looks like this

mutation SignupLocal(
  $email: String!
  $username: String!
  $password: String!
  $confirmPassword: String!
) {
  signupLocal(
    data: {
      email: $email
      username: $username
      password: $password
      confirmPassword: $confirmPassword
    }
  ) {
    accessToken
  }
}

And my implementation looks like this

const [signupLocal] = useSignupLocalMutation();

const onSubmit = async (data: FormData) => {
  console.log(data);
  const { email, username, password, confirmPassword } = data;
  const response = await signupLocal({
    variables: { email, username, password, confirmPassword },
  });
  console.log(response);
};
Joel Jacobsen
  • 313
  • 1
  • 5
  • 15
  • Please edit your question to include the exact error message. – Daniel Rearden Aug 08 '20 at 01:41
  • @DanielRearden okay, edited to include error code and error message (not sure if you get a notification if a post you have commented on has been edited or not) – Joel Jacobsen Aug 08 '20 at 01:49
  • 1
    pass entire `data` ... `const response = await signupLocal({ variables: data })` ... adjust mutation to use only `$data` arg – xadm Aug 08 '20 at 02:30
  • @xadm thanks, this basically works although i had to pass data in like signupLocal({ variables: { data } }) and create an interface for data in my graphql file to use like: mutation SignupLocal($data: SignupLocalInput!) { signupLocal(data: $data) { accessToken } } but maybe I missed something and thats not necessary. It would be nice if I didnt have to create an interface for each of my mutations that I handle this way – Joel Jacobsen Aug 08 '20 at 03:46
  • using typescript => writing type defs/interfaces ? .... probably already generated or can be ... https://graphql-code-generator.com/docs/plugins/typescript – xadm Aug 08 '20 at 11:31

0 Answers0