0

So here's the wrapping component where I'm passing in a useQuery hook useOrganizationAutocompleteQuery generated by graphql-codegen. I'd like to be able to pass in any kind of useQuery hook.

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

How would I type the queryHook prop to accept any kind of apollo useQuery hook?

queryHook: typeof useOrganizationAutocompleteQuery;

And here's what Apollo has for useQuery

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

1 Answers1

1

You can configure where the hooks is being imported from by using apolloReactHooksImportFrom config flag (see 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

You can also point to a relative file, with any kind of custom useQuery hook.

If you wish to have more flexibility and have custom generated code, you can write custom codegen plugin (https://graphql-code-generator.com/docs/custom-codegen/write-your-plugin) that will generate custom code.

Also, if you think something can be added/modified in codegen itself, let me know, we always welcome more flexibility :)

Dotan Simha
  • 742
  • 1
  • 5
  • 12
  • when i run `codegen` it generates also and `useQuery` hook even if it exists alread in Apollo Client. How to stop the automated generation of this hook in `codegen`? – Asking Apr 01 '21 at 13:08