TanStack / query

🤖 Powerful asynchronous state management, server-state utilities and data fetching for the web. TS/JS, React Query, Solid Query, Svelte Query and Vue Query.
https://tanstack.com/query
MIT License
42.72k stars 2.93k forks source link

fix(useInfiniteQuery): prevent error when pages is undefined #8134

Open sinasun opened 1 month ago

sinasun commented 1 month ago

This address a very rare bug that happened few times to my users with useInfiniteQuery, where the pages was undefined in getNextPageParam function should not break anything image

TkDodo commented 1 month ago

how would that case happen please? can you please add a test case that fails on main but succeeds on your branch ?

sinasun commented 1 month ago

I have found when it happens, will push some code on the weekend. just some examples of when it can happen:

  1. when it's trying to fetch the query and it gets cancelled (happened to me when I refereshed the page during the fetching), it put data: {} with no pages/pageParams attribute for InfinteQuery data object
  2. using setQueries, you can set the InfinteQuery data object to {}, which doesn't force you to add pages/pageParams attributes

will put tests + fix typing for InfinteQuery (right now it assumes pages/pageParams always exist, probably we can assume pages can be undefined as well)

TkDodo commented 1 month ago

using setQueries, you can set the InfinteQuery data object to {}, which doesn't force you to add pages/pageParams attributes

this is a programming error; if you use infiniteQueryOptions to make setQueryData type-safe, it will error with property pages is missing (playground)

when it's trying to fetch the query and it gets cancelled (happened to me when I refereshed the page during the fetching), it put data: {} with no pages/pageParams attribute for InfinteQuery data object

query cancellation will re-set to the previous state, and that might be a pending state but it should never be an invalid state. So I also don’t see it happening with cancellation, but I’m gladly proven wrong here :)

ugurcanatas commented 1 month ago

hey there, i recently opened a similar Q&A discussion where we see the same exact error logs on infinite queries. Trying it out to reproduce but I am still not sure how.

But i can tell that we are not using infinite query data by using setQueryData`

ugurcanatas commented 1 month ago

By following the logs, I created a list where the trace logs points to in the minified bundle. Maybe its helpful to create some sort of steps to reproduce. @sinasun @TkDodo

That calls getNextPageParam is called

function p(n,t){var o=t.pages,u=t.pageParams,l=o.length-1;return o.length>0?n.getNextPageParam(o[l],o,u[l],u):void 0}

here is why i am lost because I am not sure how pages can be undefined or null based on checking the code in InfinitieQueryBehaviour file