我正在以编程方式使用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>;
问题是缺少某些类型,例如MyqueryQuery
、MyqueryQueryVariables
。
怎么解决?
添加插件typescript
和typescript-操作
将生成额外的类型。但不再生成钩子。
我做了一个代码框显示问题。
我认为您需要再添加两个插件:
如果您要https://www.graphql-code-generator.com/并从Live示例中选择ReactApolloHooks
,那么您会在codegen. yml
-file中看到所需的插件。如果您在那里删除typescript
和typescript-操作
,则会生成与示例中相似的输出。
注意:对于您要使用的每个插件,请在config
对象的plugins
属性中添加另一个对象。该对象只有一个键(插件的名称)和另一个(可能为空)具有该插件配置选项的对象作为值。
示例:
const config = {
// ...
plugins: [
{
typescript: {}
},
{
typescriptOperations: {},
},
{
typescriptReactApollo: {}
}
]
}
我已经用一个工作示例修改了你的代码框:https://codesandbox.io/s/relaxed-noyce-d200dg?file=/index.js