fix: falsy query key clears resolvedData in usePaginatedQuery (TanStack#482)

* Add clearOnNoQuery to usePaginatedQuery

* Change: make clearOnNoQuery the default

Co-authored-by: Ben Farr <ben.farr@marmalade.co.uk>

Author: JaminFarr

src/tests/usePaginatedQuery.test.js

@@ -121,4 +121,64 @@ describe('usePaginatedQuery', () => {
     expect(rendered.getByTestId('status').textContent).toBe('success')
     expect(rendered.getByTestId('status').textContent).not.toBe('loading')
   })
+
+  it('should clear resolvedData data when query is falsy', async () => {
+    function Page() {
+      const [searchTerm, setSearchTerm] = React.useState('')
+      const [page, setPage] = React.useState(1)
+      const { resolvedData = 'undefined' } = usePaginatedQuery(
+        searchTerm && ['data', searchTerm, page],
+        async (queryName, searchTerm, page) => {
+          await sleep(1)
+          return `${searchTerm} ${page}`
+        }
+      )
+
+      return (
+        <div>
+          <h1 data-testid="title">Data {resolvedData}</h1>
+          <input
+            name="searchTerm"
+            placeholder="Enter a search term"
+            value={searchTerm}
+            onChange={e => setSearchTerm(e.currentTarget.value)}
+          />
+          <button
+            onClick={() => {
+              setSearchTerm('')
+              setPage(1)
+            }}
+          >
+            clear
+          </button>
+          <button onClick={() => setPage(page + 1)}>next</button>
+        </div>
+      )
+    }
+
+    const rendered = render(<Page />)
+
+    fireEvent.change(rendered.getByPlaceholderText('Enter a search term'), {
+      target: { value: 'first-search' },
+    })
+    rendered.getByText('Data undefined')
+    await waitForElement(() => rendered.getByText('Data first-search 1'))
+
+    fireEvent.click(rendered.getByText('next'))
+    rendered.getByText('Data first-search 1')
+    await waitForElement(() => rendered.getByText('Data first-search 2'))
+
+    fireEvent.click(rendered.getByText('clear'))
+    rendered.getByText('Data undefined')
+
+    fireEvent.change(rendered.getByPlaceholderText('Enter a search term'), {
+      target: { value: 'second-search' },
+    })
+    rendered.getByText('Data undefined')
+    await waitForElement(() => rendered.getByText('Data second-search 1'))
+
+    fireEvent.click(rendered.getByText('next'))
+    rendered.getByText('Data second-search 1')
+    await waitForElement(() => rendered.getByText('Data second-search 2'))
+  })
 })

src/usePaginatedQuery.js

@@ -10,6 +10,10 @@ export function usePaginatedQuery(...args) {
 
   const lastDataRef = React.useRef()
 
+  if (!queryKey) {
+    lastDataRef.current = undefined
+  }
+
   // If latestData is set, don't use initialData
   if (typeof lastDataRef.current !== 'undefined') {
     delete config.initialData