diff --git a/src/use-swr.ts b/src/use-swr.ts index 7269862cf..e8aa6f08e 100644 --- a/src/use-swr.ts +++ b/src/use-swr.ts @@ -520,6 +520,7 @@ export const useSWRHandler = ( // Always update fetcher and config refs even with the Suspense mode. fetcherRef.current = fetcher configRef.current = config + unmountedRef.current = false throw isUndefined(error) ? revalidate(WITH_DEDUPE) : error } diff --git a/test/use-swr-suspense.test.tsx b/test/use-swr-suspense.test.tsx index 4ddf1d39c..c1a327100 100644 --- a/test/use-swr-suspense.test.tsx +++ b/test/use-swr-suspense.test.tsx @@ -232,6 +232,61 @@ describe('useSWR - suspense', () => { expect(renderedResults).toEqual(['123,1', '123,2']) }) + it('should render correctly when key changes (from null to valid key)', async () => { + // https://github.com/vercel/swr/issues/1836 + const renderedResults = [] + const baseKey = createKey() + let setData: any = () => {} + const Result = ({ query }: { query: string }) => { + const { data } = useSWR( + query ? `${baseKey}-${query}` : null, + key => createResponse(key, { delay: 200 }), + { + suspense: true + } + ) + if (`${data}` !== renderedResults[renderedResults.length - 1]) { + if (data === undefined) { + renderedResults.push(`${baseKey}-nodata`) + } else { + renderedResults.push(`${data}`) + } + } + return
{data ? data : `${baseKey}-nodata`}
+ } + const App = () => { + const [query, setQuery] = useState('123') + if (setData !== setQuery) { + setData = setQuery + } + return ( + <> +
+
+ + + + + ) + } + + renderWithConfig() + + await screen.findByText(`${baseKey}-123`) + + act(() => setData('')) + await screen.findByText(`${baseKey}-nodata`) + + act(() => setData('456')) + await screen.findByText(`${baseKey}-456`) + + expect(renderedResults).toEqual([ + `${baseKey}-123`, + `${baseKey}-nodata`, + `${baseKey}-456` + ]) + }) + it('should render initial data if set', async () => { const fetcher = jest.fn(() => 'SWR')