diff --git a/.changeset/many-maps-hang.md b/.changeset/many-maps-hang.md new file mode 100644 index 0000000000..4568029301 --- /dev/null +++ b/.changeset/many-maps-hang.md @@ -0,0 +1,5 @@ +--- +'@graphql-codegen/typescript-react-query': patch +--- + +add empty object in place of variables for more consistent keys diff --git a/dev-test/githunt/types.react-query.ts b/dev-test/githunt/types.react-query.ts index 0934b0d4cc..53bd5b6f57 100644 --- a/dev-test/githunt/types.react-query.ts +++ b/dev-test/githunt/types.react-query.ts @@ -507,11 +507,11 @@ export const CurrentUserForProfileDocument = ` export const useCurrentUserForProfileQuery = ( dataSource: { endpoint: string; fetchParams?: RequestInit }, - variables?: CurrentUserForProfileQueryVariables, + variables: CurrentUserForProfileQueryVariables = {}, options?: UseQueryOptions, ) => { return useQuery( - variables === undefined ? ['CurrentUserForProfile'] : ['CurrentUserForProfile', variables], + ['CurrentUserForProfile', variables], fetcher( dataSource.endpoint, dataSource.fetchParams || {}, @@ -527,13 +527,11 @@ export const useInfiniteCurrentUserForProfileQuery = < TError = unknown, >( dataSource: { endpoint: string; fetchParams?: RequestInit }, - variables?: CurrentUserForProfileQueryVariables, + variables: CurrentUserForProfileQueryVariables = {}, options?: UseInfiniteQueryOptions, ) => { return useInfiniteQuery( - variables === undefined - ? ['CurrentUserForProfile.infinite'] - : ['CurrentUserForProfile.infinite', variables], + ['CurrentUserForProfile.infinite', variables], metaData => fetcher( dataSource.endpoint, diff --git a/packages/plugins/typescript/react-query/src/fetcher.ts b/packages/plugins/typescript/react-query/src/fetcher.ts index 9d7991ad7c..74b7348653 100644 --- a/packages/plugins/typescript/react-query/src/fetcher.ts +++ b/packages/plugins/typescript/react-query/src/fetcher.ts @@ -186,7 +186,7 @@ export abstract class FetcherRenderer { hasRequiredVariables, operationVariablesTypes, }: GenerateConfig): string { - return `variables${hasRequiredVariables ? '' : '?'}: ${operationVariablesTypes}`; + return `variables: ${operationVariablesTypes}${hasRequiredVariables ? '' : ' = {}'}`; } private generateQueryOptionsSignature( @@ -203,9 +203,7 @@ export abstract class FetcherRenderer { private generateInfiniteQueryVariablesSignature(config: GenerateConfig): string { if (this.visitor.config.reactQueryVersion <= 4) { - return `variables${config.hasRequiredVariables ? '' : '?'}: ${ - config.operationVariablesTypes - }`; + return `variables: ${config.operationVariablesTypes}${config.hasRequiredVariables ? '' : ' = {}'}`; } return `variables: ${config.operationVariablesTypes}`; } @@ -224,9 +222,7 @@ export abstract class FetcherRenderer { public generateInfiniteQueryKey(config: GenerateConfig, isSuspense: boolean): string { const identifier = isSuspense ? 'infiniteSuspense' : 'infinite'; - if (config.hasRequiredVariables) - return `['${config.node.name.value}.${identifier}', variables]`; - return `variables === undefined ? ['${config.node.name.value}.${identifier}'] : ['${config.node.name.value}.${identifier}', variables]`; + return `['${config.node.name.value}.${identifier}', variables]`; } public generateInfiniteQueryOutput(config: GenerateConfig, isSuspense = false) { @@ -244,8 +240,7 @@ export abstract class FetcherRenderer { public generateQueryKey(config: GenerateConfig, isSuspense: boolean): string { const identifier = isSuspense ? `${config.node.name.value}Suspense` : config.node.name.value; - if (config.hasRequiredVariables) return `['${identifier}', variables]`; - return `variables === undefined ? ['${identifier}'] : ['${identifier}', variables]`; + return `['${identifier}', variables]`; } public generateQueryOutput(config: GenerateConfig, isSuspense = false) { 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 index 9c7f5655e4..2751769ae6 100644 --- 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 @@ -24,17 +24,17 @@ export const useTestQuery = < TError = unknown >( dataSource: { endpoint: string, fetchParams?: RequestInit }, - variables?: TestQueryVariables, + variables: TestQueryVariables = {}, options?: UseQueryOptions ) => { return useQuery( - variables === undefined ? ['test'] : ['test', variables], + ['test', variables], fetcher(dataSource.endpoint, dataSource.fetchParams || {}, TestDocument, variables), options )}; -useTestQuery.getKey = (variables?: TestQueryVariables) => variables === undefined ? ['test'] : ['test', variables]; +useTestQuery.getKey = (variables: TestQueryVariables = {}) => ['test', variables]; export const TestDocument = \` mutation test($name: String) { @@ -84,34 +84,34 @@ export const useTestQuery = < TError = unknown >( dataSource: { endpoint: string, fetchParams?: RequestInit }, - variables?: TestQueryVariables, + variables: TestQueryVariables = {}, options?: UseQueryOptions ) => { return useQuery( - variables === undefined ? ['test'] : ['test', variables], + ['test', variables], fetcher(dataSource.endpoint, dataSource.fetchParams || {}, TestDocument, variables), options )}; -useTestQuery.getKey = (variables?: TestQueryVariables) => variables === undefined ? ['test'] : ['test', variables]; +useTestQuery.getKey = (variables: TestQueryVariables = {}) => ['test', variables]; export const useInfiniteTestQuery = < TData = TestQuery, TError = unknown >( dataSource: { endpoint: string, fetchParams?: RequestInit }, - variables?: TestQueryVariables, + variables: TestQueryVariables = {}, options?: UseInfiniteQueryOptions ) => { return useInfiniteQuery( - variables === undefined ? ['test.infinite'] : ['test.infinite', variables], + ['test.infinite', variables], (metaData) => fetcher(dataSource.endpoint, dataSource.fetchParams || {}, TestDocument, {...variables, ...(metaData.pageParam ?? {})})(), options )}; -useInfiniteTestQuery.getKey = (variables?: TestQueryVariables) => variables === undefined ? ['test.infinite'] : ['test.infinite', variables]; +useInfiniteTestQuery.getKey = (variables: TestQueryVariables = {}) => ['test.infinite', variables]; export const TestDocument = \` mutation test($name: String) { @@ -161,12 +161,12 @@ export const useTestQuery = < TError = unknown >( dataSource: { endpoint: string, fetchParams?: RequestInit }, - variables?: TestQueryVariables, + variables: TestQueryVariables = {}, options?: UseQueryOptions ) => { return useQuery( - variables === undefined ? ['test'] : ['test', variables], + ['test', variables], fetcher(dataSource.endpoint, dataSource.fetchParams || {}, TestDocument, variables), options )}; @@ -221,12 +221,12 @@ export const useTestQuery = < TError = unknown >( dataSource: { endpoint: string, fetchParams?: RequestInit }, - variables?: TestQueryVariables, + variables: TestQueryVariables = {}, options?: UseQueryOptions ) => { return useQuery( - variables === undefined ? ['test'] : ['test', variables], + ['test', variables], fetcher(dataSource.endpoint, dataSource.fetchParams || {}, TestDocument, variables), options )}; @@ -238,12 +238,12 @@ export const useInfiniteTestQuery = < TError = unknown >( dataSource: { endpoint: string, fetchParams?: RequestInit }, - variables?: TestQueryVariables, + variables: TestQueryVariables = {}, options?: UseInfiniteQueryOptions ) => { return useInfiniteQuery( - variables === undefined ? ['test.infinite'] : ['test.infinite', variables], + ['test.infinite', variables], (metaData) => fetcher(dataSource.endpoint, dataSource.fetchParams || {}, TestDocument, {...variables, ...(metaData.pageParam ?? {})})(), options )}; @@ -297,12 +297,12 @@ export const useTestQuery = < TData = TTestQuery, TError = unknown >( - variables?: TTestQueryVariables, + variables: TTestQueryVariables = {}, options?: UseQueryOptions ) => { return useQuery( - variables === undefined ? ['test'] : ['test', variables], + ['test', variables], useCustomFetcher(TestDocument).bind(null, variables), options )}; @@ -311,12 +311,12 @@ export const useInfiniteTestQuery = < TData = TTestQuery, TError = unknown >( - variables?: TTestQueryVariables, + variables: TTestQueryVariables = {}, options?: UseInfiniteQueryOptions ) => { const query = useCustomFetcher(TestDocument) return useInfiniteQuery( - variables === undefined ? ['test.infinite'] : ['test.infinite', variables], + ['test.infinite', variables], (metaData) => query({...variables, ...(metaData.pageParam ?? {})}), options )}; @@ -372,12 +372,12 @@ export const useTestQuery = < TData = TTestQuery, TError = unknown >( - variables?: TTestQueryVariables, + variables: TTestQueryVariables = {}, options?: UseQueryOptions ) => { return useQuery( - variables === undefined ? ['test'] : ['test', variables], + ['test', variables], myCustomFetcher(TestDocument, variables), options )}; @@ -386,12 +386,12 @@ export const useInfiniteTestQuery = < TData = TTestQuery, TError = unknown >( - variables?: TTestQueryVariables, + variables: TTestQueryVariables = {}, options?: UseInfiniteQueryOptions ) => { return useInfiniteQuery( - variables === undefined ? ['test.infinite'] : ['test.infinite', variables], + ['test.infinite', variables], (metaData) => myCustomFetcher(TestDocument, {...variables, ...(metaData.pageParam ?? {})})(), options )}; @@ -447,12 +447,12 @@ export const useTestQuery = < TData = TTestQuery, TError = unknown >( - variables?: TTestQueryVariables, + variables: TTestQueryVariables = {}, options?: UseQueryOptions ) => { return useQuery( - variables === undefined ? ['test'] : ['test', variables], + ['test', variables], myCustomFetcher(TestDocument, variables), options )}; @@ -509,12 +509,12 @@ export const useTestQuery = < TError = unknown >( dataSource: { endpoint: string, fetchParams?: RequestInit }, - variables?: TTestQueryVariables, + variables: TTestQueryVariables = {}, options?: UseQueryOptions ) => { return useQuery( - variables === undefined ? ['test'] : ['test', variables], + ['test', variables], fetcher(dataSource.endpoint, dataSource.fetchParams || {}, TestDocument, variables), options )}; @@ -593,13 +593,13 @@ export const useTestQuery = < TError = unknown >( client: GraphQLClient, - variables?: TTestQueryVariables, + variables: TTestQueryVariables = {}, options?: UseQueryOptions, headers?: RequestInit['headers'] ) => { return useQuery( - variables === undefined ? ['test'] : ['test', variables], + ['test', variables], fetcher(client, TestDocument, variables, headers), options )}; @@ -609,13 +609,13 @@ export const useInfiniteTestQuery = < TError = unknown >( client: GraphQLClient, - variables?: TTestQueryVariables, + variables: TTestQueryVariables = {}, options?: UseInfiniteQueryOptions, headers?: RequestInit['headers'] ) => { return useInfiniteQuery( - variables === undefined ? ['test.infinite'] : ['test.infinite', variables], + ['test.infinite', variables], (metaData) => fetcher(client, TestDocument, {...variables, ...(metaData.pageParam ?? {})}, headers)(), options )}; @@ -684,13 +684,13 @@ export const useTestQuery = < TData = TTestQuery, TError = unknown >( - variables?: TTestQueryVariables, + variables: TTestQueryVariables = {}, options?: UseQueryOptions, headers?: RequestInit['headers'] ) => { return useQuery( - variables === undefined ? ['test'] : ['test', variables], + ['test', variables], fetcher(TestDocument, variables, headers), options )}; @@ -759,12 +759,12 @@ export const useTestQuery = < TData = TTestQuery, TError = unknown >( - variables?: TTestQueryVariables, + variables: TTestQueryVariables = {}, options?: UseQueryOptions ) => { return useQuery( - variables === undefined ? ['test'] : ['test', variables], + ['test', variables], fetcher(TestDocument, variables), options )}; @@ -839,12 +839,12 @@ export const useTestQuery = < TData = TTestQuery, TError = unknown >( - variables?: TTestQueryVariables, + variables: TTestQueryVariables = {}, options?: UseQueryOptions ) => { return useQuery( - variables === undefined ? ['test'] : ['test', variables], + ['test', variables], fetcher(TestDocument, variables), options )}; @@ -919,12 +919,12 @@ export const useTestQuery = < TData = TTestQuery, TError = unknown >( - variables?: TTestQueryVariables, + variables: TTestQueryVariables = {}, options?: UseQueryOptions ) => { return useQuery( - variables === undefined ? ['test'] : ['test', variables], + ['test', variables], fetcher(TestDocument, variables), options )}; @@ -998,12 +998,12 @@ export const useTestQuery = < TData = TTestQuery, TError = unknown >( - variables?: TTestQueryVariables, + variables: TTestQueryVariables = {}, options?: UseQueryOptions ) => { return useQuery( - variables === undefined ? ['test'] : ['test', variables], + ['test', variables], fetcher(TestDocument, variables), options )}; @@ -1077,12 +1077,12 @@ export const useTestQuery = < TData = TTestQuery, TError = unknown >( - variables?: TTestQueryVariables, + variables: TTestQueryVariables = {}, options?: UseQueryOptions ) => { return useQuery( - variables === undefined ? ['test'] : ['test', variables], + ['test', variables], fetcher(TestDocument, variables), options )}; @@ -1091,12 +1091,12 @@ export const useInfiniteTestQuery = < TData = TTestQuery, TError = unknown >( - variables?: TTestQueryVariables, + variables: TTestQueryVariables = {}, options?: UseInfiniteQueryOptions ) => { return useInfiniteQuery( - variables === undefined ? ['test.infinite'] : ['test.infinite', variables], + ['test.infinite', variables], (metaData) => fetcher(TestDocument, {...variables, ...(metaData.pageParam ?? {})})(), options )}; @@ -1197,12 +1197,12 @@ export const useTestQuery = < TError = unknown >( dataSource: { endpoint: string, fetchParams?: RequestInit }, - variables?: Types.TestQueryVariables, + variables: Types.TestQueryVariables = {}, options?: UseQueryOptions ) => { return useQuery( - variables === undefined ? ['test'] : ['test', variables], + ['test', variables], fetcher(dataSource.endpoint, dataSource.fetchParams || {}, TestDocument, variables), options )}; @@ -1255,13 +1255,13 @@ export const useTestQuery = < TError = unknown >( dataSource: { endpoint: string, fetchParams?: RequestInit }, - variables?: Types.TestQueryVariables, + variables: Types.TestQueryVariables = {}, options?: Omit, 'queryKey'> & { queryKey?: UseQueryOptions['queryKey'] } ) => { return useQuery( { - queryKey: variables === undefined ? ['test'] : ['test', variables], + queryKey: ['test', variables], queryFn: fetcher(dataSource.endpoint, dataSource.fetchParams || {}, TestDocument, variables), ...options } @@ -1317,12 +1317,12 @@ export const useTestQuery = < TError = unknown >( dataSource: { endpoint: string, fetchParams?: RequestInit }, - variables?: TestQueryVariables, + variables: TestQueryVariables = {}, options?: UseQueryOptions ) => { return useQuery( - variables === undefined ? ['test'] : ['test', variables], + ['test', variables], fetcher(dataSource.endpoint, dataSource.fetchParams || {}, TestDocument, variables), options )}; @@ -1332,12 +1332,12 @@ export const useInfiniteTestQuery = < TError = unknown >( dataSource: { endpoint: string, fetchParams?: RequestInit }, - variables?: TestQueryVariables, + variables: TestQueryVariables = {}, options?: UseInfiniteQueryOptions ) => { return useInfiniteQuery( - variables === undefined ? ['test.infinite'] : ['test.infinite', variables], + ['test.infinite', variables], (metaData) => fetcher(dataSource.endpoint, dataSource.fetchParams || {}, TestDocument, {...variables, ...(metaData.pageParam ?? {})})(), options )}; @@ -1416,13 +1416,13 @@ export const useTestQuery = < TError = unknown >( dataSource: { endpoint: string, fetchParams?: RequestInit }, - variables?: TestQueryVariables, + variables: TestQueryVariables = {}, options?: Omit, 'queryKey'> & { queryKey?: UseQueryOptions['queryKey'] } ) => { return useQuery( { - queryKey: variables === undefined ? ['test'] : ['test', variables], + queryKey: ['test', variables], queryFn: fetcher(dataSource.endpoint, dataSource.fetchParams || {}, TestDocument, variables), ...options } @@ -1433,13 +1433,13 @@ export const useSuspenseTestQuery = < TError = unknown >( dataSource: { endpoint: string, fetchParams?: RequestInit }, - variables?: TestQueryVariables, + variables: TestQueryVariables = {}, options?: Omit, 'queryKey'> & { queryKey?: UseSuspenseQueryOptions['queryKey'] } ) => { return useSuspenseQuery( { - queryKey: variables === undefined ? ['testSuspense'] : ['testSuspense', variables], + queryKey: ['testSuspense', variables], queryFn: fetcher(dataSource.endpoint, dataSource.fetchParams || {}, TestDocument, variables), ...options } @@ -1458,7 +1458,7 @@ export const useInfiniteTestQuery = < (() => { const { queryKey: optionsQueryKey, ...restOptions } = options; return { - queryKey: optionsQueryKey ?? variables === undefined ? ['test.infinite'] : ['test.infinite', variables], + queryKey: optionsQueryKey ?? ['test.infinite', variables], queryFn: (metaData) => fetcher(dataSource.endpoint, dataSource.fetchParams || {}, TestDocument, {...variables, ...(metaData.pageParam ?? {})})(), ...restOptions } @@ -1478,7 +1478,7 @@ export const useSuspenseInfiniteTestQuery = < (() => { const { queryKey: optionsQueryKey, ...restOptions } = options; return { - queryKey: optionsQueryKey ?? variables === undefined ? ['test.infiniteSuspense'] : ['test.infiniteSuspense', variables], + queryKey: optionsQueryKey ?? ['test.infiniteSuspense', variables], queryFn: (metaData) => fetcher(dataSource.endpoint, dataSource.fetchParams || {}, TestDocument, {...variables, ...(metaData.pageParam ?? {})})(), ...restOptions } diff --git a/packages/plugins/typescript/react-query/tests/react-query.spec.ts b/packages/plugins/typescript/react-query/tests/react-query.spec.ts index 1346c24acd..7a60e96ea9 100644 --- a/packages/plugins/typescript/react-query/tests/react-query.spec.ts +++ b/packages/plugins/typescript/react-query/tests/react-query.spec.ts @@ -458,7 +458,7 @@ describe('React-Query', () => { const out = (await plugin(schema, docs, config)) as Types.ComplexPluginOutput; expect(out.content).toBeSimilarStringTo( - `useTestQuery.fetcher = (client: GraphQLClient, variables?: TestQueryVariables, headers?: RequestInit['headers']) => fetcher(client, TestDocument, variables, headers);`, + `useTestQuery.fetcher = (client: GraphQLClient, variables: TestQueryVariables = {}, headers?: RequestInit['headers']) => fetcher(client, TestDocument, variables, headers);`, ); }); it(`tests for dedupeOperationSuffix`, async () => { @@ -596,7 +596,7 @@ describe('React-Query', () => { const out = (await plugin(schema, docs, config)) as Types.ComplexPluginOutput; expect(out.content).toBeSimilarStringTo( - `useTestQuery.fetcher = (variables?: TestQueryVariables, headers?: RequestInit['headers']) => fetcher(TestDocument, variables, headers);`, + `useTestQuery.fetcher = (variables: TestQueryVariables = {}, headers?: RequestInit['headers']) => fetcher(TestDocument, variables, headers);`, ); }); }); @@ -699,7 +699,7 @@ describe('React-Query', () => { const out = (await plugin(schema, docs, config)) as Types.ComplexPluginOutput; expect(out.content).toBeSimilarStringTo( - `useTestQuery.fetcher = (variables?: TestQueryVariables) => fetcher(TestDocument, variables);`, + `useTestQuery.fetcher = (variables: TestQueryVariables = {}) => fetcher(TestDocument, variables);`, ); }); @@ -834,7 +834,7 @@ describe('React-Query', () => { const out = (await plugin(schema, docs, config)) as Types.ComplexPluginOutput; expect(out.content).toBeSimilarStringTo( - `useTestQuery.fetcher = (dataSource: { endpoint: string, fetchParams?: RequestInit }, variables?: TestQueryVariables) => fetcher(dataSource.endpoint, dataSource.fetchParams || {}, TestDocument, variables);`, + `useTestQuery.fetcher = (dataSource: { endpoint: string, fetchParams?: RequestInit }, variables: TestQueryVariables = {}) => fetcher(dataSource.endpoint, dataSource.fetchParams || {}, TestDocument, variables);`, ); }); @@ -965,7 +965,7 @@ describe('React-Query', () => { const out = (await plugin(schema, docs, config)) as Types.ComplexPluginOutput; expect(out.content).toMatchSnapshot(); expect(out.content).toBeSimilarStringTo( - `useTestQuery.getKey = (variables?: TestQueryVariables) => variables === undefined ? ['test'] : ['test', variables];`, + `useTestQuery.getKey = (variables: TestQueryVariables = {}) => ['test', variables];`, ); }); }); @@ -980,10 +980,10 @@ describe('React-Query', () => { const out = (await plugin(schema, docs, config)) as Types.ComplexPluginOutput; expect(out.content).toMatchSnapshot(); expect(out.content).toBeSimilarStringTo( - `useTestQuery.getKey = (variables?: TestQueryVariables) => variables === undefined ? ['test'] : ['test', variables];`, + `useTestQuery.getKey = (variables: TestQueryVariables = {}) => ['test', variables];`, ); expect(out.content).toBeSimilarStringTo( - `useInfiniteTestQuery.getKey = (variables?: TestQueryVariables) => variables === undefined ? ['test.infinite'] : ['test.infinite', variables];`, + `useInfiniteTestQuery.getKey = (variables: TestQueryVariables = {}) => ['test.infinite', variables];`, ); }); });