Hotfix for typescript react query infinite query breaking change (#8567)

* fixes issue #7549 * update dev-test types #7549 * Create sweet-nails-tie.md * fix breaking change in #8566; optionally pass metaData.pageParam to pageParamKey only when it is defined Co-authored-by: Charly POLY <[email protected]>
dotansimha · Nov 4, 2022 · af40efb · af40efb
1 parent da87bb9
commit af40efb
Show file tree

Hide file tree

Showing 8 changed files with 18 additions and 13 deletions.
diff --git a/.changeset/sweet-nails-tie.md b/.changeset/sweet-nails-tie.md
@@ -0,0 +1,5 @@
+---
+"@graphql-codegen/typescript-react-query": patch
+---
+
+fixes issue #7549
diff --git a/dev-test/githunt/types.react-query.ts b/dev-test/githunt/types.react-query.ts
@@ -475,7 +475,7 @@ export const useInfiniteCommentQuery = <TData = CommentQuery, TError = unknown>(
     metaData =>
       fetcher<CommentQuery, CommentQueryVariables>(dataSource.endpoint, dataSource.fetchParams || {}, CommentDocument, {
         ...variables,
-        [pageParamKey]: metaData.pageParam,
+        ...(metaData.pageParam ? { [pageParamKey]: metaData.pageParam } : {}),
       })(),
     options
   );
@@ -516,7 +516,7 @@ export const useInfiniteCurrentUserForProfileQuery = <TData = CurrentUserForProf
         dataSource.endpoint,
         dataSource.fetchParams || {},
         CurrentUserForProfileDocument,
-        { ...variables, [pageParamKey]: metaData.pageParam }
+        { ...variables, ...(metaData.pageParam ? { [pageParamKey]: metaData.pageParam } : {}) }
       )(),
     options
   );
@@ -552,7 +552,7 @@ export const useInfiniteFeedQuery = <TData = FeedQuery, TError = unknown>(
     metaData =>
       fetcher<FeedQuery, FeedQueryVariables>(dataSource.endpoint, dataSource.fetchParams || {}, FeedDocument, {
         ...variables,
-        [pageParamKey]: metaData.pageParam,
+        ...(metaData.pageParam ? { [pageParamKey]: metaData.pageParam } : {}),
       })(),
     options
   );

diff --git a/packages/plugins/typescript/react-query/src/fetcher-custom-mapper.ts b/packages/plugins/typescript/react-query/src/fetcher-custom-mapper.ts
@@ -59,8 +59,8 @@ export class CustomMapperFetcher implements FetcherRenderer {
     const typedFetcher = this.getFetcherFnName(operationResultType, operationVariablesTypes);
     const implHookOuter = this._isReactHook ? `const query = ${typedFetcher}(${documentVariableName})` : '';
     const impl = this._isReactHook
-      ? `(metaData) => query({...variables, [pageParamKey]: metaData.pageParam })`
-      : `(metaData) => ${typedFetcher}(${documentVariableName}, {...variables, [pageParamKey]: metaData.pageParam })()`;
+      ? `(metaData) => query({...variables, ...(metaData.pageParam ? {[pageParamKey]: metaData.pageParam} : {})})`
+      : `(metaData) => ${typedFetcher}(${documentVariableName}, {...variables, ...(metaData.pageParam ? {[pageParamKey]: metaData.pageParam} : {})})()`;
 
     return `export const useInfinite${operationName} = <
       TData = ${operationResultType},

diff --git a/packages/plugins/typescript/react-query/src/fetcher-fetch-hardcoded.ts b/packages/plugins/typescript/react-query/src/fetcher-fetch-hardcoded.ts
@@ -83,7 +83,7 @@ ${this.getFetchParams()}
     ) =>
     ${hookConfig.infiniteQuery.hook}<${operationResultType}, TError, TData>(
       ${generateInfiniteQueryKey(node, hasRequiredVariables)},
-      (metaData) => fetcher<${operationResultType}, ${operationVariablesTypes}>(${documentVariableName}, {...variables, [pageParamKey]: metaData.pageParam })(),
+      (metaData) => fetcher<${operationResultType}, ${operationVariablesTypes}>(${documentVariableName}, {...variables, ...(metaData.pageParam ? {[pageParamKey]: metaData.pageParam} : {})})(),
       options
     );`;
   }

