query icon indicating copy to clipboard operation
query copied to clipboard

fix(useInfiniteQuery): prevent error when pages is undefined

Open sinasun opened this issue 1 year ago • 3 comments

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

sinasun avatar Oct 05 '24 20:10 sinasun

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

TkDodo avatar Oct 09 '24 13:10 TkDodo

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)

sinasun avatar Oct 14 '24 19:10 sinasun

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 :)

TkDodo avatar Oct 15 '24 11:10 TkDodo

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 avatar Oct 25 '24 09:10 ugurcanatas

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

  • useSomeQuery.useInfiniteQuery
  • useBaseQuery
// specifically starts from here
function p(t,n){return(0,r(d[0]).useBaseQuery)(t,r(d[1]).InfiniteQueryObserver,n)}
  • Then getOptimisticResults in which is most likely useBaseQuery.ts
C=_.getOptimisticResult(b);if(y.useSyncExternalStore(y.useCallback((function(t)...
  • Then getOptimisticResult
function(e){return e.behavior=(0,r(d[6]).infiniteQueryBehavior)(),r(d[5])(r(d[0])(s.prototype),"getOptimisticResult",this).call(this,e)}}
  • Then createResult in query observer
o=this.createResult(e,t)
  • Then hasNextPage is called
hasNextPage:(0,r(d[6]).hasNextPage)(t,c.data)

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

ugurcanatas avatar Oct 25 '24 10:10 ugurcanatas