T
TanStack•15mo ago
unwilling-turquoise

pages undefined on SuspenseInfiniteQuery in v5

Hey all, I've started migrating from React Router to Tanstack router and fixed to refactor the fetching as well. Got one issue atm with the useSuspenseInfiniteQuery
Uncaught TypeError: pages is undefined
getNextPageParam infiniteQueryBehavior.ts:135
hasNextPage infiniteQueryBehavior.ts:164
createResult infiniteQueryObserver.ts:164
updateResult queryObserver.ts:595
setOptions queryObserver.ts:193
setOptions infiniteQueryObserver.ts:84
_a9 queryObserver.ts:86
InfiniteQueryObserver infiniteQueryObserver.ts:64
<anonymous> useBaseQuery.ts:68
React 3
useBaseQuery useBaseQuery.ts:66
useSuspenseInfiniteQuery useSuspenseInfiniteQuery.ts:35
ProjectsList ProjectsList.tsx:54 <-- my component
Uncaught TypeError: pages is undefined
getNextPageParam infiniteQueryBehavior.ts:135
hasNextPage infiniteQueryBehavior.ts:164
createResult infiniteQueryObserver.ts:164
updateResult queryObserver.ts:595
setOptions queryObserver.ts:193
setOptions infiniteQueryObserver.ts:84
_a9 queryObserver.ts:86
InfiniteQueryObserver infiniteQueryObserver.ts:64
<anonymous> useBaseQuery.ts:68
React 3
useBaseQuery useBaseQuery.ts:66
useSuspenseInfiniteQuery useSuspenseInfiniteQuery.ts:35
ProjectsList ProjectsList.tsx:54 <-- my component
And ProjectsList.tsx:54 is this:
const projectsQuery = useSuspenseInfiniteQuery(
projectQueryOptions(forge, namespace),
);
const projectsQuery = useSuspenseInfiniteQuery(
projectQueryOptions(forge, namespace),
);
and the query is fairly standard too where we just fetch an API endpoint. next and prev pages are from documentation and doesn't change anything if I hardcode it.
export const projectQueryOptions = (forge?: string, namespace?: string) =>
infiniteQueryOptions({
queryKey: ["projects", { forge, namespace }],
queryFn: async ({ pageParam, signal }) =>
await fetchProjects({ pageParam, signal, forge, namespace }),
initialPageParam: 1,
getNextPageParam: (lastPage, _allPages, lastPageParam) => {
if (lastPage.length === 0) {
return undefined;
}
return lastPageParam + 1;
},
getPreviousPageParam: (_firstPage, _allPages, firstPageParam) => {
if (firstPageParam <= 1) {
return undefined;
}
return firstPageParam - 1;
},
});
export const projectQueryOptions = (forge?: string, namespace?: string) =>
infiniteQueryOptions({
queryKey: ["projects", { forge, namespace }],
queryFn: async ({ pageParam, signal }) =>
await fetchProjects({ pageParam, signal, forge, namespace }),
initialPageParam: 1,
getNextPageParam: (lastPage, _allPages, lastPageParam) => {
if (lastPage.length === 0) {
return undefined;
}
return lastPageParam + 1;
},
getPreviousPageParam: (_firstPage, _allPages, firstPageParam) => {
if (firstPageParam <= 1) {
return undefined;
}
return firstPageParam - 1;
},
});
Have an ongoing PR here, simply ignore everything changed in src/app directories as that's pre-migration stuff https://github.com/packit/dashboard/pull/435/files
GitHub
feat: Initial routing refactor to TanStack Router by Venefilyn · Pu...
This is part of the huge redesign of the frontend website where we will separate routing from components in an easier way to allow us to find routes a lot easier within the codebase. As a bonus wit...
No description
No description
13 Replies
unwilling-turquoise
unwilling-turquoiseOP•15mo ago
Also regards to the devtools it has the wrong format AFAIK in the data explorer since it's supposed to be infinite. Refetch makes it correct. Also please at-me when replying initially so I can see the thread 😄
No description
No description
unwilling-turquoise
unwilling-turquoiseOP•15mo ago
I feel like it's a simple issue as a refetch fixes the issue. But I can't figure it out
unwilling-turquoise
unwilling-turquoiseOP•15mo ago
I get a TS error about this but I have defined queryClient in the Tanstack Router so not sure what is going on
No description
unwilling-turquoise
unwilling-turquoiseOP•15mo ago
GitHub
pages are undefined on useSuspenseInfiniteQuery in v5 · TanStac...
Hi all While migrating from React Router to TanStack Router in packit/dashboard#435 I also decided to refactor our usage of TanStack Query (and upgrade it from v4 to v5) Problem is that I can't...
unwilling-turquoise
unwilling-turquoiseOP•15mo ago
Freya Gustavsson
StackBlitz
Router Basic React Query File Based Example (forked) - StackBlitz
Run official live example code for Router Basic React Query File Based, created by Tanstack on StackBlitz
unwilling-turquoise
unwilling-turquoiseOP•15mo ago
unwilling-turquoise
unwilling-turquoiseOP•15mo ago
Just feels like a bug and I can't fix it with my own code, reported it here https://github.com/TanStack/query/issues/7693
GitHub
useSuspenseInfiniteQuery does not create correct data · Issue #76...
Describe the bug When going to a page that has useSuspenseInfiniteQuery it does not show the data as it should. Instead it feels like TanStack takes a normal query and hands it off as-is to the Inf...
extended-salmon
extended-salmon•15mo ago
["projects"] is an infinite query, but you prefetch it with prefetchQuery. That puts the wrong structure in the cache. You need to prefetch it with prefetchInfiniteQuery
unwilling-turquoise
unwilling-turquoiseOP•15mo ago
Hmm. I don't have that in my project. Leftover from the playground fork I can remove and try again to get the issue I have at my project Or does Router prefetch? Can't get it to work..
unwilling-turquoise
unwilling-turquoiseOP•15mo ago
Like with this here there isn't anything with prefetch https://github.com/packit/dashboard/pull/435
GitHub
feat: Initial routing refactor to TanStack Router by Venefilyn · Pu...
This is part of the huge redesign of the frontend website where we will separate routing from components in an easier way to allow us to find routes a lot easier within the codebase. As a bonus wit...
extended-salmon
extended-salmon•15mo ago
if you remove the prefetch it works fine
Like with this here there isn't anything with prefetch
look at the devtools to see what's in the cache. could be that you re-use the same key between a query and an infinite query
unwilling-turquoise
unwilling-turquoiseOP•15mo ago
Only ever one query being executed from the devtools as seen here
extended-salmon
extended-salmon•15mo ago
yes but what data is in it

Did you find this page helpful?