Type errors using Apollo Client in React Native typescript project

Question

I am trying to use Apollo Client in my React Native project. I tried to generate types from the graphql API based on the official tutorial: https://www.apollographql.com/docs/react/development-testing/static-typing/

The problem is that I am using the gql function which returns unknown. And these make problems in the useQuery and useMutation hooks.

A defined mutation (this is working in Apollo playground):

export const registerMutation = gql(`
  mutation Register($email: String!, $password: String!, $companyName: String) {
    register(data:{email: $email, password: $password, companyName: $companyName}){
      name
      email
      profileImage
    }
  }
`);

Usage of the mutation:

const [register] = useMutation(registerMutation);

The error I am getting from useMutation hook: Argument of type 'unknown' is not assignable to parameter of type 'DocumentNode | TypedDocumentNode<any, OperationVariables>'.

score 1 · Answer 1 · answered Apr 13 '23 at 20:04

I was also getting the same error I resolved it by assigning a type to the mutation i.e. a type can be assigned to the registerMutation where it is defined.

For example,

import { TypedDocumentNode, gql } from "@apollo/client";
import {
  MutationTokenAuthArgs,
  ObtainJsonWebToken,
} from "src/__generated__/graphql";

export const FETCH_TOKEN: TypedDocumentNode<
  ObtainJsonWebToken,
  MutationTokenAuthArgs
> = gql`
  mutation tokenAuth($email: String!, $password: String!) {
    tokenAuth(email: $email, password: $password) {
      refreshExpiresIn
      token
    }
  }
`;

Notice I have used gql from the @apollo/client and not the one that was generated by codegen and the types MutationTokenAuthArgs, ObtainJsonWebToken were generated by the graphql codegen. I searched them using the mutation name in my case tokenAuth in the folder provided in codegen.ts under the generates key.

Link for the source:

Type errors using Apollo Client in React Native typescript project

1 Answers1