提问者:小点点

Graphql Codecen:生成类型挂钩的问题


我正在以编程方式使用graph ql codecen

import * as typescriptReactApolloPlugin from "@graphql-codegen/typescript-react-apollo";

const config: Types.GenerateOptions = {
  documents: [{ document: doc }],
  config: {},
  // returns the string output, rather than writing to a file
  filename: "index.ts",
  schema: undefined,
  schemaAst: schema,
  plugins: [
    {
      typescriptReactApollo: {},
    },
  ],
  pluginMap: {
    typescriptReactApollo: typescriptReactApolloPlugin,
  },
};
const result = await codegen(config);

这是我的文档(查询):

query myquery {
  Users {
    limit
  }
}

这是生成的结果:

import { gql } from '@apollo/client';
import * as Apollo from '@apollo/client';
const defaultOptions = {} as const;

export const MyqueryDocument = gql`
    query myquery {
  Users {
    limit
  }
}
    `;

/**
 * __useMyqueryQuery__
 *
 * To run a query within a React component, call `useMyqueryQuery` and pass it any options that fit your needs.
 * When your component renders, `useMyqueryQuery` returns an object from Apollo Client that contains loading, error, and data properties
 * you can use to render your UI.
 *
 * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
 *
 * @example
 * const { data, loading, error } = useMyqueryQuery({
 *   variables: {
 *   },
 * });
 */
export function useMyqueryQuery(baseOptions?: Apollo.QueryHookOptions<MyqueryQuery, MyqueryQueryVariables>) {
        const options = {...defaultOptions, ...baseOptions}
        return Apollo.useQuery<MyqueryQuery, MyqueryQueryVariables>(MyqueryDocument, options);
      }
export function useMyqueryLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<MyqueryQuery, MyqueryQueryVariables>) {    
          const options = {...defaultOptions, ...baseOptions}
          return Apollo.useLazyQuery<MyqueryQuery, MyqueryQueryVariables>(MyqueryDocument, options);
        }
export type MyqueryQueryHookResult = ReturnType<typeof useMyqueryQuery>;
export type MyqueryLazyQueryHookResult = ReturnType<typeof useMyqueryLazyQuery>;
export type MyqueryQueryResult = Apollo.QueryResult<MyqueryQuery, MyqueryQueryVariables>;

问题是缺少某些类型,例如MyqueryQueryMyqueryQueryVariables

怎么解决?

添加插件typescripttypescript-操作将生成额外的类型。但不再生成钩子。

我做了一个代码框显示问题。


共1个答案

匿名用户

我认为您需要再添加两个插件:

  • 打字稿
  • 打字稿-操作

如果您要https://www.graphql-code-generator.com/并从Live示例中选择ReactApolloHooks,那么您会在codegen. yml-file中看到所需的插件。如果您在那里删除typescripttypescript-操作,则会生成与示例中相似的输出。

注意:对于您要使用的每个插件,请在config对象的plugins属性中添加另一个对象。该对象只有一个键(插件的名称)和另一个(可能为空)具有该插件配置选项的对象作为值。

示例:

const config = {
  // ...
  plugins: [
    {
      typescript: {}
    },
    {
      typescriptOperations: {},
    }, 
    {
      typescriptReactApollo: {}
    }
  ]
}

我已经用一个工作示例修改了你的代码框:https://codesandbox.io/s/relaxed-noyce-d200dg?file=/index.js