1 | import { RawClientSideBasePluginConfig } from '@graphql-codegen/visitor-plugin-common';
|
2 | export declare type HardcodedFetch = {
|
3 | endpoint: string;
|
4 | fetchParams?: string | Record<string, any>;
|
5 | };
|
6 | export declare type CustomFetch = {
|
7 | func: string;
|
8 | isReactHook?: boolean;
|
9 | } | string;
|
10 | /**
|
11 | * @description This plugin generates `React-Query` Hooks with TypeScript typings.
|
12 | *
|
13 | * It extends the basic TypeScript plugins: `@graphql-codegen/typescript`, `@graphql-codegen/typescript-operations` - and thus shares a similar configuration.
|
14 | *
|
15 | * > **If you are using the `react-query` package instead of the `@tanstack/react-query` package in your project, please set the `legacyMode` option to `true`.**
|
16 | *
|
17 | */
|
18 | export interface ReactQueryRawPluginConfig extends Omit<RawClientSideBasePluginConfig, 'documentMode' | 'noGraphQLTag' | 'gqlImport' | 'documentNodeImport' | 'noExport' | 'importOperationTypesFrom' | 'importDocumentNodeExternallyFrom' | 'useTypeImports' | 'legacyMode'> {
|
19 | /**
|
20 | * @description Customize the fetcher you wish to use in the generated file. React-Query is agnostic to the data-fetching layer, so you should provide it, or use a custom one.
|
21 | *
|
22 | * The following options are available to use:
|
23 | *
|
24 | * - 'fetch' - requires you to specify endpoint and headers on each call, and uses `fetch` to do the actual http call.
|
25 | * - `{ endpoint: string, fetchParams: RequestInit }`: hardcode your endpoint and fetch options into the generated output, using the environment `fetch` method. You can also use `process.env.MY_VAR` as endpoint or header value.
|
26 | * - `file#identifier` - You can use custom fetcher method that should implement the exported `ReactQueryFetcher` interface. Example: `./my-fetcher#myCustomFetcher`.
|
27 | * - `graphql-request`: Will generate each hook with `client` argument, where you should pass your own `GraphQLClient` (created from `graphql-request`).
|
28 | */
|
29 | fetcher?: 'fetch' | HardcodedFetch | 'graphql-request' | CustomFetch;
|
30 | /**
|
31 | * @default false
|
32 | * @description For each generate query hook adds `document` field with a
|
33 | * corresponding GraphQL query. Useful for `queryClient.fetchQuery`.
|
34 | * @exampleMarkdown
|
35 | * ```ts
|
36 | * queryClient.fetchQuery(
|
37 | * useUserDetailsQuery.getKey(variables),
|
38 | * () => gqlRequest(useUserDetailsQuery.document, variables)
|
39 | * )
|
40 | * ```
|
41 | */
|
42 | exposeDocument?: boolean;
|
43 | /**
|
44 | * @default false
|
45 | * @description For each generate query hook adds getKey(variables: QueryVariables) function. Useful for cache updates. If addInfiniteQuery is true, it will also add a getKey function to each infinite query.
|
46 | * @exampleMarkdown
|
47 | * ```ts
|
48 | * const query = useUserDetailsQuery(...)
|
49 | * const key = useUserDetailsQuery.getKey({ id: theUsersId })
|
50 | * // use key in a cache update after a mutation
|
51 | * ```
|
52 | */
|
53 | exposeQueryKeys?: boolean;
|
54 | /**
|
55 | * @default false
|
56 | * @description For each generate mutation hook adds getKey() function. Useful for call outside of functional component.
|
57 | * @exampleMarkdown
|
58 | * ```ts
|
59 | * const mutation = useUserDetailsMutation(...)
|
60 | * const key = useUserDetailsMutation.getKey()
|
61 | * ```
|
62 | */
|
63 | exposeMutationKeys?: boolean;
|
64 | /**
|
65 | * @default false
|
66 | * @description For each generate query hook adds `fetcher` field with a corresponding GraphQL query using the fetcher.
|
67 | * It is useful for `queryClient.fetchQuery` and `queryClient.prefetchQuery`.
|
68 | * @exampleMarkdown
|
69 | * ```ts
|
70 | * await queryClient.prefetchQuery(userQuery.getKey(), () => userQuery.fetcher())
|
71 | * ```
|
72 | */
|
73 | exposeFetcher?: boolean;
|
74 | /**
|
75 | * @default unknown
|
76 | * @description Changes the default "TError" generic type.
|
77 | */
|
78 | errorType?: string;
|
79 | /**
|
80 | * @default false
|
81 | * @description Adds an Infinite Query along side the standard one
|
82 | */
|
83 | addInfiniteQuery?: boolean;
|
84 | /**
|
85 | * @default true
|
86 | * @description If false, it will work with `@tanstack/react-query`, default value is true.
|
87 | */
|
88 | legacyMode?: boolean;
|
89 | }
|