diff --git a/src/react/hooks/__tests__/useBackgroundQuery.test.tsx b/src/react/hooks/__tests__/useBackgroundQuery.test.tsx index ac7477d51f7..54ad243d5ba 100644 --- a/src/react/hooks/__tests__/useBackgroundQuery.test.tsx +++ b/src/react/hooks/__tests__/useBackgroundQuery.test.tsx @@ -446,6 +446,122 @@ it("auto resubscribes when mounting useReadQuery after naturally disposed by use await expect(Profiler).not.toRerender({ timeout: 50 }); }); +it("disposes of the queryRef when unmounting before it is used by useReadQuery", async () => { + const { query, mocks } = setupSimpleCase(); + const client = new ApolloClient({ + link: new MockLink(mocks), + cache: new InMemoryCache(), + }); + + const Profiler = createDefaultProfiler(); + + function App() { + useTrackRenders(); + useBackgroundQuery(query); + + return null; + } + + const { unmount } = renderWithClient(, { client, wrapper: Profiler }); + + expect(client.getObservableQueries().size).toBe(1); + expect(client).toHaveSuspenseCacheEntryUsing(query); + + { + const { renderedComponents } = await Profiler.takeRender(); + + expect(renderedComponents).toStrictEqual([App]); + } + + unmount(); + await wait(0); + + expect(client.getObservableQueries().size).toBe(0); + expect(client).not.toHaveSuspenseCacheEntryUsing(query); +}); + +it("disposes of old queryRefs when changing variables before the queryRef is used by useReadQuery", async () => { + const { query, mocks } = setupVariablesCase(); + const client = new ApolloClient({ + link: new MockLink(mocks), + cache: new InMemoryCache(), + }); + + const Profiler = createDefaultProfiler(); + + function App({ id }: { id: string }) { + useTrackRenders(); + useBackgroundQuery(query, { variables: { id } }); + + return null; + } + + const { rerender } = renderWithClient(, { + client, + wrapper: Profiler, + }); + + expect(client.getObservableQueries().size).toBe(1); + expect(client).toHaveSuspenseCacheEntryUsing(query, { + variables: { id: "1" }, + }); + + { + const { renderedComponents } = await Profiler.takeRender(); + + expect(renderedComponents).toStrictEqual([App]); + } + + rerender(); + + await wait(0); + + expect(client.getObservableQueries().size).toBe(1); + expect(client).toHaveSuspenseCacheEntryUsing(query, { + variables: { id: "2" }, + }); + expect(client).not.toHaveSuspenseCacheEntryUsing(query, { + variables: { id: "1" }, + }); +}); + +it("does not prematurely dispose of the queryRef when using strict mode", async () => { + const { query, mocks } = setupSimpleCase(); + const client = new ApolloClient({ + link: new MockLink(mocks), + cache: new InMemoryCache(), + }); + + const Profiler = createDefaultProfiler(); + + function App() { + useTrackRenders(); + useBackgroundQuery(query); + + return null; + } + + renderWithClient(, { + client, + wrapper: ({ children }) => ( + + {children} + + ), + }); + + { + const { renderedComponents } = await Profiler.takeRender(); + + expect(renderedComponents).toStrictEqual([App]); + } + + await wait(10); + + expect(client.getObservableQueries().size).toBe(1); + expect(client).toHaveSuspenseCacheEntryUsing(query); +}); + it("allows the client to be overridden", async () => { const { query } = setupSimpleCase();