diff --git a/packages/plugins/typescript/react-query/src/fetcher-fetch.ts b/packages/plugins/typescript/react-query/src/fetcher-fetch.ts
@@ -61,7 +61,7 @@ function fetcher<TData, TVariables>(endpoint: string, requestInit: RequestInit,
     ) =>
     ${hookConfig.infiniteQuery.hook}<${operationResultType}, TError, TData>(
       ${generateInfiniteQueryKey(node, hasRequiredVariables)},
-      (metaData) => fetcher<${operationResultType}, ${operationVariablesTypes}>(dataSource.endpoint, dataSource.fetchParams || {}, ${documentVariableName}, {...variables, [pageParamKey]: metaData.pageParam })(),
+      (metaData) => fetcher<${operationResultType}, ${operationVariablesTypes}>(dataSource.endpoint, dataSource.fetchParams || {}, ${documentVariableName}, {...variables, ...(metaData.pageParam ? {[pageParamKey]: metaData.pageParam} : {})})(),
       options
     );`;
   }

diff --git a/packages/plugins/typescript/react-query/src/fetcher-graphql-request.ts b/packages/plugins/typescript/react-query/src/fetcher-graphql-request.ts
@@ -50,7 +50,7 @@ function fetcher<TData, TVariables>(client: GraphQLClient, query: string, variab
     ) =>
     ${hookConfig.infiniteQuery.hook}<${operationResultType}, TError, TData>(
       ${generateInfiniteQueryKey(node, hasRequiredVariables)},
-      (metaData) => fetcher<${operationResultType}, ${operationVariablesTypes}>(client, ${documentVariableName}, {...variables, [pageParamKey]: metaData.pageParam }, headers)(),
+      (metaData) => fetcher<${operationResultType}, ${operationVariablesTypes}>(client, ${documentVariableName}, {...variables, ...(metaData.pageParam ? {[pageParamKey]: metaData.pageParam} : {})}, headers)(),
       options
     );`;
   }

diff --git a/packages/plugins/typescript/react-query/tests/__snapshots__/react-query.spec.ts.snap b/packages/plugins/typescript/react-query/tests/__snapshots__/react-query.spec.ts.snap
@@ -40,7 +40,7 @@ export const useInfiniteTestQuery = <
     const query = useCustomFetcher<TTestQuery, TTestQueryVariables>(TestDocument)
     return useInfiniteQuery<TTestQuery, TError, TData>(
       variables === undefined ? ['test.infinite'] : ['test.infinite', variables],
-      (metaData) => query({...variables, [pageParamKey]: metaData.pageParam }),
+      (metaData) => query({...variables, ...(metaData.pageParam ? {[pageParamKey]: metaData.pageParam} : {})}),
       options
     )};
 
@@ -102,7 +102,7 @@ export const useInfiniteTestQuery = <
     
     return useInfiniteQuery<TTestQuery, TError, TData>(
       variables === undefined ? ['test.infinite'] : ['test.infinite', variables],
-      (metaData) => myCustomFetcher<TTestQuery, TTestQueryVariables>(TestDocument, {...variables, [pageParamKey]: metaData.pageParam })(),
+      (metaData) => myCustomFetcher<TTestQuery, TTestQueryVariables>(TestDocument, {...variables, ...(metaData.pageParam ? {[pageParamKey]: metaData.pageParam} : {})})(),
       options
     )};
 

diff --git a/packages/plugins/typescript/react-query/tests/react-query.spec.ts b/packages/plugins/typescript/react-query/tests/react-query.spec.ts
@@ -93,7 +93,7 @@ export const useInfiniteTestQuery = <
     ) =>
     useInfiniteQuery<TestQuery, TError, TData>(
       variables === undefined ? ['test.infinite'] : ['test.infinite', variables],
-      (metaData) => fetcher<TestQuery, TestQueryVariables>(dataSource.endpoint, dataSource.fetchParams || {}, TestDocument, {...variables, [pageParamKey]: metaData.pageParam })(),
+      (metaData) => fetcher<TestQuery, TestQueryVariables>(dataSource.endpoint, dataSource.fetchParams || {}, TestDocument, {...variables, ...(metaData.pageParam ? {[pageParamKey]: metaData.pageParam} : {})})(),
       options
     );
 
@@ -269,7 +269,7 @@ export const useTestMutation = <
     ) =>{
     return useInfiniteQuery<TTestQuery, TError, TData>(
       variables === undefined ? ['test.infinite'] : ['test.infinite', variables],
-      (metaData) => myCustomFetcher<TTestQuery, TTestQueryVariables>(TestDocument, {...variables, [pageParamKey]: metaData.pageParam })(),
+      (metaData) => myCustomFetcher<TTestQuery, TTestQueryVariables>(TestDocument, {...variables, ...(metaData.pageParam ? {[pageParamKey]: metaData.pageParam} : {})})(),
       options
     )};`);
       expect(out.content).toBeSimilarStringTo(`export const useTestMutation = <
@@ -366,7 +366,7 @@ export const useTestMutation = <
       const query = useCustomFetcher<TTestQuery, TTestQueryVariables>(TestDocument)
       return useInfiniteQuery<TTestQuery, TError, TData>(
       variables === undefined ? ['test.infinite'] : ['test.infinite', variables],
-      (metaData) => query({...variables, [pageParamKey]: metaData.pageParam }),
+      (metaData) => query({...variables, ...(metaData.pageParam ? {[pageParamKey]: metaData.pageParam} : {})}),
       options
     )};`);
       expect(out.content).toBeSimilarStringTo(`export const useTestMutation = <