UNPKG

4.1 kBTypeScriptView Raw
1import { RawClientSideBasePluginConfig } from '@graphql-codegen/visitor-plugin-common';
2export declare type HardcodedFetch = {
3 endpoint: string;
4 fetchParams?: string | Record<string, any>;
5};
6export 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 */
18export 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}