fixes issue #7549 (#8497)

Co-authored-by: Charly POLY <1252066+charlypoly@users.noreply.github.com>
dotansimha · Oct 20, 2022 · 7c2bb60 · 7c2bb60
1 parent a46b8d9
commit 7c2bb60
Show file tree

Hide file tree

Showing 8 changed files with 31 additions and 20 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
@@ -466,7 +466,7 @@ export const useCommentQuery = <TData = CommentQuery, TError = unknown>(
   );
 export const useInfiniteCommentQuery = <TData = CommentQuery, TError = unknown>(
   dataSource: { endpoint: string; fetchParams?: RequestInit },
-  _pageParamKey: keyof CommentQueryVariables,
+  pageParamKey: keyof CommentQueryVariables,
   variables: CommentQueryVariables,
   options?: UseInfiniteQueryOptions<CommentQuery, TError, TData>
 ) =>
@@ -475,7 +475,7 @@ export const useInfiniteCommentQuery = <TData = CommentQuery, TError = unknown>(
     metaData =>
       fetcher<CommentQuery, CommentQueryVariables>(dataSource.endpoint, dataSource.fetchParams || {}, CommentDocument, {
         ...variables,
-        ...(metaData.pageParam ?? {}),
+        [pageParamKey]: metaData.pageParam,
       })(),
     options
   );
@@ -505,7 +505,7 @@ export const useCurrentUserForProfileQuery = <TData = CurrentUserForProfileQuery
   );
 export const useInfiniteCurrentUserForProfileQuery = <TData = CurrentUserForProfileQuery, TError = unknown>(
   dataSource: { endpoint: string; fetchParams?: RequestInit },
-  _pageParamKey: keyof CurrentUserForProfileQueryVariables,
+  pageParamKey: keyof CurrentUserForProfileQueryVariables,
   variables?: CurrentUserForProfileQueryVariables,
   options?: UseInfiniteQueryOptions<CurrentUserForProfileQuery, TError, TData>
 ) =>
@@ -516,7 +516,7 @@ export const useInfiniteCurrentUserForProfileQuery = <TData = CurrentUserForProf
         dataSource.endpoint,
         dataSource.fetchParams || {},
         CurrentUserForProfileDocument,
-        { ...variables, ...(metaData.pageParam ?? {}) }
+        { ...variables, [pageParamKey]: metaData.pageParam }
       )(),
     options
   );
@@ -543,7 +543,7 @@ export const useFeedQuery = <TData = FeedQuery, TError = unknown>(
   );
 export const useInfiniteFeedQuery = <TData = FeedQuery, TError = unknown>(
   dataSource: { endpoint: string; fetchParams?: RequestInit },
-  _pageParamKey: keyof FeedQueryVariables,
+  pageParamKey: keyof FeedQueryVariables,
   variables: FeedQueryVariables,
   options?: UseInfiniteQueryOptions<FeedQuery, TError, TData>
 ) =>
