fix: string and array query keys should be similar (TanStack#1799)

Author: boschni

src/core/queriesObserver.ts

@@ -1,4 +1,4 @@
-import { difference, getQueryKeyHashFn, replaceAt } from './utils'
+import { difference, replaceAt } from './utils'
 import { notifyManager } from './notifyManager'
 import type { QueryObserverOptions, QueryObserverResult } from './types'
 import type { QueryClient } from './queryClient'
@@ -63,8 +63,6 @@ export class QueriesObserver extends Subscribable<QueriesObserverListener> {
       let observer: QueryObserver | undefined = this.observers[i]
 
       const defaultedOptions = this.client.defaultQueryObserverOptions(options)
-      const hashFn = getQueryKeyHashFn(defaultedOptions)
-      defaultedOptions.queryHash = hashFn(defaultedOptions.queryKey!)
 
       if (
         !observer ||
@@ -94,8 +92,6 @@ export class QueriesObserver extends Subscribable<QueriesObserverListener> {
         const defaultedOptions = this.client.defaultQueryObserverOptions(
           options
         )
-        const hashFn = getQueryKeyHashFn(defaultedOptions)
-        defaultedOptions.queryHash = hashFn(defaultedOptions.queryKey!)
 
         if (
           !observer ||

src/core/queryCache.ts

@@ -1,6 +1,6 @@
 import {
   QueryFilters,
-  getQueryKeyHashFn,
+  hashQueryKeyByOptions,
   matchQuery,
   parseFilterArgs,
 } from './utils'
@@ -43,7 +43,8 @@ export class QueryCache extends Subscribable<QueryCacheListener> {
     state?: QueryState<TData, TError>
   ): Query<TQueryFnData, TError, TData> {
     const queryKey = options.queryKey!
-    const queryHash = options.queryHash ?? getQueryKeyHashFn(options)(queryKey)
+    const queryHash =
+      options.queryHash ?? hashQueryKeyByOptions(queryKey, options)
     let query = this.get<TQueryFnData, TError, TData>(queryHash)
 
     if (!query) {

src/core/queryClient.ts

@@ -6,7 +6,7 @@ import {
   parseFilterArgs,
   parseQueryArgs,
   partialMatchKey,
-  getQueryKeyHashFn,
+  hashQueryKeyByOptions,
 } from './utils'
 import type {
   DefaultOptions,
@@ -456,8 +456,9 @@ export class QueryClient {
     } as T
 
     if (!defaultedOptions.queryHash && defaultedOptions.queryKey) {
-      defaultedOptions.queryHash = getQueryKeyHashFn(defaultedOptions)(
-        defaultedOptions.queryKey
+      defaultedOptions.queryHash = hashQueryKeyByOptions(
+        defaultedOptions.queryKey,
+        defaultedOptions
       )
     }
 

src/core/tests/queryClient.test.tsx

@@ -140,6 +140,19 @@ describe('queryClient', () => {
       expect(queryClient.getQueryData(key)).toBe('qux')
     })
 
+    test('should use the same query when using similar string or array query keys', () => {
+      const key = queryKey()
+      queryClient.setQueryData(key, '1')
+      expect(queryClient.getQueryData(key)).toBe('1')
+      expect(queryClient.getQueryData([key])).toBe('1')
+      queryClient.setQueryData([key], '2')
+      expect(queryClient.getQueryData(key)).toBe('2')
+      expect(queryClient.getQueryData([key])).toBe('2')
+      queryClient.setQueryData(key, '1')
+      expect(queryClient.getQueryData(key)).toBe('1')
+      expect(queryClient.getQueryData([key])).toBe('1')
+    })
+
     test('should accept an update function', () => {
       const key = queryKey()
 

src/core/utils.ts

@@ -5,7 +5,6 @@ import type {
   MutationOptions,
   QueryFunction,
   QueryKey,
-  QueryKeyHashFunction,
   QueryOptions,
 } from './types'
 
@@ -153,8 +152,7 @@ export function matchQuery(
 
   if (isQueryKey(queryKey)) {
     if (exact) {
-      const hashFn = getQueryKeyHashFn(query.options)
-      if (query.queryHash !== hashFn(queryKey)) {
+      if (query.queryHash !== hashQueryKeyByOptions(queryKey, query.options)) {
         return false
       }
     } else if (!partialMatchKey(query.queryKey, queryKey)) {
@@ -189,17 +187,20 @@ export function matchQuery(
   return true
 }
 
-export function getQueryKeyHashFn(
+export function hashQueryKeyByOptions(
+  queryKey: QueryKey,
   options?: QueryOptions<any, any>
-): QueryKeyHashFunction {
-  return options?.queryKeyHashFn || hashQueryKey
+): string {
+  const hashFn = options?.queryKeyHashFn || hashQueryKey
+  return hashFn(queryKey)
 }
 
 /**
  * Default query keys hash function.
  */
 export function hashQueryKey(queryKey: QueryKey): string {
-  return stableValueHash(queryKey)
+  const asArray = Array.isArray(queryKey) ? queryKey : [queryKey]
+  return stableValueHash(asArray)
 }
 
 /**