Skip to content

Commit

Permalink
fix(query): infinite query and placeholder type and new datatag error (…
Browse files Browse the repository at this point in the history 
…#1805)
  • Loading branch information
@anymaniax
anymaniax authored Jan 9, 2025
1 parent 813916e commit 42c3ec2
Show file tree
Hide file tree
Showing 5 changed files with 127 additions and 37 deletions.
69 changes: 59 additions & 10 deletions packages/query/src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -346,6 +346,21 @@ const isQueryV5 = (
return compareVersions(withoutRc, '5.0.0');
};

const isQueryV5WithDataTagError = (
packageJson: PackageJson | undefined,
queryClient: 'react-query' | 'vue-query' | 'svelte-query',
) => {
const version = getPackageByQueryClient(packageJson, queryClient);

if (!version) {
return false;
}

const withoutRc = version.split('-')[0];

return compareVersions(withoutRc, '5.62.0');
};

const getPackageByQueryClient = (
packageJson: PackageJson | undefined,
queryClient: 'react-query' | 'vue-query' | 'svelte-query',
Expand Down Expand Up @@ -437,6 +452,8 @@ const isSuspenseQuery = (type: QueryType) => {
};

const getQueryOptionsDefinition = ({
operationName,
mutator,
definitions,
type,
hasSvelteQueryV4,
Expand All @@ -446,6 +463,8 @@ const getQueryOptionsDefinition = ({
isReturnType,
initialData,
}: {
operationName: string;
mutator?: GeneratorMutator;
definitions: string;
type?: QueryType;
hasSvelteQueryV4: boolean;
Expand All @@ -459,11 +478,17 @@ const getQueryOptionsDefinition = ({
const partialOptions = !isReturnType && hasQueryV5;

if (type) {
const funcReturnType = `Awaited<ReturnType<${
mutator?.isHook
? `ReturnType<typeof use${pascal(operationName)}Hook>`
: `typeof ${operationName}`
}>>`;

const optionTypeInitialDataPostfix =
initialData && !isSuspenseQuery(type)
? ` & Pick<
${pascal(initialData)}InitialDataOptions<
TData,
${funcReturnType},
TError,
TData${
hasQueryV5 &&
Expand All @@ -477,12 +502,12 @@ const getQueryOptionsDefinition = ({
> , 'initialData'
>`
: '';
const optionType = `${prefix}${pascal(type)}Options<TData, TError, TData${
const optionType = `${prefix}${pascal(type)}Options<${funcReturnType}, TError, TData${
hasQueryV5 &&
(type === QueryType.INFINITE || type === QueryType.SUSPENSE_INFINITE) &&
queryParam &&
queryParams
? `, TData, QueryKey, ${queryParams?.schema.name}['${queryParam}']`
? `, ${funcReturnType}, QueryKey, ${queryParams?.schema.name}['${queryParam}']`
: ''
}>`;
return `${partialOptions ? 'Partial<' : ''}${optionType}${
Expand All @@ -494,6 +519,7 @@ const getQueryOptionsDefinition = ({
};

const generateQueryArguments = ({
operationName,
definitions,
mutator,
isRequestOptions,
Expand All @@ -505,6 +531,7 @@ const generateQueryArguments = ({
initialData,
httpClient,
}: {
operationName: string;
definitions: string;
mutator?: GeneratorMutator;
isRequestOptions: boolean;
Expand All @@ -517,6 +544,8 @@ const generateQueryArguments = ({
httpClient: OutputHttpClient;
}) => {
const definition = getQueryOptionsDefinition({
operationName,
mutator,
definitions,
type,
hasSvelteQueryV4,
Expand Down Expand Up @@ -549,6 +578,7 @@ const generateQueryReturnType = ({
hasVueQueryV4,
hasSvelteQueryV4,
hasQueryV5,
hasQueryV5WithDataTagError,
isInitialDataDefined,
}: {
outputClient: OutputClient | OutputClientFunc;
Expand All @@ -558,6 +588,7 @@ const generateQueryReturnType = ({
hasVueQueryV4: boolean;
hasSvelteQueryV4: boolean;
hasQueryV5: boolean;
hasQueryV5WithDataTagError: boolean;
isInitialDataDefined?: boolean;
}) => {
switch (outputClient) {
Expand All @@ -572,7 +603,7 @@ const generateQueryReturnType = ({

return `Create${pascal(
type,
)}Result<TData, TError> & { queryKey: ${hasQueryV5 ? 'DataTag<QueryKey, TData>' : 'QueryKey'} }`;
)}Result<TData, TError> & { queryKey: ${hasQueryV5 ? `DataTag<QueryKey, TData${hasQueryV5WithDataTagError ? ', TError' : ''}>` : 'QueryKey'} }`;
}
case OutputClient.VUE_QUERY: {
if (!hasVueQueryV4) {
Expand All @@ -582,16 +613,16 @@ const generateQueryReturnType = ({
}

if (type !== QueryType.INFINITE && type !== QueryType.SUSPENSE_INFINITE) {
return `UseQueryReturnType<TData, TError> & { queryKey: ${hasQueryV5 ? 'DataTag<QueryKey, TData>' : 'QueryKey'} }`;
return `UseQueryReturnType<TData, TError> & { queryKey: ${hasQueryV5 ? `DataTag<QueryKey, TData${hasQueryV5WithDataTagError ? ', TError' : ''}>` : 'QueryKey'} }`;
}

return `UseInfiniteQueryReturnType<TData, TError> & { queryKey: ${hasQueryV5 ? 'DataTag<QueryKey, TData>' : 'QueryKey'} }`;
return `UseInfiniteQueryReturnType<TData, TError> & { queryKey: ${hasQueryV5 ? `DataTag<QueryKey, TData${hasQueryV5WithDataTagError ? ', TError' : ''}>` : 'QueryKey'} }`;
}
case OutputClient.REACT_QUERY:
default: {
return ` ${
isInitialDataDefined && !isSuspenseQuery(type) ? 'Defined' : ''
}Use${pascal(type)}Result<TData, TError> & { queryKey: ${hasQueryV5 ? 'DataTag<QueryKey, TData>' : 'QueryKey'} }`;
}Use${pascal(type)}Result<TData, TError> & { queryKey: ${hasQueryV5 ? `DataTag<QueryKey, TData${hasQueryV5WithDataTagError ? ', TError' : ''}>` : 'QueryKey'} }`;
}
}
};
Expand Down Expand Up @@ -674,6 +705,7 @@ const generateQueryImplementation = ({
hasVueQueryV4,
hasSvelteQueryV4,
hasQueryV5,
hasQueryV5WithDataTagError,
doc,
usePrefetch,
}: {
Expand Down Expand Up @@ -703,6 +735,7 @@ const generateQueryImplementation = ({
hasVueQueryV4: boolean;
hasSvelteQueryV4: boolean;
hasQueryV5: boolean;
hasQueryV5WithDataTagError: boolean;
doc?: string;
usePrefetch?: boolean;
}) => {
Expand Down Expand Up @@ -763,6 +796,7 @@ const generateQueryImplementation = ({
hasVueQueryV4,
hasSvelteQueryV4,
hasQueryV5,
hasQueryV5WithDataTagError,
isInitialDataDefined: true,
});
const returnType = generateQueryReturnType({
Expand All @@ -773,6 +807,7 @@ const generateQueryImplementation = ({
hasVueQueryV4,
hasSvelteQueryV4,
hasQueryV5,
hasQueryV5WithDataTagError,
});

const errorType = getQueryErrorType(
Expand All @@ -787,8 +822,9 @@ const generateQueryImplementation = ({
: `typeof ${operationName}`;

const definedInitialDataQueryArguments = generateQueryArguments({
definitions: '',
operationName,
mutator,
definitions: '',
isRequestOptions,
type,
hasSvelteQueryV4,
Expand All @@ -799,6 +835,7 @@ const generateQueryImplementation = ({
httpClient,
});
const undefinedInitialDataQueryArguments = generateQueryArguments({
operationName,
definitions: '',
mutator,
isRequestOptions,
Expand All @@ -811,6 +848,7 @@ const generateQueryImplementation = ({
httpClient,
});
const queryArguments = generateQueryArguments({
operationName,
definitions: '',
mutator,
isRequestOptions,
Expand Down Expand Up @@ -843,6 +881,8 @@ const generateQueryImplementation = ({
});

const queryOptionFnReturnType = getQueryOptionsDefinition({
operationName,
mutator,
definitions: '',
type,
hasSvelteQueryV4,
Expand Down Expand Up @@ -945,7 +985,7 @@ ${hookOptions}
} as ${queryOptionFnReturnType} ${
isVue(outputClient)
? ''
: `& { queryKey: ${hasQueryV5 ? 'DataTag<QueryKey, TData>' : 'QueryKey'} }`
: `& { queryKey: ${hasQueryV5 ? `DataTag<QueryKey, TData${hasQueryV5WithDataTagError ? ', TError' : ''}>` : 'QueryKey'} }`
}
}`;

Expand Down Expand Up @@ -979,7 +1019,7 @@ export function ${queryHookName}<TData = ${TData}, TError = ${errorType}>(\n ${q
${queryResultVarName}.queryKey = ${
isVue(outputClient) ? `unref(${queryOptionsVarName})` : queryOptionsVarName
}.queryKey ${isVue(outputClient) ? `as ${hasQueryV5 ? 'DataTag<QueryKey, TData>' : 'QueryKey'}` : ''};
}.queryKey ${isVue(outputClient) ? `as ${hasQueryV5 ? `DataTag<QueryKey, TData${hasQueryV5WithDataTagError ? ', TError' : ''}>` : 'QueryKey'}` : ''};
return ${queryResultVarName};
}\n
Expand Down Expand Up @@ -1044,6 +1084,11 @@ const generateQueryHook = async (
outputClient as 'react-query' | 'vue-query' | 'svelte-query',
);

const hasQueryV5WithDataTagError = isQueryV5WithDataTagError(
context.output.packageJson,
outputClient as 'react-query' | 'vue-query' | 'svelte-query',
);

const httpClient = context.output.httpClient;
const doc = jsDoc({ summary, deprecated });

Expand Down Expand Up @@ -1208,6 +1253,7 @@ const generateQueryHook = async (
hasVueQueryV4,
hasSvelteQueryV4,
hasQueryV5,
hasQueryV5WithDataTagError,
doc,
usePrefetch: query.usePrefetch,
}),
Expand Down Expand Up @@ -1266,13 +1312,16 @@ const generateQueryHook = async (
: `typeof ${operationName}`;

const mutationOptionFnReturnType = getQueryOptionsDefinition({
operationName,
mutator,
definitions,
hasSvelteQueryV4,
hasQueryV5,
isReturnType: true,
});

const mutationArguments = generateQueryArguments({
operationName,
definitions,
mutator,
isRequestOptions,
Expand Down
3 changes: 2 additions & 1 deletion tests/configs/react-query.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,8 @@ export default defineConfig({
name: 'customInstance',
},
query: {
useQuery: true,
useSuspenseQuery: true,
useSuspenseInfiniteQuery: true,
useInfinite: true,
useInfiniteQueryParam: 'limit',
},
Expand Down
4 changes: 2 additions & 2 deletions tests/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,13 +25,13 @@
"devDependencies": {
"npm-run-all": "^4.1.5",
"orval": "link:../packages/orval/dist",
"typescript": "4.8.2"
"typescript": "5.3.3"
},
"dependencies": {
"@angular/common": "^17.1.1",
"@angular/core": "^17.1.1",
"@faker-js/faker": "^8.1.0",
"@tanstack/react-query": "^4.22.0",
"@tanstack/react-query": "^5.63.0",
"@tanstack/svelte-query": "^4.24.9",
"@tanstack/vue-query": "^4.22.0",
"@types/react": "18.3.2",
Expand Down
41 changes: 41 additions & 0 deletions tests/regressions/react-query.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
import { keepPreviousData } from '@tanstack/react-query';
import {
useListPets,
useListPetsInfinite,
} from '../generated/react-query/mutator/endpoints';

export const useInfiniteQueryTest = () => {
const { data } = useListPetsInfinite(
{
sort: 'name',
},
0,
{
query: {
getNextPageParam: (lastPage) => lastPage[0].id.toString(),
},
},
);

const pages = data?.pages.map((page) => page.map((pet) => pet.name)).flat();

return pages;
};

export const useHookWithPlaceHolderData = () => {
const { data } = useListPets(
{
sort: 'name',
},
0,
{
query: {
placeholderData: keepPreviousData,
},
},
);

const names = data?.map((pet) => pet.name);

return names;
};
Loading

0 comments on commit 42c3ec2

Please sign in to comment.