@tanstack/query-core 4.24.10 → 5.0.0-alpha.0

package/src/tests/queryCache.test.tsx

@@ -1,7 +1,6 @@
 import { sleep, queryKey, createQueryClient } from './utils'
-import type { QueryClient } from '..'
+import { QueryClient } from '..'
 import { QueryCache, QueryObserver } from '..'
-import type { Query } from '.././query'
 import { waitFor } from '@testing-library/react'
 
 describe('queryCache', () => {
@@ -23,7 +22,7 @@ describe('queryCache', () => {
       const subscriber = jest.fn()
       const unsubscribe = queryCache.subscribe(subscriber)
       queryClient.setQueryData(key, 'foo')
-      const query = queryCache.find(key)
+      const query = queryCache.find({ queryKey: key })
       await sleep(1)
       expect(subscriber).toHaveBeenCalledWith({ query, type: 'added' })
       unsubscribe()
@@ -33,7 +32,7 @@ describe('queryCache', () => {
       const key = queryKey()
       const callback = jest.fn()
       queryCache.subscribe(callback)
-      queryClient.prefetchQuery(key, () => 'data')
+      queryClient.prefetchQuery({ queryKey: key, queryFn: () => 'data' })
       await sleep(100)
       expect(callback).toHaveBeenCalled()
     })
@@ -76,8 +75,8 @@ describe('queryCache', () => {
       const key = queryKey()
       const callback = jest.fn()
       queryCache.subscribe(callback)
-      queryClient.prefetchQuery(key, () => 'data')
-      const query = queryCache.find(key)
+      queryClient.prefetchQuery({ queryKey: key, queryFn: () => 'data' })
+      const query = queryCache.find({ queryKey: key })
       await sleep(100)
       expect(callback).toHaveBeenCalledWith({ query, type: 'added' })
     })
@@ -86,26 +85,68 @@ describe('queryCache', () => {
       const key = queryKey()
       const callback = jest.fn()
       queryCache.subscribe(callback)
-      queryClient.prefetchQuery(key, () => 'data', {
+      queryClient.prefetchQuery({
+        queryKey: key,
+        queryFn: () => 'data',
         initialData: 'initial',
       })
       await sleep(100)
       expect(callback).toHaveBeenCalled()
     })
+
+    test('should be able to limit cache size', async () => {
+      const testCache = new QueryCache()
+
+      const unsubscribe = testCache.subscribe((event) => {
+        if (event.type === 'added') {
+          if (testCache.getAll().length > 2) {
+            testCache
+              .findAll({
+                type: 'inactive',
+                predicate: (q) => q !== event.query,
+              })
+              .forEach((query) => {
+                testCache.remove(query)
+              })
+          }
+        }
+      })
+
+      const testClient = new QueryClient({ queryCache: testCache })
+
+      await testClient.prefetchQuery({
+        queryKey: ['key1'],
+        queryFn: () => 'data1',
+      })
+      expect(testCache.findAll().length).toBe(1)
+      await testClient.prefetchQuery({
+        queryKey: ['key2'],
+        queryFn: () => 'data2',
+      })
+      expect(testCache.findAll().length).toBe(2)
+      await testClient.prefetchQuery({
+        queryKey: ['key3'],
+        queryFn: () => 'data3',
+      })
+      expect(testCache.findAll().length).toBe(1)
+      expect(testCache.findAll()[0]!.state.data).toBe('data3')
+
+      unsubscribe()
+    })
   })
 
   describe('find', () => {
     test('find should filter correctly', async () => {
       const key = queryKey()
-      await queryClient.prefetchQuery(key, () => 'data1')
-      const query = queryCache.find(key)!
+      await queryClient.prefetchQuery({ queryKey: key, queryFn: () => 'data1' })
+      const query = queryCache.find({ queryKey: key })!
       expect(query).toBeDefined()
     })
 
     test('find should filter correctly with exact set to false', async () => {
       const key = queryKey()
-      await queryClient.prefetchQuery(key, () => 'data1')
-      const query = queryCache.find(key, { exact: false })!
+      await queryClient.prefetchQuery({ queryKey: key, queryFn: () => 'data1' })
+      const query = queryCache.find({ queryKey: key, exact: false })!
       expect(query).toBeDefined()
     })
   })
@@ -115,65 +156,96 @@ describe('queryCache', () => {
       const key1 = queryKey()
       const key2 = queryKey()
       const keyFetching = queryKey()
-      await queryClient.prefetchQuery(key1, () => 'data1')
-      await queryClient.prefetchQuery(key2, () => 'data2')
-      await queryClient.prefetchQuery([{ a: 'a', b: 'b' }], () => 'data3')
-      await queryClient.prefetchQuery(['posts', 1], () => 'data4')
-      queryClient.invalidateQueries(key2)
-      const query1 = queryCache.find(key1)!
-      const query2 = queryCache.find(key2)!
-      const query3 = queryCache.find([{ a: 'a', b: 'b' }])!
-      const query4 = queryCache.find(['posts', 1])!
-
-      expect(queryCache.findAll(key1)).toEqual([query1])
+      await queryClient.prefetchQuery({
+        queryKey: key1,
+        queryFn: () => 'data1',
+      })
+      await queryClient.prefetchQuery({
+        queryKey: key2,
+        queryFn: () => 'data2',
+      })
+      await queryClient.prefetchQuery({
+        queryKey: [{ a: 'a', b: 'b' }],
+        queryFn: () => 'data3',
+      })
+      await queryClient.prefetchQuery({
+        queryKey: ['posts', 1],
+        queryFn: () => 'data4',
+      })
+      queryClient.invalidateQueries({ queryKey: key2 })
+      const query1 = queryCache.find({ queryKey: key1 })!
+      const query2 = queryCache.find({ queryKey: key2 })!
+      const query3 = queryCache.find({ queryKey: [{ a: 'a', b: 'b' }] })!
+      const query4 = queryCache.find({ queryKey: ['posts', 1] })!
+
+      expect(queryCache.findAll({ queryKey: key1 })).toEqual([query1])
       // wrapping in an extra array doesn't yield the same results anymore since v4 because keys need to be an array
-      expect(queryCache.findAll([key1])).toEqual([])
+      expect(queryCache.findAll({ queryKey: [key1] })).toEqual([])
       expect(queryCache.findAll()).toEqual([query1, query2, query3, query4])
       expect(queryCache.findAll({})).toEqual([query1, query2, query3, query4])
-      expect(queryCache.findAll(key1, { type: 'inactive' })).toEqual([query1])
-      expect(queryCache.findAll(key1, { type: 'active' })).toEqual([])
-      expect(queryCache.findAll(key1, { stale: true })).toEqual([])
-      expect(queryCache.findAll(key1, { stale: false })).toEqual([query1])
+      expect(queryCache.findAll({ queryKey: key1, type: 'inactive' })).toEqual([
+        query1,
+      ])
+      expect(queryCache.findAll({ queryKey: key1, type: 'active' })).toEqual([])
+      expect(queryCache.findAll({ queryKey: key1, stale: true })).toEqual([])
+      expect(queryCache.findAll({ queryKey: key1, stale: false })).toEqual([
+        query1,
+      ])
       expect(
-        queryCache.findAll(key1, { stale: false, type: 'active' }),
+        queryCache.findAll({ queryKey: key1, stale: false, type: 'active' }),
       ).toEqual([])
       expect(
-        queryCache.findAll(key1, { stale: false, type: 'inactive' }),
+        queryCache.findAll({ queryKey: key1, stale: false, type: 'inactive' }),
       ).toEqual([query1])
       expect(
-        queryCache.findAll(key1, {
+        queryCache.findAll({
+          queryKey: key1,
           stale: false,
           type: 'inactive',
           exact: true,
         }),
       ).toEqual([query1])
 
-      expect(queryCache.findAll(key2)).toEqual([query2])
-      expect(queryCache.findAll(key2, { stale: undefined })).toEqual([query2])
-      expect(queryCache.findAll(key2, { stale: true })).toEqual([query2])
-      expect(queryCache.findAll(key2, { stale: false })).toEqual([])
-      expect(queryCache.findAll([{ b: 'b' }])).toEqual([query3])
-      expect(queryCache.findAll([{ a: 'a' }], { exact: false })).toEqual([
-        query3,
+      expect(queryCache.findAll({ queryKey: key2 })).toEqual([query2])
+      expect(queryCache.findAll({ queryKey: key2, stale: undefined })).toEqual([
+        query2,
       ])
-      expect(queryCache.findAll([{ a: 'a' }], { exact: true })).toEqual([])
-      expect(queryCache.findAll([{ a: 'a', b: 'b' }], { exact: true })).toEqual(
-        [query3],
-      )
-      expect(queryCache.findAll([{ a: 'a', b: 'b' }])).toEqual([query3])
-      expect(queryCache.findAll([{ a: 'a', b: 'b', c: 'c' }])).toEqual([])
-      expect(queryCache.findAll([{ a: 'a' }], { stale: false })).toEqual([
-        query3,
+      expect(queryCache.findAll({ queryKey: key2, stale: true })).toEqual([
+        query2,
       ])
-      expect(queryCache.findAll([{ a: 'a' }], { stale: true })).toEqual([])
-      expect(queryCache.findAll([{ a: 'a' }], { type: 'active' })).toEqual([])
-      expect(queryCache.findAll([{ a: 'a' }], { type: 'inactive' })).toEqual([
+      expect(queryCache.findAll({ queryKey: key2, stale: false })).toEqual([])
+      expect(queryCache.findAll({ queryKey: [{ b: 'b' }] })).toEqual([query3])
+      expect(
+        queryCache.findAll({ queryKey: [{ a: 'a' }], exact: false }),
+      ).toEqual([query3])
+      expect(
+        queryCache.findAll({ queryKey: [{ a: 'a' }], exact: true }),
+      ).toEqual([])
+      expect(
+        queryCache.findAll({ queryKey: [{ a: 'a', b: 'b' }], exact: true }),
+      ).toEqual([query3])
+      expect(queryCache.findAll({ queryKey: [{ a: 'a', b: 'b' }] })).toEqual([
         query3,
       ])
+      expect(
+        queryCache.findAll({ queryKey: [{ a: 'a', b: 'b', c: 'c' }] }),
+      ).toEqual([])
+      expect(
+        queryCache.findAll({ queryKey: [{ a: 'a' }], stale: false }),
+      ).toEqual([query3])
+      expect(
+        queryCache.findAll({ queryKey: [{ a: 'a' }], stale: true }),
+      ).toEqual([])
+      expect(
+        queryCache.findAll({ queryKey: [{ a: 'a' }], type: 'active' }),
+      ).toEqual([])
+      expect(
+        queryCache.findAll({ queryKey: [{ a: 'a' }], type: 'inactive' }),
+      ).toEqual([query3])
       expect(
         queryCache.findAll({ predicate: (query) => query === query3 }),
       ).toEqual([query3])
-      expect(queryCache.findAll(['posts'])).toEqual([query4])
+      expect(queryCache.findAll({ queryKey: ['posts'] })).toEqual([query4])
 
       expect(queryCache.findAll({ fetchStatus: 'idle' })).toEqual([
         query1,
@@ -181,16 +253,19 @@ describe('queryCache', () => {
         query3,
         query4,
       ])
-      expect(queryCache.findAll(key2, { fetchStatus: undefined })).toEqual([
-        query2,
-      ])
-
-      const promise = queryClient.prefetchQuery(keyFetching, async () => {
-        await sleep(20)
-        return 'dataFetching'
+      expect(
+        queryCache.findAll({ queryKey: key2, fetchStatus: undefined }),
+      ).toEqual([query2])
+
+      const promise = queryClient.prefetchQuery({
+        queryKey: keyFetching,
+        queryFn: async () => {
+          await sleep(20)
+          return 'dataFetching'
+        },
       })
       expect(queryCache.findAll({ fetchStatus: 'fetching' })).toEqual([
-        queryCache.find(keyFetching),
+        queryCache.find({ queryKey: keyFetching }),
       ])
       await promise
       expect(queryCache.findAll({ fetchStatus: 'fetching' })).toEqual([])
@@ -199,8 +274,14 @@ describe('queryCache', () => {
     test('should return all the queries when no filters are defined', async () => {
       const key1 = queryKey()
       const key2 = queryKey()
-      await queryClient.prefetchQuery(key1, () => 'data1')
-      await queryClient.prefetchQuery(key2, () => 'data2')
+      await queryClient.prefetchQuery({
+        queryKey: key1,
+        queryFn: () => 'data1',
+      })
+      await queryClient.prefetchQuery({
+        queryKey: key2,
+        queryFn: () => 'data2',
+      })
       expect(queryCache.findAll().length).toBe(2)
     })
   })
@@ -211,10 +292,11 @@ describe('queryCache', () => {
       const onError = jest.fn()
       const testCache = new QueryCache({ onError })
       const testClient = createQueryClient({ queryCache: testCache })
-      await testClient.prefetchQuery(key, () =>
-        Promise.reject<unknown>('error'),
-      )
-      const query = testCache.find(key)
+      await testClient.prefetchQuery({
+        queryKey: key,
+        queryFn: () => Promise.reject<unknown>('error'),
+      })
+      const query = testCache.find({ queryKey: key })
       expect(onError).toHaveBeenCalledWith('error', query)
     })
   })
@@ -225,48 +307,43 @@ describe('queryCache', () => {
       const onSuccess = jest.fn()
       const testCache = new QueryCache({ onSuccess })
       const testClient = createQueryClient({ queryCache: testCache })
-      await testClient.prefetchQuery(key, () => Promise.resolve({ data: 5 }))
-      const query = testCache.find(key)
+      await testClient.prefetchQuery({
+        queryKey: key,
+        queryFn: () => Promise.resolve({ data: 5 }),
+      })
+      const query = testCache.find({ queryKey: key })
       expect(onSuccess).toHaveBeenCalledWith({ data: 5 }, query)
     })
   })
 
-  describe('QueryCache.add', () => {
-    test('should not try to add a query already added to the cache', async () => {
-      const key = queryKey()
-      const hash = `["${key}"]`
-
-      await queryClient.prefetchQuery(key, () => 'data1')
+  describe('QueryCacheConfig.createStore', () => {
+    test('should call createStore', async () => {
+      const createStore = jest.fn().mockImplementation(() => new Map())
+      new QueryCache({ createStore })
+      expect(createStore).toHaveBeenCalledWith()
+    })
 
-      // Directly add the query from the cache
-      // to simulate a race condition
-      const query = queryCache['queriesMap'][hash] as Query
-      const queryClone = Object.assign({}, query)
+    test('should use created store', async () => {
+      const store = new Map()
+      const spy = jest.spyOn(store, 'get')
 
-      // No error should be thrown when trying to add the query
-      queryCache.add(queryClone)
-      expect(queryCache['queries'].length).toEqual(1)
+      new QueryCache({ createStore: () => store }).get('key')
 
-      // Clean-up to avoid an error when queryClient.clear()
-      delete queryCache['queriesMap'][hash]
+      expect(spy).toHaveBeenCalledTimes(1)
     })
+  })
 
-    describe('QueryCache.remove', () => {
-      test('should not try to remove a query already removed from the cache', async () => {
-        const key = queryKey()
-        const hash = `["${key}"]`
+  describe('QueryCache.add', () => {
+    test('should not try to add a query already added to the cache', async () => {
+      const key = queryKey()
 
-        await queryClient.prefetchQuery(key, () => 'data1')
+      await queryClient.prefetchQuery({ queryKey: key, queryFn: () => 'data1' })
 
-        // Directly remove the query from the cache
-        // to simulate a race condition
-        const query = queryCache['queriesMap'][hash] as Query
-        const queryClone = Object.assign({}, query)
-        delete queryCache['queriesMap'][hash]
+      const query = queryCache.findAll()[0]!
+      const queryClone = Object.assign({}, query)
 
-        // No error should be thrown when trying to remove the query
-        expect(() => queryCache.remove(queryClone)).not.toThrow()
-      })
+      queryCache.add(queryClone)
+      expect(queryCache.getAll().length).toEqual(1)
     })
   })
 })