Apollo Client在React Native TypeScript项目中出现类型错误

huangapple go评论99阅读模式
英文:

Type errors using Apollo Client in React Native typescript project

问题

我正在尝试在我的React Native项目中使用Apollo Client。我尝试根据官方教程从graphql API生成类型:https://www.apollographql.com/docs/react/development-testing/static-typing/

问题是,我正在使用返回unknowngql函数。这在useQueryuseMutation钩子中造成问题。

一个已定义的mutation(在Apollo playground中工作):

  1. export const registerMutation = gql(`
  2. mutation Register($email: String!, $password: String!, $companyName: String) {
  3. register(data:{email: $email, password: $password, companyName: $companyName}){
  4. name
  5. email
  6. profileImage
  7. }
  8. }
  9. `);

使用这个mutation:

  1. const [register] = useMutation(registerMutation);

我从useMutation钩子得到的错误:Argument of type 'unknown' is not assignable to parameter of type 'DocumentNode | TypedDocumentNode<any, OperationVariables>'.

英文:

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):

  1. export const registerMutation = gql(`
  2. mutation Register($email: String!, $password: String!, $companyName: String) {
  3. register(data:{email: $email, password: $password, companyName: $companyName}){
  4. name
  5. email
  6. profileImage
  7. }
  8. }
  9. `);

Usage of the mutation:

  1. const [register] = useMutation(registerMutation);

The error I am getting from useMutation hook: Argument of type &#39;unknown&#39; is not assignable to parameter of type &#39;DocumentNode | TypedDocumentNode&lt;any, OperationVariables&gt;&#39;.

答案1

得分: 1

我也遇到了相同的错误,我通过为mutation分配了一个类型来解决它,即在定义registerMutation时可以分配一个类型。

例如,

  1. import { TypedDocumentNode, gql } from "@apollo/client";
  2. import {
  3. MutationTokenAuthArgs,
  4. ObtainJsonWebToken,
  5. } from "src/__generated__/graphql";
  6. export const FETCH_TOKEN: TypedDocumentNode<
  7. ObtainJsonWebToken,
  8. MutationTokenAuthArgs
  9. > = gql`
  10. mutation tokenAuth($email: String!, $password: String!) {
  11. tokenAuth(email: $email, password: $password) {
  12. refreshExpiresIn
  13. token
  14. }
  15. }
  16. `;

请注意,我使用了来自@apollo/client的gql,而不是由codegen生成的那个,而类型MutationTokenAuthArgsObtainJsonWebToken是由graphql codegen生成的。我通过在codegen.ts文件中的generates键下提供的文件夹中搜索mutation名称(在我的情况下是tokenAuth)找到了它们。

源链接:

英文:

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,

  1. import { TypedDocumentNode, gql } from &quot;@apollo/client&quot;;
  2. import {
  3. MutationTokenAuthArgs,
  4. ObtainJsonWebToken,
  5. } from &quot;src/__generated__/graphql&quot;;
  6. export const FETCH_TOKEN: TypedDocumentNode&lt;
  7. ObtainJsonWebToken,
  8. MutationTokenAuthArgs
  9. &gt; = gql`
  10. mutation tokenAuth($email: String!, $password: String!) {
  11. tokenAuth(email: $email, password: $password) {
  12. refreshExpiresIn
  13. token
  14. }
  15. }
  16. `;

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:

huangapple
  • 本文由 发表于 2023年2月23日 22:05:47
  • 转载请务必保留本文链接:https://go.coder-hub.com/75545880.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定