perf(persist): subscriber calls persistQueryClientStore only on cache-related events (#4884)

* perf(persist): subscriber calls persistQueryClientStore only on cache related events

* refactor(persist): extract NotifyEvent type shared between query and mutation cache

* refactor(persist): move cacheableEventTypes declaration outside the function

* test(persist): add test checking `persistClient` calls frequency

---------

Co-authored-by: Dominik Dorfmeister <[email protected]>

Author: emzet93

packages/query-core/src/mutationCache.ts

@@ -1,5 +1,5 @@
 import type { MutationObserver } from './mutationObserver'
-import type { MutationOptions } from './types'
+import type { MutationOptions, NotifyEvent } from './types'
 import type { QueryClient } from './queryClient'
 import { notifyManager } from './notifyManager'
 import type { Action, MutationState } from './mutation'
@@ -29,34 +29,34 @@ interface MutationCacheConfig {
   ) => Promise<unknown> | unknown
 }
 
-interface NotifyEventMutationAdded {
+interface NotifyEventMutationAdded extends NotifyEvent {
   type: 'added'
   mutation: Mutation<any, any, any, any>
 }
-interface NotifyEventMutationRemoved {
+interface NotifyEventMutationRemoved extends NotifyEvent {
   type: 'removed'
   mutation: Mutation<any, any, any, any>
 }
 
-interface NotifyEventMutationObserverAdded {
+interface NotifyEventMutationObserverAdded extends NotifyEvent {
   type: 'observerAdded'
   mutation: Mutation<any, any, any, any>
   observer: MutationObserver<any, any, any>
 }
 
-interface NotifyEventMutationObserverRemoved {
+interface NotifyEventMutationObserverRemoved extends NotifyEvent {
   type: 'observerRemoved'
   mutation: Mutation<any, any, any, any>
   observer: MutationObserver<any, any, any>
 }
 
-interface NotifyEventMutationObserverOptionsUpdated {
+interface NotifyEventMutationObserverOptionsUpdated extends NotifyEvent {
   type: 'observerOptionsUpdated'
   mutation?: Mutation<any, any, any, any>
   observer: MutationObserver<any, any, any, any>
 }
 
-interface NotifyEventMutationUpdated {
+interface NotifyEventMutationUpdated extends NotifyEvent {
   type: 'updated'
   mutation: Mutation<any, any, any, any>
   action: Action<any, any, any, any>

packages/query-core/src/queryCache.ts

@@ -2,7 +2,7 @@ import type { QueryFilters } from './utils'
 import { hashQueryKeyByOptions, matchQuery, parseFilterArgs } from './utils'
 import type { Action, QueryState } from './query'
 import { Query } from './query'
-import type { QueryKey, QueryOptions } from './types'
+import type { NotifyEvent, QueryKey, QueryOptions } from './types'
 import { notifyManager } from './notifyManager'
 import type { QueryClient } from './queryClient'
 import { Subscribable } from './subscribable'
@@ -19,40 +19,40 @@ interface QueryHashMap {
   [hash: string]: Query<any, any, any, any>
 }
 
-interface NotifyEventQueryAdded {
+interface NotifyEventQueryAdded extends NotifyEvent {
   type: 'added'
   query: Query<any, any, any, any>
 }
 
-interface NotifyEventQueryRemoved {
+interface NotifyEventQueryRemoved extends NotifyEvent {
   type: 'removed'
   query: Query<any, any, any, any>
 }
 
-interface NotifyEventQueryUpdated {
+interface NotifyEventQueryUpdated extends NotifyEvent {
   type: 'updated'
   query: Query<any, any, any, any>
   action: Action<any, any>
 }
 
-interface NotifyEventQueryObserverAdded {
+interface NotifyEventQueryObserverAdded extends NotifyEvent {
   type: 'observerAdded'
   query: Query<any, any, any, any>
   observer: QueryObserver<any, any, any, any, any>
 }
 
-interface NotifyEventQueryObserverRemoved {
+interface NotifyEventQueryObserverRemoved extends NotifyEvent {
   type: 'observerRemoved'
   query: Query<any, any, any, any>
   observer: QueryObserver<any, any, any, any, any>
 }
 
-interface NotifyEventQueryObserverResultsUpdated {
+interface NotifyEventQueryObserverResultsUpdated extends NotifyEvent {
   type: 'observerResultsUpdated'
   query: Query<any, any, any, any>
 }
 
-interface NotifyEventQueryObserverOptionsUpdated {
+interface NotifyEventQueryObserverOptionsUpdated extends NotifyEvent {
   type: 'observerOptionsUpdated'
   query: Query<any, any, any, any>
   observer: QueryObserver<any, any, any, any, any>

packages/query-core/src/types.ts

@@ -726,3 +726,16 @@ export interface CancelOptions {
 export interface SetDataOptions {
   updatedAt?: number
 }
+
+export type NotifyEventType =
+  | 'added'
+  | 'removed'
+  | 'updated'
+  | 'observerAdded'
+  | 'observerRemoved'
+  | 'observerResultsUpdated'
+  | 'observerOptionsUpdated'
+
+export interface NotifyEvent {
+  type: NotifyEventType
+}

packages/query-persist-client-core/src/__tests__/persist.test.ts

@@ -1,23 +1,10 @@
-import { createQueryClient, sleep } from './utils'
-import type { PersistedClient, Persister } from '../persist'
+import {
+  createQueryClient,
+  createSpyablePersister,
+  createMockPersister,
+} from './utils'
 import { persistQueryClientSubscribe } from '../persist'
-
-const createMockPersister = (): Persister => {
-  let storedState: PersistedClient | undefined
-
-  return {
-    async persistClient(persistClient: PersistedClient) {
-      storedState = persistClient
-    },
-    async restoreClient() {
-      await sleep(10)
-      return storedState
-    },
-    removeClient() {
-      storedState = undefined
-    },
-  }
-}
+import { QueriesObserver } from '@tanstack/query-core'
 
 describe('persistQueryClientSubscribe', () => {
   test('should persist mutations', async () => {
@@ -43,3 +30,34 @@ describe('persistQueryClientSubscribe', () => {
     unsubscribe()
   })
 })
+
+describe('persistQueryClientSave', () => {
+  test('should not be triggered on observer type events', async () => {
+    const queryClient = createQueryClient()
+
+    const persister = createSpyablePersister()
+
+    const unsubscribe = persistQueryClientSubscribe({
+      queryClient,
+      persister,
+    })
+
+    const queryKey = ['test']
+    const queryFn = jest.fn().mockReturnValue(1)
+    const observer = new QueriesObserver(queryClient, [{ queryKey, queryFn }])
+    const unsubscribeObserver = observer.subscribe(jest.fn())
+    observer.getObservers()[0]?.setOptions({ refetchOnWindowFocus: false })
+    unsubscribeObserver()
+
+    queryClient.setQueryData(queryKey, 2)
+
+    // persistClient should be called 3 times:
+    // 1. When query is added
+    // 2. When queryFn is resolved
+    // 3. When setQueryData is called
+    // All events fired by manipulating observers are ignored
+    expect(persister.persistClient).toHaveBeenCalledTimes(3)
+
+    unsubscribe()
+  })
+})

packages/query-persist-client-core/src/__tests__/utils.ts

@@ -1,5 +1,9 @@
 import type { QueryClientConfig } from '@tanstack/query-core'
 import { QueryClient } from '@tanstack/query-core'
+import type {
+  Persister,
+  PersistedClient,
+} from '@tanstack/query-persist-client-core'
 
 export function createQueryClient(config?: QueryClientConfig): QueryClient {
   jest.spyOn(console, 'error').mockImplementation(() => undefined)
@@ -17,3 +21,28 @@ export function sleep(timeout: number): Promise<void> {
     setTimeout(resolve, timeout)
   })
 }
+
+export const createMockPersister = (): Persister => {
+  let storedState: PersistedClient | undefined
+
+  return {
+    async persistClient(persistClient: PersistedClient) {
+      storedState = persistClient
+    },
+    async restoreClient() {
+      await sleep(10)
+      return storedState
+    },
+    removeClient() {
+      storedState = undefined
+    },
+  }
+}
+
+export const createSpyablePersister = (): Persister => {
+  return {
+    persistClient: jest.fn(),
+    restoreClient: jest.fn(),
+    removeClient: jest.fn(),
+  }
+}

packages/query-persist-client-core/src/persist.ts

@@ -5,6 +5,7 @@ import type {
   HydrateOptions,
 } from '@tanstack/query-core'
 import { dehydrate, hydrate } from '@tanstack/query-core'
+import type { NotifyEventType } from '@tanstack/query-core'
 
 export type Promisable<T> = T | PromiseLike<T>
 
@@ -52,6 +53,20 @@ export interface PersistQueryClientOptions
     PersistedQueryClientSaveOptions,
     PersistQueryClienRootOptions {}
 
+/**
+ * Checks if emitted event is about cache change and not about observers.
+ * Useful for persist, where we only want to trigger save when cache is changed.
+ */
+const cacheableEventTypes: Array<NotifyEventType> = [
+  'added',
+  'removed',
+  'updated',
+]
+
+function isCacheableEventType(eventType: NotifyEventType) {
+  return cacheableEventTypes.includes(eventType)
+}
+
 /**
  * Restores persisted data to the QueryCache
  *  - data obtained from persister.restoreClient
@@ -123,14 +138,18 @@ export function persistQueryClientSubscribe(
 ) {
   const unsubscribeQueryCache = props.queryClient
     .getQueryCache()
-    .subscribe(() => {
-      persistQueryClientSave(props)
+    .subscribe((event) => {
+      if (isCacheableEventType(event.type)) {
+        persistQueryClientSave(props)
+      }
     })
 
   const unusbscribeMutationCache = props.queryClient
     .getMutationCache()
-    .subscribe(() => {
-      persistQueryClientSave(props)
+    .subscribe((event) => {
+      if (isCacheableEventType(event.type)) {
+        persistQueryClientSave(props)
+      }
     })
 
   return () => {