@@ -552,7 +552,7 @@ export const useInfiniteFeedQuery = <TData = FeedQuery, TError = unknown>(
     metaData =>
       fetcher<FeedQuery, FeedQueryVariables>(dataSource.endpoint, dataSource.fetchParams || {}, FeedDocument, {
         ...variables,
-        ...(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
@@ -47,6 +47,7 @@ export class CustomMapperFetcher implements FetcherRenderer {
     operationVariablesTypes: string,
     hasRequiredVariables: boolean
   ): string {
+    const pageParamKey = `pageParamKey: keyof ${operationVariablesTypes}`;
     const variables = `variables${hasRequiredVariables ? '' : '?'}: ${operationVariablesTypes}`;
 
     const hookConfig = this.visitor.queryMethodMap;
@@ -58,13 +59,14 @@ 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, ...(metaData.pageParam ?? {})})`
-      : `(metaData) => ${typedFetcher}(${documentVariableName}, {...variables, ...(metaData.pageParam ?? {})})()`;
+      ? `(metaData) => query({...variables, [pageParamKey]: metaData.pageParam })`
+      : `(metaData) => ${typedFetcher}(${documentVariableName}, {...variables, [pageParamKey]: metaData.pageParam })()`;
 
     return `export const useInfinite${operationName} = <
       TData = ${operationResultType},
       TError = ${this.visitor.config.errorType}
     >(
+      ${pageParamKey},
       ${variables},
       ${options}
     ) =>{

diff --git a/packages/plugins/typescript/react-query/src/fetcher-fetch-hardcoded.ts b/packages/plugins/typescript/react-query/src/fetcher-fetch-hardcoded.ts
@@ -77,13 +77,13 @@ ${this.getFetchParams()}
       TData = ${operationResultType},
       TError = ${this.visitor.config.errorType}
     >(
-      _pageParamKey: keyof ${operationVariablesTypes},
+      pageParamKey: keyof ${operationVariablesTypes},
       ${variables},
       ${options}
     ) =>
     ${hookConfig.infiniteQuery.hook}<${operationResultType}, TError, TData>(
       ${generateInfiniteQueryKey(node, hasRequiredVariables)},
-      (metaData) => fetcher<${operationResultType}, ${operationVariablesTypes}>(${documentVariableName}, {...variables, ...(metaData.pageParam ?? {})})(),
+      (metaData) => fetcher<${operationResultType}, ${operationVariablesTypes}>(${documentVariableName}, {...variables, [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
@@ -55,13 +55,13 @@ function fetcher<TData, TVariables>(endpoint: string, requestInit: RequestInit,
       TError = ${this.visitor.config.errorType}
     >(
       dataSource: { endpoint: string, fetchParams?: RequestInit },
-      _pageParamKey: keyof ${operationVariablesTypes},
+      pageParamKey: keyof ${operationVariablesTypes},
       ${variables},
       ${options}
     ) =>
     ${hookConfig.infiniteQuery.hook}<${operationResultType}, TError, TData>(
       ${generateInfiniteQueryKey(node, hasRequiredVariables)},
-      (metaData) => fetcher<${operationResultType}, ${operationVariablesTypes}>(dataSource.endpoint, dataSource.fetchParams || {}, ${documentVariableName}, {...variables, ...(metaData.pageParam ?? {})})(),
+      (metaData) => fetcher<${operationResultType}, ${operationVariablesTypes}>(dataSource.endpoint, dataSource.fetchParams || {}, ${documentVariableName}, {...variables, [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
@@ -42,15 +42,15 @@ function fetcher<TData, TVariables>(client: GraphQLClient, query: string, variab
       TData = ${operationResultType},
       TError = ${this.visitor.config.errorType}
     >(
-      _pageParamKey: keyof ${operationVariablesTypes},
+      pageParamKey: keyof ${operationVariablesTypes},
       client: GraphQLClient,
       ${variables},
       ${options},
       headers?: RequestInit['headers']
     ) =>
     ${hookConfig.infiniteQuery.hook}<${operationResultType}, TError, TData>(
       ${generateInfiniteQueryKey(node, hasRequiredVariables)},
-      (metaData) => fetcher<${operationResultType}, ${operationVariablesTypes}>(client, ${documentVariableName}, {...variables, ...(metaData.pageParam ?? {})}, headers)(),
+      (metaData) => fetcher<${operationResultType}, ${operationVariablesTypes}>(client, ${documentVariableName}, {...variables, [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
@@ -33,13 +33,14 @@ export const useInfiniteTestQuery = <
       TData = TTestQuery,
       TError = unknown
     >(
+      pageParamKey: keyof TTestQueryVariables,
       variables?: TTestQueryVariables,
       options?: UseInfiniteQueryOptions<TTestQuery, TError, TData>
     ) =>{
     const query = useCustomFetcher<TTestQuery, TTestQueryVariables>(TestDocument)
     return useInfiniteQuery<TTestQuery, TError, TData>(
       variables === undefined ? ['test.infinite'] : ['test.infinite', variables],
-      (metaData) => query({...variables, ...(metaData.pageParam ?? {})}),
+      (metaData) => query({...variables, [pageParamKey]: metaData.pageParam }),
       options
     )};
 
@@ -94,13 +95,14 @@ export const useInfiniteTestQuery = <
       TData = TTestQuery,
       TError = unknown
     >(
+      pageParamKey: keyof TTestQueryVariables,
       variables?: TTestQueryVariables,
       options?: UseInfiniteQueryOptions<TTestQuery, TError, TData>
     ) =>{
     
     return useInfiniteQuery<TTestQuery, TError, TData>(
       variables === undefined ? ['test.infinite'] : ['test.infinite', variables],
-      (metaData) => myCustomFetcher<TTestQuery, TTestQueryVariables>(TestDocument, {...variables, ...(metaData.pageParam ?? {})})(),
+      (metaData) => myCustomFetcher<TTestQuery, TTestQueryVariables>(TestDocument, {...variables, [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
@@ -87,13 +87,13 @@ export const useInfiniteTestQuery = <
       TError = unknown
     >(
       dataSource: { endpoint: string, fetchParams?: RequestInit },
-      _pageParamKey: keyof TestQueryVariables,
+      pageParamKey: keyof TestQueryVariables,
       variables?: TestQueryVariables,
       options?: UseInfiniteQueryOptions<TestQuery, TError, TData>
     ) =>
     useInfiniteQuery<TestQuery, TError, TData>(
       variables === undefined ? ['test.infinite'] : ['test.infinite', variables],
-      (metaData) => fetcher<TestQuery, TestQueryVariables>(dataSource.endpoint, dataSource.fetchParams || {}, TestDocument, {...variables, ...(metaData.pageParam ?? {})})(),
+      (metaData) => fetcher<TestQuery, TestQueryVariables>(dataSource.endpoint, dataSource.fetchParams || {}, TestDocument, {...variables, [pageParamKey]: metaData.pageParam })(),
       options
     );
 
@@ -263,12 +263,13 @@ export const useTestMutation = <
       TData = TTestQuery,
       TError = unknown
     >(
+      pageParamKey: keyof TTestQueryVariables,
       variables?: TTestQueryVariables,
       options?: UseInfiniteQueryOptions<TTestQuery, TError, TData>
     ) =>{
     return useInfiniteQuery<TTestQuery, TError, TData>(
       variables === undefined ? ['test.infinite'] : ['test.infinite', variables],
-      (metaData) => myCustomFetcher<TTestQuery, TTestQueryVariables>(TestDocument, {...variables, ...(metaData.pageParam ?? {})})(),
+      (metaData) => myCustomFetcher<TTestQuery, TTestQueryVariables>(TestDocument, {...variables, [pageParamKey]: metaData.pageParam })(),
       options
     )};`);
       expect(out.content).toBeSimilarStringTo(`export const useTestMutation = <
@@ -358,13 +359,14 @@ export const useTestMutation = <
       TData = TTestQuery,
       TError = unknown
     >(
+      pageParamKey: keyof TTestQueryVariables,
       variables?: TTestQueryVariables,
       options?: UseInfiniteQueryOptions<TTestQuery, TError, TData>
     ) =>{
       const query = useCustomFetcher<TTestQuery, TTestQueryVariables>(TestDocument)
       return useInfiniteQuery<TTestQuery, TError, TData>(
       variables === undefined ? ['test.infinite'] : ['test.infinite', variables],
-      (metaData) => query({...variables, ...(metaData.pageParam ?? {})}),
+      (metaData) => query({...variables, [pageParamKey]: metaData.pageParam }),
       options
     )};`);
       expect(out.content).toBeSimilarStringTo(`export const useTestMutation = <