Skip to content

fix(tanstack): infinite query typing issues #1480

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ymc9 merged 1 commit into from
Jun 2, 2024
Merged

fix(tanstack): infinite query typing issues #1480

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/plugins/tanstack-query/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,7 @@
"replace-in-file": "^7.0.1",
"svelte": "^4.2.1",
"swr": "^2.0.3",
"tmp": "^0.2.3",
"vue": "^3.3.4"
}
}
14 changes: 7 additions & 7 deletions packages/plugins/tanstack-query/src/generator.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,8 +136,8 @@ function generateQueryHook(
});

if (version === 'v5' && infinite && ['react', 'svelte'].includes(target)) {
// initialPageParam and getNextPageParam options are required in v5
func.addStatements([`options = options ?? { initialPageParam: undefined, getNextPageParam: () => null };`]);
// getNextPageParam option is required in v5
func.addStatements([`options = options ?? { getNextPageParam: () => null };`]);
}

func.addStatements([
Expand Down Expand Up @@ -668,20 +668,20 @@ function makeQueryOptions(
? `Omit<UseInfiniteQueryOptions<${returnType}, TError, ${dataType}>, 'queryKey'>`
: `Omit<Use${
suspense ? 'Suspense' : ''
}InfiniteQueryOptions<${returnType}, TError, InfiniteData<${dataType}>>, 'queryKey'>`
}InfiniteQueryOptions<${returnType}, TError, InfiniteData<${dataType}>>, 'queryKey' | 'initialPageParam'>`
: `Omit<Use${suspense ? 'Suspense' : ''}QueryOptions<${returnType}, TError, ${dataType}>, 'queryKey'>`
)
.with('vue', () => {
const baseOption = `Omit<Use${
infinite ? 'Infinite' : ''
}QueryOptions<${returnType}, TError, ${dataType}>, 'queryKey'>`;
const baseOption = infinite
? `Omit<UseInfiniteQueryOptions<${returnType}, TError, InfiniteData<${dataType}>>, 'queryKey' | 'initialPageParam'>`
: `Omit<UseQueryOptions<${returnType}, TError, ${dataType}>, 'queryKey'>`;
return `MaybeRefOrGetter<${baseOption}> | ComputedRef<${baseOption}>`;
})
.with('svelte', () =>
infinite
? version === 'v4'
? `Omit<CreateInfiniteQueryOptions<${returnType}, TError, ${dataType}>, 'queryKey'>`
: `StoreOrVal<Omit<CreateInfiniteQueryOptions<${returnType}, TError, InfiniteData<${dataType}>>, 'queryKey'>>`
: `StoreOrVal<Omit<CreateInfiniteQueryOptions<${returnType}, TError, InfiniteData<${dataType}>>, 'queryKey' | 'initialPageParam'>>`
Comment thread
ymc9 marked this conversation as resolved.
: version === 'v4'
? `Omit<CreateQueryOptions<${returnType}, TError, ${dataType}>, 'queryKey'>`
: `StoreOrVal<Omit<CreateQueryOptions<${returnType}, TError, ${dataType}>, 'queryKey'>>`
Expand Down
9 changes: 7 additions & 2 deletions packages/plugins/tanstack-query/src/runtime-v5/react.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,14 +120,15 @@ export function useInfiniteModelQuery<TQueryFnData, TData, TError>(
model: string,
url: string,
args: unknown,
options: Omit<UseInfiniteQueryOptions<TQueryFnData, TError, InfiniteData<TData>>, 'queryKey'>,
options: Omit<UseInfiniteQueryOptions<TQueryFnData, TError, InfiniteData<TData>>, 'queryKey' | 'initialPageParam'>,
fetch?: FetchFn
) {
return useInfiniteQuery({
queryKey: getQueryKey(model, url, args, { infinite: true, optimisticUpdate: false }),
queryFn: ({ pageParam }) => {
return fetcher<TQueryFnData, false>(makeUrl(url, pageParam ?? args), undefined, fetch, false);
},
initialPageParam: args,
Comment thread
ymc9 marked this conversation as resolved.
...options,
});
}
Expand All @@ -146,14 +147,18 @@ export function useSuspenseInfiniteModelQuery<TQueryFnData, TData, TError>(
model: string,
url: string,
args: unknown,
options: Omit<UseSuspenseInfiniteQueryOptions<TQueryFnData, TError, InfiniteData<TData>>, 'queryKey'>,
options: Omit<
UseSuspenseInfiniteQueryOptions<TQueryFnData, TError, InfiniteData<TData>>,
'queryKey' | 'initialPageParam'
>,
fetch?: FetchFn
) {
return useSuspenseInfiniteQuery({
queryKey: getQueryKey(model, url, args, { infinite: true, optimisticUpdate: false }),
queryFn: ({ pageParam }) => {
return fetcher<TQueryFnData, false>(makeUrl(url, pageParam ?? args), undefined, fetch, false);
},
initialPageParam: args,
Comment thread
ymc9 marked this conversation as resolved.
...options,
});
}
Expand Down
12 changes: 10 additions & 2 deletions packages/plugins/tanstack-query/src/runtime-v5/svelte.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,20 +107,27 @@ export function useInfiniteModelQuery<TQueryFnData, TData, TError>(
model: string,
url: string,
args: unknown,
options: StoreOrVal<Omit<CreateInfiniteQueryOptions<TQueryFnData, TError, InfiniteData<TData>>, 'queryKey'>>,
options: StoreOrVal<
Omit<CreateInfiniteQueryOptions<TQueryFnData, TError, InfiniteData<TData>>, 'queryKey' | 'initialPageParam'>
>,
fetch?: FetchFn
) {
const queryKey = getQueryKey(model, url, args, { infinite: true, optimisticUpdate: false });
const queryFn = ({ pageParam }: { pageParam: unknown }) =>
fetcher<TQueryFnData, false>(makeUrl(url, pageParam ?? args), undefined, fetch, false);

let mergedOpt: StoreOrVal<CreateInfiniteQueryOptions<TQueryFnData, TError, InfiniteData<TData>>>;
if (isStore<CreateInfiniteQueryOptions<TQueryFnData, TError, InfiniteData<TData>>>(options)) {
if (
isStore<
Omit<CreateInfiniteQueryOptions<TQueryFnData, TError, InfiniteData<TData>>, 'queryKey' | 'initialPageParam'>
>(options)
) {
Comment thread
ymc9 marked this conversation as resolved.
// options is store
mergedOpt = derived([options], ([$opt]) => {
return {
queryKey,
queryFn,
initialPageParam: args,
...$opt,
};
});
Expand All @@ -129,6 +136,7 @@ export function useInfiniteModelQuery<TQueryFnData, TData, TError>(
mergedOpt = {
queryKey,
queryFn,
initialPageParam: args,
...options,
};
}
Expand Down
12 changes: 9 additions & 3 deletions packages/plugins/tanstack-query/src/runtime/vue.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
/* eslint-disable @typescript-eslint/ban-types */
/* eslint-disable @typescript-eslint/no-explicit-any */
import type { InfiniteData } from '@tanstack/react-query-v5';
import {
useInfiniteQuery,
useMutation,
Expand Down Expand Up @@ -103,8 +104,12 @@ export function useInfiniteModelQuery<TQueryFnData, TData, TError>(
url: string,
args?: MaybeRefOrGetter<unknown> | ComputedRef<unknown>,
options?:
| MaybeRefOrGetter<Omit<UseInfiniteQueryOptions<TQueryFnData, TError, TData>, 'queryKey'>>
| ComputedRef<Omit<UseInfiniteQueryOptions<TQueryFnData, TError, TData>, 'queryKey'>>,
| MaybeRefOrGetter<
Omit<UseInfiniteQueryOptions<TQueryFnData, TError, InfiniteData<TData>>, 'queryKey' | 'initialPageParam'>
>
| ComputedRef<
Omit<UseInfiniteQueryOptions<TQueryFnData, TError, InfiniteData<TData>>, 'queryKey' | 'initialPageParam'>
>,
fetch?: FetchFn
) {
// CHECKME: vue-query's `useInfiniteQuery`'s input typing seems wrong
Expand All @@ -115,10 +120,11 @@ export function useInfiniteModelQuery<TQueryFnData, TData, TError>(
const reqUrl = makeUrl(url, pageParam ?? toValue(args));
return fetcher<TQueryFnData, false>(reqUrl, undefined, fetch, false);
},
initialPageParam: toValue(args),
...toValue(options),
}));

return useInfiniteQuery<TQueryFnData, TError, TData>(queryOptions);
return useInfiniteQuery<TQueryFnData, TError, InfiniteData<TData>>(queryOptions);
}

/**
Expand Down
60 changes: 60 additions & 0 deletions packages/plugins/tanstack-query/tests/plugin.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,19 @@ model Foo {
}
`;

const reactAppSource = {
name: 'main.ts',
content: `
import { useInfiniteFindManypost_Item } from './hooks';

const { data, fetchNextPage, hasNextPage } = useInfiniteFindManypost_Item();
useInfiniteFindManypost_Item({ where: { published: true } });
useInfiniteFindManypost_Item(undefined, { getNextPageParam: () => null });
console.log(data?.pages[0][0].published);
console.log(data?.pageParams[0]);
`,
};

it('react-query run plugin v4', async () => {
await loadSchema(
`
Expand All @@ -66,6 +79,7 @@ ${sharedModel}
extraDependencies: ['react@18.2.0', '@types/react@18.2.0', '@tanstack/react-query@4.29.7'],
copyDependencies: [path.resolve(__dirname, '../dist')],
compile: true,
extraSourceFiles: [reactAppSource],
}
);
});
Expand All @@ -87,10 +101,38 @@ ${sharedModel}
extraDependencies: ['react@18.2.0', '@types/react@18.2.0', '@tanstack/react-query@^5.0.0'],
copyDependencies: [path.resolve(__dirname, '../dist')],
compile: true,
extraSourceFiles: [
reactAppSource,
{
name: 'suspense.ts',
content: `
import { useSuspenseInfiniteFindManypost_Item } from './hooks';

const { data, fetchNextPage, hasNextPage } = useSuspenseInfiniteFindManypost_Item();
useSuspenseInfiniteFindManypost_Item({ where: { published: true } });
useSuspenseInfiniteFindManypost_Item(undefined, { getNextPageParam: () => null });
console.log(data?.pages[0][0].published);
console.log(data?.pageParams[0]);
`,
},
],
}
);
});

const vueAppSource = {
name: 'main.ts',
content: `
import { useInfiniteFindManypost_Item } from './hooks';

const { data, fetchNextPage, hasNextPage } = useInfiniteFindManypost_Item();
useInfiniteFindManypost_Item({ where: { published: true } });
useInfiniteFindManypost_Item(undefined, { getNextPageParam: () => null });
console.log(data.value?.pages[0][0].published);
console.log(data.value?.pageParams[0]);
`,
};

it('vue-query run plugin v4', async () => {
await loadSchema(
`
Expand All @@ -109,6 +151,7 @@ ${sharedModel}
extraDependencies: ['vue@^3.3.4', '@tanstack/vue-query@4.37.0'],
copyDependencies: [path.resolve(__dirname, '../dist')],
compile: true,
extraSourceFiles: [vueAppSource],
}
);
});
Expand All @@ -130,10 +173,25 @@ ${sharedModel}
extraDependencies: ['vue@^3.3.4', '@tanstack/vue-query@latest'],
copyDependencies: [path.resolve(__dirname, '../dist')],
compile: true,
extraSourceFiles: [vueAppSource],
}
);
});

