Question

因此，这是包装组件，我将传入由graphql-codegen生成的useQuery钩子useOrganizationAutocompleteQuery。我希望能够传递任何形式的useQuery挂钩。

<AutocompleteField
  {...props}
  getOptionLabel={(option: OrganizationResult) => option.name.value || ''}
  queryHook={useOrganizationAutocompleteQuery}
  resource="organizations"
/>

我将如何输入queryHook道具以接受任何种类的阿波罗useQuery挂钩？

queryHook: typeof useOrganizationAutocompleteQuery;

这是Apollo的useQuery

export declare function useQuery<TData = any, TVariables = OperationVariables>(query: DocumentNode, options?: QueryHookOptions<TData, TVariables>): QueryResult<TData, TVariables>;

Answer 1

您可以使用apolloReactHooksImportFrom config标志（请参阅https://graphql-code-generator.com/docs/plugins/typescript-react-apollo）来配置从何处导入钩子：

generates:
  my-file.tsx:
    config:
      apolloReactHooksImportFrom: my-package
    plugins:
      - typescript
      - typescript-operations
      - typescript-react-apollo

您还可以使用任何类型的自定义useQuery钩子指向相对文件。

如果您希望具有更大的灵活性并拥有自定义生成的代码，则可以编写将生成自定义代码的自定义代码生成插件（https://graphql-code-generator.com/docs/custom-codegen/write-your-plugin）。

此外，如果您认为可以在代码生成本身中添加/修改某些内容，请告诉我，我们始终欢迎更大的灵活性：）

如何一般地键入Apollo useQuery挂钩？

1 个答案: