Skip to content

Commit 935b51f

Browse files
neil585456525saihaj
neil585456525
and
saihaj
authored
feat(react-query): support react query v5 (#434)
* refactor: formatQueryParameters * refactor: rename * refactor: generateFormattedMutationParameters * refactor: rename * refactor: generateInfiniteQueryFormattedParameters * feat: plugin config for support v5 * fix: infiniteQuery option to required * fix: infinite query type * fix: Unnecessary semicolon * fix: test * refactor: use class inherent * fix: v5 parameters type * add: changeset * refactor: interface * fix: typo * refactor: queryHook * refactor: test & custom-mapper query * refactor: generateQuery * refactor: interface * refactor: type * refactor: type * refactor: fetcher-fetch mutation * refactor: fetch-hardcode mutation * refactor: fetch-graphql-request mutation * refactor: fetch-custom-mapper mutation * refactor: fetch-hardcode infiniteQuery * refactor: custom-mapper infiniteQuery * refactor: fetch infiniteQuery * refactor: graphql-request infiniteQuery * fix: v5 queryOptions queryKey type issue * refactor: move queryMethodMap to private * fix: dev-test * fix: text break * edit: deprecated legacy mode flag * refactor: generate fn args format * add: v5 suspense support * refactor: dry * fix: suspense queryKey * fix: suspense optionsType * refactor: dry * refactor: format * fix: infiniteData type * Update packages/plugins/typescript/react-query/package.json --------- Co-authored-by: Saihajpreet Singh <[email protected]>
1 parent 62420e5 commit 935b51f

File tree

14 files changed

+1423
-1287
lines changed

14 files changed

+1423
-1287
lines changed

‎.changeset/twelve-mugs-reflect.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@graphql-codegen/typescript-react-query': major
3+
---
4+
5+
Support react-query v5

‎.vscode/settings.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,5 +19,8 @@
1919
},
2020
"typescript.tsdk": "node_modules/typescript/lib",
2121
"editor.formatOnSave": true,
22-
"editor.defaultFormatter": "esbenp.prettier-vscode"
22+
"editor.defaultFormatter": "esbenp.prettier-vscode",
23+
"[typescript]": {
24+
"editor.defaultFormatter": "esbenp.prettier-vscode"
25+
}
2326
}

‎dev-test/githunt/types.react-query.ts‎

Lines changed: 38 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -460,12 +460,13 @@ export const CommentDocument = `
460460
}
461461
}
462462
${CommentsPageCommentFragmentDoc}`;
463+
463464
export const useCommentQuery = <TData = CommentQuery, TError = unknown>(
464465
dataSource: { endpoint: string; fetchParams?: RequestInit },
465466
variables: CommentQueryVariables,
466467
options?: UseQueryOptions<CommentQuery, TError, TData>,
467-
) =>
468-
useQuery<CommentQuery, TError, TData>(
468+
) => {
469+
return useQuery<CommentQuery, TError, TData>(
469470
['Comment', variables],
470471
fetcher<CommentQuery, CommentQueryVariables>(
471472
dataSource.endpoint,
@@ -475,12 +476,14 @@ export const useCommentQuery = <TData = CommentQuery, TError = unknown>(
475476
),
476477
options,
477478
);
479+
};
480+
478481
export const useInfiniteCommentQuery = <TData = CommentQuery, TError = unknown>(
479482
dataSource: { endpoint: string; fetchParams?: RequestInit },
480483
variables: CommentQueryVariables,
481484
options?: UseInfiniteQueryOptions<CommentQuery, TError, TData>,
482-
) =>
483-
useInfiniteQuery<CommentQuery, TError, TData>(
485+
) => {
486+
return useInfiniteQuery<CommentQuery, TError, TData>(
484487
['Comment.infinite', variables],
485488
metaData =>
486489
fetcher<CommentQuery, CommentQueryVariables>(
@@ -491,6 +494,7 @@ export const useInfiniteCommentQuery = <TData = CommentQuery, TError = unknown>(
491494
)(),
492495
options,
493496
);
497+
};
494498

495499
export const CurrentUserForProfileDocument = `
496500
query CurrentUserForProfile {
@@ -500,12 +504,13 @@ export const CurrentUserForProfileDocument = `
500504
}
501505
}
502506
`;
507+
503508
export const useCurrentUserForProfileQuery = <TData = CurrentUserForProfileQuery, TError = unknown>(
504509
dataSource: { endpoint: string; fetchParams?: RequestInit },
505510
variables?: CurrentUserForProfileQueryVariables,
506511
options?: UseQueryOptions<CurrentUserForProfileQuery, TError, TData>,
507-
) =>
508-
useQuery<CurrentUserForProfileQuery, TError, TData>(
512+
) => {
513+
return useQuery<CurrentUserForProfileQuery, TError, TData>(
509514
variables === undefined ? ['CurrentUserForProfile'] : ['CurrentUserForProfile', variables],
510515
fetcher<CurrentUserForProfileQuery, CurrentUserForProfileQueryVariables>(
511516
dataSource.endpoint,
@@ -515,15 +520,17 @@ export const useCurrentUserForProfileQuery = <TData = CurrentUserForProfileQuery
515520
),
516521
options,
517522
);
523+
};
524+
518525
export const useInfiniteCurrentUserForProfileQuery = <
519526
TData = CurrentUserForProfileQuery,
520527
TError = unknown,
521528
>(
522529
dataSource: { endpoint: string; fetchParams?: RequestInit },
523530
variables?: CurrentUserForProfileQueryVariables,
524531
options?: UseInfiniteQueryOptions<CurrentUserForProfileQuery, TError, TData>,
525-
) =>
526-
useInfiniteQuery<CurrentUserForProfileQuery, TError, TData>(
532+
) => {
533+
return useInfiniteQuery<CurrentUserForProfileQuery, TError, TData>(
527534
variables === undefined
528535
? ['CurrentUserForProfile.infinite']
529536
: ['CurrentUserForProfile.infinite', variables],
@@ -536,6 +543,7 @@ export const useInfiniteCurrentUserForProfileQuery = <
536543
)(),
537544
options,
538545
);
546+
};
539547

540548
export const FeedDocument = `
541549
query Feed($type: FeedType!, $offset: Int, $limit: Int) {
@@ -547,12 +555,13 @@ export const FeedDocument = `
547555
}
548556
}
549557
${FeedEntryFragmentDoc}`;
558+
550559
export const useFeedQuery = <TData = FeedQuery, TError = unknown>(
551560
dataSource: { endpoint: string; fetchParams?: RequestInit },
552561
variables: FeedQueryVariables,
553562
options?: UseQueryOptions<FeedQuery, TError, TData>,
554-
) =>
555-
useQuery<FeedQuery, TError, TData>(
563+
) => {
564+
return useQuery<FeedQuery, TError, TData>(
556565
['Feed', variables],
557566
fetcher<FeedQuery, FeedQueryVariables>(
558567
dataSource.endpoint,
@@ -562,12 +571,14 @@ export const useFeedQuery = <TData = FeedQuery, TError = unknown>(
562571
),
563572
options,
564573
);
574+
};
575+
565576
export const useInfiniteFeedQuery = <TData = FeedQuery, TError = unknown>(
566577
dataSource: { endpoint: string; fetchParams?: RequestInit },
567578
variables: FeedQueryVariables,
568579
options?: UseInfiniteQueryOptions<FeedQuery, TError, TData>,
569-
) =>
570-
useInfiniteQuery<FeedQuery, TError, TData>(
580+
) => {
581+
return useInfiniteQuery<FeedQuery, TError, TData>(
571582
['Feed.infinite', variables],
572583
metaData =>
573584
fetcher<FeedQuery, FeedQueryVariables>(
@@ -578,6 +589,7 @@ export const useInfiniteFeedQuery = <TData = FeedQuery, TError = unknown>(
578589
)(),
579590
options,
580591
);
592+
};
581593

582594
export const SubmitRepositoryDocument = `
583595
mutation submitRepository($repoFullName: String!) {
@@ -586,6 +598,7 @@ export const SubmitRepositoryDocument = `
586598
}
587599
}
588600
`;
601+
589602
export const useSubmitRepositoryMutation = <TError = unknown, TContext = unknown>(
590603
dataSource: { endpoint: string; fetchParams?: RequestInit },
591604
options?: UseMutationOptions<
@@ -594,8 +607,8 @@ export const useSubmitRepositoryMutation = <TError = unknown, TContext = unknown
594607
SubmitRepositoryMutationVariables,
595608
TContext
596609
>,
597-
) =>
598-
useMutation<SubmitRepositoryMutation, TError, SubmitRepositoryMutationVariables, TContext>(
610+
) => {
611+
return useMutation<SubmitRepositoryMutation, TError, SubmitRepositoryMutationVariables, TContext>(
599612
['submitRepository'],
600613
(variables?: SubmitRepositoryMutationVariables) =>
601614
fetcher<SubmitRepositoryMutation, SubmitRepositoryMutationVariables>(
@@ -606,13 +619,16 @@ export const useSubmitRepositoryMutation = <TError = unknown, TContext = unknown
606619
)(),
607620
options,
608621
);
622+
};
623+
609624
export const SubmitCommentDocument = `
610625
mutation submitComment($repoFullName: String!, $commentContent: String!) {
611626
submitComment(repoFullName: $repoFullName, commentContent: $commentContent) {
612627
...CommentsPageComment
613628
}
614629
}
615630
${CommentsPageCommentFragmentDoc}`;
631+
616632
export const useSubmitCommentMutation = <TError = unknown, TContext = unknown>(
617633
dataSource: { endpoint: string; fetchParams?: RequestInit },
618634
options?: UseMutationOptions<
@@ -621,8 +637,8 @@ export const useSubmitCommentMutation = <TError = unknown, TContext = unknown>(
621637
SubmitCommentMutationVariables,
622638
TContext
623639
>,
624-
) =>
625-
useMutation<SubmitCommentMutation, TError, SubmitCommentMutationVariables, TContext>(
640+
) => {
641+
return useMutation<SubmitCommentMutation, TError, SubmitCommentMutationVariables, TContext>(
626642
['submitComment'],
627643
(variables?: SubmitCommentMutationVariables) =>
628644
fetcher<SubmitCommentMutation, SubmitCommentMutationVariables>(
@@ -633,6 +649,8 @@ export const useSubmitCommentMutation = <TError = unknown, TContext = unknown>(
633649
)(),
634650
options,
635651
);
652+
};
653+
636654
export const VoteDocument = `
637655
mutation vote($repoFullName: String!, $type: VoteType!) {
638656
vote(repoFullName: $repoFullName, type: $type) {
@@ -644,11 +662,12 @@ export const VoteDocument = `
644662
}
645663
}
646664
`;
665+
647666
export const useVoteMutation = <TError = unknown, TContext = unknown>(
648667
dataSource: { endpoint: string; fetchParams?: RequestInit },
649668
options?: UseMutationOptions<VoteMutation, TError, VoteMutationVariables, TContext>,
650-
) =>
651-
useMutation<VoteMutation, TError, VoteMutationVariables, TContext>(
669+
) => {
670+
return useMutation<VoteMutation, TError, VoteMutationVariables, TContext>(
652671
['vote'],
653672
(variables?: VoteMutationVariables) =>
654673
fetcher<VoteMutation, VoteMutationVariables>(
@@ -659,3 +678,4 @@ export const useVoteMutation = <TError = unknown, TContext = unknown>(
659678
)(),
660679
options,
661680
);
681+
};

‎packages/plugins/typescript/react-query/src/config.ts‎

Lines changed: 51 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -4,38 +4,12 @@ export type HardcodedFetch = { endpoint: string; fetchParams?: string | Record<s
44
export type CustomFetch = { func: string; isReactHook?: boolean } | string;
55
export type GraphQlRequest = 'graphql-request' | { clientImportPath: string };
66

7-
/**
8-
* @description This plugin generates `React-Query` Hooks with TypeScript typings.
9-
*
10-
* It extends the basic TypeScript plugins: `@graphql-codegen/typescript`, `@graphql-codegen/typescript-operations` - and thus shares a similar configuration.
11-
*
12-
* > **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`.**
13-
*
14-
*/
15-
export interface ReactQueryRawPluginConfig
16-
extends Omit<
17-
RawClientSideBasePluginConfig,
18-
| 'documentMode'
19-
| 'noGraphQLTag'
20-
| 'gqlImport'
21-
| 'documentNodeImport'
22-
| 'noExport'
23-
| 'importOperationTypesFrom'
24-
| 'importDocumentNodeExternallyFrom'
25-
| 'useTypeImports'
26-
| 'legacyMode'
27-
> {
7+
export interface BaseReactQueryPluginConfig {
288
/**
29-
* @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.
30-
*
31-
* The following options are available to use:
32-
*
33-
* - 'fetch' - requires you to specify endpoint and headers on each call, and uses `fetch` to do the actual http call.
34-
* - `{ 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.
35-
* - `file#identifier` - You can use custom fetcher method that should implement the exported `ReactQueryFetcher` interface. Example: `./my-fetcher#myCustomFetcher`.
36-
* - `graphql-request`: Will generate each hook with `client` argument, where you should pass your own `GraphQLClient` (created from `graphql-request`).
9+
* @default unknown
10+
* @description Changes the default "TError" generic type.
3711
*/
38-
fetcher?: 'fetch' | HardcodedFetch | GraphQlRequest | CustomFetch;
12+
errorType?: string;
3913

4014
/**
4115
* @default false
@@ -98,23 +72,30 @@ export interface ReactQueryRawPluginConfig
9872
exposeFetcher?: boolean;
9973

10074
/**
101-
* @default unknown
102-
* @description Changes the default "TError" generic type.
75+
* @default false
76+
* @description Adds an Infinite Query along side the standard one
10377
*/
104-
errorType?: string;
78+
addInfiniteQuery?: boolean;
10579

10680
/**
10781
* @default false
108-
* @description Adds an Infinite Query along side the standard one
82+
* @description Adds a Suspense Query along side the standard one
10983
*/
110-
addInfiniteQuery?: boolean;
84+
addSuspenseQuery?: boolean;
11185

11286
/**
11387
* @default false
11488
* @description If true, it imports `react-query` not `@tanstack/react-query`, default is false.
89+
* @deprecated Please use `reactQueryVersion` instead.
11590
*/
11691
legacyMode?: boolean;
11792

93+
/**
94+
* @default 4
95+
* @description The version of react-query to use. Will override the legacyMode option.
96+
*/
97+
reactQueryVersion?: 3 | 4 | 5;
98+
11899
/**
119100
* @default empty
120101
* @description Add custom import for react-query.
@@ -126,3 +107,38 @@ export interface ReactQueryRawPluginConfig
126107
*/
127108
reactQueryImportFrom?: string;
128109
}
110+
111+
/**
112+
* @description This plugin generates `React-Query` Hooks with TypeScript typings.
113+
*
114+
* It extends the basic TypeScript plugins: `@graphql-codegen/typescript`, `@graphql-codegen/typescript-operations` - and thus shares a similar configuration.
115+
*
116+
* > **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`.**
117+
*
118+
*/
119+
export interface ReactQueryRawPluginConfig
120+
extends Omit<
121+
RawClientSideBasePluginConfig,
122+
| 'documentMode'
123+
| 'noGraphQLTag'
124+
| 'gqlImport'
125+
| 'documentNodeImport'
126+
| 'noExport'
127+
| 'importOperationTypesFrom'
128+
| 'importDocumentNodeExternallyFrom'
129+
| 'useTypeImports'
130+
| 'legacyMode'
131+
>,
132+
BaseReactQueryPluginConfig {
133+
/**
134+
* @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.
135+
*
136+
* The following options are available to use:
137+
*
138+
* - 'fetch' - requires you to specify endpoint and headers on each call, and uses `fetch` to do the actual http call.
139+
* - `{ 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.
140+
* - `file#identifier` - You can use custom fetcher method that should implement the exported `ReactQueryFetcher` interface. Example: `./my-fetcher#myCustomFetcher`.
141+
* - `graphql-request`: Will generate each hook with `client` argument, where you should pass your own `GraphQLClient` (created from `graphql-request`).
142+
*/
143+
fetcher?: 'fetch' | HardcodedFetch | GraphQlRequest | CustomFetch;
144+
}

0 commit comments

Comments
 (0)