fix(useBackgroundQuery): better usage tracking

src/react/hooks/__tests__/useBackgroundQuery.test.tsx

@@ -111,6 +111,7 @@ function createErrorProfiler<TData = unknown>() {
     },
   });
 }
+
 function createDefaultProfiler<TData = unknown>() {
   return createProfiler({
     initialSnapshot: {
@@ -562,6 +563,53 @@ it("does not prematurely dispose of the queryRef when using strict mode", async
   expect(client).toHaveSuspenseCacheEntryUsing(query);
 });
 
+it("disposes of the queryRef when unmounting before it is used by useReadQuery even if it has been rerendered", async () => {
+  const { query, mocks } = setupSimpleCase();
+  const client = new ApolloClient({
+    link: new MockLink(mocks),
+    cache: new InMemoryCache(),
+  });
+  const user = userEvent.setup();
+
+  const Profiler = createDefaultProfiler<SimpleCaseData>();
+
+  function App() {
+    useTrackRenders();
+    useBackgroundQuery(query);
+
+    const [a, setA] = React.useState(0);
+
+    return (
+      <>
+        <button onClick={() => setA(a + 1)}>Increment</button>
+      </>
+    );
+  }
+
+  const { unmount } = renderWithClient(<App />, {
+    client,
+    wrapper: Profiler,
+  });
+  const button = screen.getByText("Increment");
+
+  await act(() => user.click(button));
+
+  {
+    const { renderedComponents } = await Profiler.takeRender();
+
+    expect(renderedComponents).toStrictEqual([App]);
+  }
+
+  expect(client.getObservableQueries().size).toBe(1);
+  expect(client).toHaveSuspenseCacheEntryUsing(query);
+
+  await wait(0);
+
+  unmount();
+  await wait(0);
+  expect(client.getObservableQueries().size).toBe(0);
+});
+
 it("allows the client to be overridden", async () => {
   const { query } = setupSimpleCase();
 
@@ -1101,6 +1149,7 @@ it("works with startTransition to change variables", async () => {
       completed: boolean;
     };
   }
+
   const user = userEvent.setup();
 
   const query: TypedDocumentNode<Data, Variables> = gql`
@@ -4305,6 +4354,7 @@ describe("refetch", () => {
         completed: boolean;
       };
     }
+
     const user = userEvent.setup();
 
     const query: TypedDocumentNode<Data, Variables> = gql`
@@ -4553,6 +4603,7 @@ describe("refetch", () => {
         completed: boolean;
       };
     }
+
     const user = userEvent.setup();
 
     const query: TypedDocumentNode<Data, Variables> = gql`
@@ -5162,9 +5213,11 @@ describe("fetchMore", () => {
       name: string;
       completed: boolean;
     }
+
     interface Data {
       todos: Todo[];
     }
+
     const user = userEvent.setup();
 
     const query: TypedDocumentNode<Data, Variables> = gql`

src/react/hooks/useBackgroundQuery.ts

@@ -224,10 +224,8 @@ function _useBackgroundQuery<
     ...([] as any[]).concat(queryKey),
   ];
 
-  const queryRef = suspenseCache.getQueryRef(
-    cacheKey,
-    () => client.watchQuery(watchQueryOptions as WatchQueryOptions<any, any>),
-    true
+  const queryRef = suspenseCache.getQueryRef(cacheKey, () =>
+    client.watchQuery(watchQueryOptions as WatchQueryOptions<any, any>)
   );
 
   const [wrappedQueryRef, setWrappedQueryRef] = React.useState(
@@ -264,6 +262,7 @@ function _useBackgroundQuery<
   );
 
   React.useEffect(() => {
+    queryRef.newUsage();
     return () => {
       queryRef.disposeOnUnmount();
     };

src/react/internal/cache/QueryReference.ts

@@ -160,19 +160,17 @@ export class InternalQueryReference<TData = unknown> {
   private reject: ((error: unknown) => void) | undefined;
 
   private references = 0;
-  private nbOfUse = 0;
+  private numberOfUse = 0;
 
   constructor(
     observable: ObservableQuery<TData, any>,
-    options: InternalQueryReferenceOptions,
-    trackUses: boolean = false
+    options: InternalQueryReferenceOptions
   ) {
     this.handleNext = this.handleNext.bind(this);
     this.handleError = this.handleError.bind(this);
     this.dispose = this.dispose.bind(this);
     this.observable = observable;
     this.autoDisposeTimeoutMs = options.autoDisposeTimeoutMs ?? 30_000;
-    this.nbOfUse = trackUses ? 1 : 0;
 
     if (options.onDispose) {
       this.onDispose = options.onDispose;
@@ -260,16 +258,21 @@ export class InternalQueryReference<TData = unknown> {
   }
 
   newUsage() {
-    this.nbOfUse++;
-    clearTimeout(this.autoDisposeTimeoutId);
-    this.startDisposeTimer();
+    this.numberOfUse++;
+    if (!this.references) {
+      clearTimeout(this.autoDisposeTimeoutId);
+      this.startDisposeTimer();
+    }
   }
 
   disposeOnUnmount() {
-    this.nbOfUse--;
-    if (!this.nbOfUse && !this.references) {
-      this.dispose();
-    }
+    this.numberOfUse--;
+    // Wait before fully disposing in case the app is running in strict mode.
+    setTimeout(() => {
+      if (!this.numberOfUse && !this.references) {
+        this.dispose();
+      }
+    });
   }
 
   didChangeOptions(watchQueryOptions: ObservedOptions) {

src/react/internal/cache/SuspenseCache.ts

@@ -30,26 +30,19 @@ export class SuspenseCache {
 
   getQueryRef<TData = any>(
     cacheKey: CacheKey,
-    createObservable: () => ObservableQuery<TData>,
-    trackUses: boolean = false
+    createObservable: () => ObservableQuery<TData>
   ) {
     const ref = this.queryRefs.lookupArray(cacheKey) as {
       current?: InternalQueryReference<TData>;
     };
 
     if (!ref.current) {
-      ref.current = new InternalQueryReference(
-        createObservable(),
-        {
-          autoDisposeTimeoutMs: this.options.autoDisposeTimeoutMs,
-          onDispose: () => {
-            delete ref.current;
-          },
+      ref.current = new InternalQueryReference(createObservable(), {
+        autoDisposeTimeoutMs: this.options.autoDisposeTimeoutMs,
+        onDispose: () => {
+          delete ref.current;
         },
-        trackUses
-      );
-    } else if (trackUses) {
-      ref.current.newUsage();
+      });
     }
 
     return ref.current;