From accc6c0c8b89b67a2b2f32fdec99baf9ad0e9b50 Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Thu, 19 Dec 2024 13:25:42 -0700 Subject: [PATCH] Add support for autoDisposeTimeoutMs in useSuspenseFragment --- .../__tests__/useSuspenseFragment.test.tsx | 221 +++++++++++++++++- src/react/internal/cache/FragmentReference.ts | 18 ++ src/react/internal/cache/SuspenseCache.ts | 1 + 3 files changed, 237 insertions(+), 3 deletions(-) diff --git a/src/react/hooks/__tests__/useSuspenseFragment.test.tsx b/src/react/hooks/__tests__/useSuspenseFragment.test.tsx index 7f9a54545b..f4bef59262 100644 --- a/src/react/hooks/__tests__/useSuspenseFragment.test.tsx +++ b/src/react/hooks/__tests__/useSuspenseFragment.test.tsx @@ -20,11 +20,12 @@ import { renderHookToSnapshotStream, useTrackRenders, } from "@testing-library/react-render-stream"; -import { spyOnConsole } from "../../../testing/internal"; -import { renderHook } from "@testing-library/react"; +import { renderAsync, spyOnConsole } from "../../../testing/internal"; +import { act, renderHook, screen, waitFor } from "@testing-library/react"; import { InvariantError } from "ts-invariant"; -import { MockedProvider, wait } from "../../../testing"; +import { MockedProvider, MockSubscriptionLink, wait } from "../../../testing"; import { expectTypeOf } from "expect-type"; +import userEvent from "@testing-library/user-event"; function createDefaultRenderStream() { return createRenderStream({ @@ -1566,6 +1567,220 @@ test("tears down all watches when rendering multiple records", async () => { expect(cache["watches"].size).toBe(0); }); +test("tears down watches after default autoDisposeTimeoutMs if component never renders again after suspending", async () => { + jest.useFakeTimers(); + interface ItemFragment { + __typename: "Item"; + id: number; + text: string; + } + + const fragment: TypedDocumentNode = gql` + fragment ItemFragment on Item { + id + text + } + `; + + const cache = new InMemoryCache(); + const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime }); + const link = new MockSubscriptionLink(); + const client = new ApolloClient({ link, cache }); + + function App() { + const [showItem, setShowItem] = React.useState(true); + + return ( + + + {showItem && ( + + + + )} + + ); + } + + function Item() { + const { data } = useSuspenseFragment({ + fragment, + from: { __typename: "Item", id: 1 }, + }); + + return {data.text}; + } + + await renderAsync(); + + // Ensure suspends immediately + expect(screen.getByText("Loading item...")).toBeInTheDocument(); + + // Hide the greeting before it finishes loading data + await act(() => user.click(screen.getByText("Hide item"))); + + expect(screen.queryByText("Loading item...")).not.toBeInTheDocument(); + + client.writeFragment({ + fragment, + data: { __typename: "Item", id: 1, text: "Item #1" }, + }); + + // clear the microtask queue + await act(() => Promise.resolve()); + + expect(cache["watches"].size).toBe(1); + + jest.advanceTimersByTime(30_000); + + expect(cache["watches"].size).toBe(0); + + jest.useRealTimers(); +}); + +test("tears down watches after configured autoDisposeTimeoutMs if component never renders again after suspending", async () => { + jest.useFakeTimers(); + interface ItemFragment { + __typename: "Item"; + id: number; + text: string; + } + + const fragment: TypedDocumentNode = gql` + fragment ItemFragment on Item { + id + text + } + `; + + const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime }); + const link = new MockSubscriptionLink(); + const cache = new InMemoryCache(); + const client = new ApolloClient({ + link, + cache, + defaultOptions: { + react: { + suspense: { + autoDisposeTimeoutMs: 5000, + }, + }, + }, + }); + + function App() { + const [showItem, setShowItem] = React.useState(true); + + return ( + + + {showItem && ( + + + + )} + + ); + } + + function Item() { + const { data } = useSuspenseFragment({ + fragment, + from: { __typename: "Item", id: 1 }, + }); + + return {data.text}; + } + + await renderAsync(); + + // Ensure suspends immediately + expect(screen.getByText("Loading item...")).toBeInTheDocument(); + + // Hide the greeting before it finishes loading data + await act(() => user.click(screen.getByText("Hide item"))); + + expect(screen.queryByText("Loading item...")).not.toBeInTheDocument(); + + client.writeFragment({ + fragment, + data: { __typename: "Item", id: 1, text: "Item #1" }, + }); + + // clear the microtask queue + await act(() => Promise.resolve()); + + expect(cache["watches"].size).toBe(1); + + jest.advanceTimersByTime(5000); + + expect(cache["watches"].size).toBe(0); + + jest.useRealTimers(); +}); + +test("cancels autoDisposeTimeoutMs if the component renders before timer finishes", async () => { + jest.useFakeTimers(); + interface ItemFragment { + __typename: "Item"; + id: number; + text: string; + } + + const fragment: TypedDocumentNode = gql` + fragment ItemFragment on Item { + id + text + } + `; + + const link = new MockSubscriptionLink(); + const cache = new InMemoryCache(); + const client = new ApolloClient({ link, cache }); + + function App() { + return ( + + + + + + ); + } + + function Item() { + const { data } = useSuspenseFragment({ + fragment, + from: { __typename: "Item", id: 1 }, + }); + + return {data.text}; + } + + await renderAsync(); + + // Ensure suspends immediately + expect(screen.getByText("Loading item...")).toBeInTheDocument(); + + client.writeFragment({ + fragment, + data: { __typename: "Item", id: 1, text: "Item #1" }, + }); + + // clear the microtask queue + await act(() => Promise.resolve()); + + await waitFor(() => { + expect(screen.getByText("Item #1")).toBeInTheDocument(); + }); + + jest.advanceTimersByTime(30_000); + + expect(cache["watches"].size).toBe(1); + + jest.useRealTimers(); +}); + describe.skip("type tests", () => { test("returns TData when from is a non-null value", () => { const fragment: TypedDocumentNode<{ foo: string }> = gql``; diff --git a/src/react/internal/cache/FragmentReference.ts b/src/react/internal/cache/FragmentReference.ts index 0bb05a9c98..85453892bc 100644 --- a/src/react/internal/cache/FragmentReference.ts +++ b/src/react/internal/cache/FragmentReference.ts @@ -20,6 +20,7 @@ type FragmentRefPromise = PromiseWithState; type Listener = (promise: FragmentRefPromise) => void; interface FragmentReferenceOptions { + autoDisposeTimeoutMs?: number; onDispose?: () => void; } @@ -36,6 +37,7 @@ export class FragmentReference< private subscription!: ObservableSubscription; private listeners = new Set>>(); + private autoDisposeTimeoutId?: NodeJS.Timeout; private references = 0; @@ -58,11 +60,26 @@ export class FragmentReference< const diff = this.getDiff(client, watchFragmentOptions); + // Start a timer that will automatically dispose of the query if the + // suspended resource does not use this fragmentRef in the given time. This + // helps prevent memory leaks when a component has unmounted before the + // query has finished loading. + const startDisposeTimer = () => { + if (!this.references) { + this.autoDisposeTimeoutId = setTimeout( + this.dispose, + options.autoDisposeTimeoutMs ?? 30_000 + ); + } + }; + this.promise = diff.complete ? createFulfilledPromise(diff.result) : this.createPendingPromise(); this.subscribeToFragment(); + + this.promise.then(startDisposeTimer, startDisposeTimer); } listen(listener: Listener>) { @@ -75,6 +92,7 @@ export class FragmentReference< retain() { this.references++; + clearTimeout(this.autoDisposeTimeoutId); let disposed = false; return () => { diff --git a/src/react/internal/cache/SuspenseCache.ts b/src/react/internal/cache/SuspenseCache.ts index dcaecc9a90..03bf0c4304 100644 --- a/src/react/internal/cache/SuspenseCache.ts +++ b/src/react/internal/cache/SuspenseCache.ts @@ -68,6 +68,7 @@ export class SuspenseCache { if (!ref.current) { ref.current = new FragmentReference(client, options, { + autoDisposeTimeoutMs: this.options.autoDisposeTimeoutMs, onDispose: () => { delete ref.current; },