const svelteAppSource = {
name: 'main.ts',
content: `
import { get } from 'svelte/store';
import { useInfiniteFindManypost_Item } from './hooks';

const { data, fetchNextPage, hasNextPage } = get(useInfiniteFindManypost_Item());
useInfiniteFindManypost_Item({ where: { published: true } });
useInfiniteFindManypost_Item(undefined, { getNextPageParam: () => null });
console.log(data?.pages[0][0].published);
console.log(data?.pageParams[0]);
`,
};

it('svelte-query run plugin v4', async () => {
await loadSchema(
`
Expand All @@ -152,6 +210,7 @@ ${sharedModel}
extraDependencies: ['svelte@^3.0.0', '@tanstack/svelte-query@4.29.7'],
copyDependencies: [path.resolve(__dirname, '../dist')],
compile: true,
extraSourceFiles: [svelteAppSource],
}
);
});
Expand All @@ -173,6 +232,7 @@ ${sharedModel}
extraDependencies: ['svelte@^3.0.0', '@tanstack/svelte-query@^5.0.0'],
copyDependencies: [path.resolve(__dirname, '../dist')],
compile: true,
extraSourceFiles: [svelteAppSource],
}
);
});
Expand Down
41 changes: 40 additions & 1 deletion packages/plugins/tanstack-query/tests/react-hooks-v5.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query-v5';
import { act, renderHook, waitFor } from '@testing-library/react';
import nock from 'nock';
import React from 'react';
import { RequestHandlerContext, useModelMutation, useModelQuery } from '../src/runtime-v5/react';
import { RequestHandlerContext, useInfiniteModelQuery, useModelMutation, useModelQuery } from '../src/runtime-v5/react';
import { getQueryKey } from '../src/runtime/common';
import { modelMeta } from './test-model-meta';

Expand Down Expand Up @@ -60,6 +60,45 @@ describe('Tanstack Query React Hooks V5 Test', () => {
});
});

it('infinite query', async () => {
const { queryClient, wrapper } = createWrapper();

const queryArgs = { where: { id: '1' } };
const data = [{ id: '1', name: 'foo' }];

nock(makeUrl('User', 'findMany', queryArgs))
.get(/.*/)
.reply(200, () => {
console.log('Query findMany:', queryArgs);
return {
data: data,
};
});

const { result } = renderHook(
() =>
useInfiniteModelQuery('User', makeUrl('User', 'findMany'), queryArgs, {
getNextPageParam: () => null,
}),
{
wrapper,
}
);
await waitFor(() => {
expect(result.current.isSuccess).toBe(true);
const resultData = result.current.data!;
Comment thread
ymc9 marked this conversation as resolved.
expect(resultData.pages).toHaveLength(1);
expect(resultData.pages[0]).toMatchObject(data);
expect(resultData?.pageParams).toHaveLength(1);
expect(resultData?.pageParams[0]).toMatchObject(queryArgs);
expect(result.current.hasNextPage).toBe(false);
const cacheData: any = queryClient.getQueryData(
Comment thread
ymc9 marked this conversation as resolved.
getQueryKey('User', 'findMany', queryArgs, { infinite: true, optimisticUpdate: false })
);
expect(cacheData.pages[0]).toMatchObject(data);
});
});

it('independent mutation and query', async () => {
const { wrapper } = createWrapper();

Expand Down
41 changes: 40 additions & 1 deletion packages/plugins/tanstack-query/tests/react-hooks.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import { act, renderHook, waitFor } from '@testing-library/react';
import nock from 'nock';
import React from 'react';
import { getQueryKey } from '../src/runtime/common';
import { RequestHandlerContext, useModelMutation, useModelQuery } from '../src/runtime/react';
import { RequestHandlerContext, useInfiniteModelQuery, useModelMutation, useModelQuery } from '../src/runtime/react';
import { modelMeta } from './test-model-meta';

describe('Tanstack Query React Hooks V4 Test', () => {
Expand Down Expand Up @@ -60,6 +60,45 @@ describe('Tanstack Query React Hooks V4 Test', () => {
});
});

it('infinite query', async () => {
const { queryClient, wrapper } = createWrapper();

const queryArgs = { where: { id: '1' } };
const data = [{ id: '1', name: 'foo' }];

nock(makeUrl('User', 'findMany', queryArgs))
.get(/.*/)
.reply(200, () => {
console.log('Query findMany:', queryArgs);
return {
data: data,
};
});

const { result } = renderHook(
() =>
useInfiniteModelQuery('User', makeUrl('User', 'findMany'), queryArgs, {
getNextPageParam: () => null,
}),
{
wrapper,
}
);
await waitFor(() => {
expect(result.current.isSuccess).toBe(true);
const resultData = result.current.data!;
expect(resultData.pages).toHaveLength(1);
expect(resultData.pages[0]).toMatchObject(data);
expect(resultData?.pageParams).toHaveLength(1);
expect(resultData?.pageParams[0]).toBeUndefined();
expect(result.current.hasNextPage).toBe(false);
const cacheData: any = queryClient.getQueryData(
getQueryKey('User', 'findMany', queryArgs, { infinite: true, optimisticUpdate: false })
);
expect(cacheData.pages[0]).toMatchObject(data);
});
});

it('independent mutation and query', async () => {
const { wrapper } = createWrapper();

Expand Down
Loading