fix: rebuild cursors on infinite query refetch

Author: krasnedev

src/tests/useInfiniteQuery.test.js

@@ -219,4 +219,136 @@ describe('useInfiniteQuery', () => {
       rendered.getByText('Page 1: 2'),
     ])
   })
+
+  it('should build fresh cursors on refetch', async () => {
+    const genItems = size => [...new Array(size)].fill(null).map((_, d) => d)
+    const items = genItems(15)
+    const limit = 3
+
+    const fetchItems = async (cursor = 0, ts) => {
+      await sleep(10)
+      return {
+        nextId: cursor + limit,
+        items: items.slice(cursor, cursor + limit),
+        ts,
+      }
+    }
+
+    function Page() {
+      const fetchCountRef = React.useRef(0)
+      const {
+        status,
+        data,
+        error,
+        isFetchingMore,
+        fetchMore,
+        canFetchMore,
+        refetch,
+      } = useInfiniteQuery(
+        'items',
+        (key, nextId = 0) => fetchItems(nextId, fetchCountRef.current++),
+        {
+          getFetchMore: (lastGroup, allGroups) => lastGroup.nextId,
+        }
+      )
+
+      return (
+        <div>
+          <h1>Pagination</h1>
+          {status === 'loading' ? (
+            'Loading...'
+          ) : status === 'error' ? (
+            <span>Error: {error.message}</span>
+          ) : (
+            <>
+              <div>Data:</div>
+              {data.map((page, i) => (
+                <div key={i}>
+                  <div>
+                    Page {i}: {page.ts}
+                  </div>
+                  <div key={i}>
+                    {page.items.map(item => (
+                      <p key={item}>Item: {item}</p>
+                    ))}
+                  </div>
+                </div>
+              ))}
+              <div>
+                <button
+                  onClick={() => fetchMore()}
+                  disabled={!canFetchMore || isFetchingMore}
+                >
+                  {isFetchingMore
+                    ? 'Loading more...'
+                    : canFetchMore
+                    ? 'Load More'
+                    : 'Nothing more to load'}
+                </button>
+                <button onClick={() => refetch()}>Refetch</button>
+                <button
+                  onClick={() => {
+                    // Imagine that this mutation happens somewhere else
+                    // makes an actual network request
+                    // and calls refetchQueries in an onSuccess
+                    items.splice(4, 1)
+                    queryCache.refetchQueries('items')
+                  }}
+                >
+                  Remove item
+                </button>
+              </div>
+              <div>{!isFetchingMore ? 'Background Updating...' : null}</div>
+            </>
+          )}
+        </div>
+      )
+    }
+
+    const rendered = render(<Page />)
+
+    rendered.getByText('Loading...')
+
+    await rendered.findByText('Item: 2')
+    await rendered.findByText('Page 0: 0')
+
+    fireEvent.click(rendered.getByText('Load More'))
+
+    await rendered.findByText('Loading more...')
+    await rendered.findByText('Item: 5')
+    await rendered.findByText('Page 0: 0')
+    await rendered.findByText('Page 1: 1')
+
+    fireEvent.click(rendered.getByText('Load More'))
+
+    await rendered.findByText('Loading more...')
+    await rendered.findByText('Item: 8')
+    await rendered.findByText('Page 0: 0')
+    await rendered.findByText('Page 1: 1')
+    await rendered.findByText('Page 2: 2')
+
+    fireEvent.click(rendered.getByText('Refetch'))
+
+    await rendered.findByText('Background Updating...')
+    await rendered.findByText('Item: 8')
+    await rendered.findByText('Page 0: 3')
+    await rendered.findByText('Page 1: 4')
+    await rendered.findByText('Page 2: 5')
+
+    // ensure that Item: 4 is rendered before removing it
+    expect(rendered.queryAllByText('Item: 4')).toHaveLength(1)
+
+    // remove Item: 4
+    fireEvent.click(rendered.getByText('Remove item'))
+
+    await rendered.findByText('Background Updating...')
+    // ensure that an additional item is rendered (it means that cursors were properly rebuilt)
+    await rendered.findByText('Item: 9')
+    await rendered.findByText('Page 0: 6')
+    await rendered.findByText('Page 1: 7')
+    await rendered.findByText('Page 2: 8')
+
+    // ensure that Item: 4 is no longer rendered
+    expect(rendered.queryAllByText('Item: 4')).toHaveLength(0)
+  })
 })

src/useInfiniteQuery.js

@@ -16,15 +16,36 @@ export function useInfiniteQuery(...args) {
   const originalQueryFn = queryFn
 
   queryFn = async () => {
-    const data = await Promise.all(
-      queryInfoRef.current.query.pageVariables.map(args =>
-        originalQueryFn(...args)
-      )
-    )
+    const data = []
+    const pageVariables = [...queryInfoRef.current.query.pageVariables]
+    const rebuiltPageVariables = []
+
+    do {
+      const args = pageVariables.shift()
+
+      if (!data.length) {
+        // the first page query doesn't need to be rebuilt
+        data.push(await originalQueryFn(...args))
+        rebuiltPageVariables.push(args)
+      } else {
+        const pageArgs = [
+          // remove the last argument (the previously saved cursor)
+          ...args.slice(0, -1),
+          // generate an up-to-date cursor based on the previous data set
+          getGetFetchMore()(data[data.length - 1], data),
+        ]
+
+        data.push(await originalQueryFn(...pageArgs))
+        rebuiltPageVariables.push(pageArgs)
+      }
+    } while (pageVariables.length)
+
     queryInfoRef.current.query.canFetchMore = getGetFetchMore()(
       data[data.length - 1],
       data
     )
+    queryInfoRef.current.query.pageVariables = rebuiltPageVariables
+
     return data
   }