Feature/stale time on query

packages/query-core/src/__tests__/hydration.test.tsx

@@ -891,7 +891,7 @@ describe('dehydration and rehydration', () => {
         fetchFailureReason: null,
         fetchMeta: null,
         fetchStatus: 'fetching',
-        isInvalidated: false,
+        isInvalidated: true,
         status: 'pending',
       },
     )
@@ -910,7 +910,7 @@ describe('dehydration and rehydration', () => {
         fetchFailureReason: null,
         fetchMeta: null,
         fetchStatus: 'idle',
-        isInvalidated: false,
+        isInvalidated: true,
         status: 'success',
       }),
     )

packages/query-core/src/__tests__/query.test.tsx

@@ -143,7 +143,6 @@ describe('query', () => {
     // Promise should eventually be resolved
     await promise
 
-    console.log('has finished')
     expect(result).toBe('data3')
     onlineMock.mockRestore()
   })
@@ -1046,4 +1045,60 @@ describe('query', () => {
 
     expect(query.state.status).toBe('error')
   })
+
+  it('should warn when multiple observers have different staleTimes when mounted at the same time', async () => {
+    const consoleMock = vi.spyOn(console, 'error')
+    consoleMock.mockImplementation(() => undefined)
+    const key = queryKey()
+    const observer1 = new QueryObserver(queryClient, {
+      queryKey: key,
+      initialData: 5,
+      staleTime: 1000,
+    })
+
+    const unsubscribe1 = observer1.subscribe(() => undefined)
+
+    const observer2 = new QueryObserver(queryClient, {
+      queryKey: key,
+      initialData: 5,
+      staleTime: 2000,
+    })
+
+    const unsubscribe2 = observer2.subscribe(() => undefined)
+
+    expect(consoleMock).toHaveBeenCalledTimes(1)
+    expect(consoleMock).toHaveBeenCalledWith(
+      `Multiple observers with different staleTimes are attached to the this query: ["${key}"]. The staleTime of the query will be determined by the last observer.`,
+    )
+    unsubscribe1()
+    unsubscribe2()
+    consoleMock.mockRestore()
+  })
+
+  it('should not warn when multiple observers have different staleTimes but not mounted at the same time', async () => {
+    const consoleMock = vi.spyOn(console, 'error')
+    consoleMock.mockImplementation(() => undefined)
+    const key = queryKey()
+    const observer1 = new QueryObserver(queryClient, {
+      queryKey: key,
+      initialData: 5,
+      staleTime: 1000,
+    })
+
+    const unsubscribe1 = observer1.subscribe(() => undefined)
+
+    unsubscribe1()
+
+    const observer2 = new QueryObserver(queryClient, {
+      queryKey: key,
+      initialData: 5,
+      staleTime: 2000,
+    })
+
+    const unsubscribe2 = observer2.subscribe(() => undefined)
+
+    expect(consoleMock).toHaveBeenCalledTimes(0)
+    unsubscribe2()
+    consoleMock.mockRestore()
+  })
 })

packages/query-core/src/__tests__/queryCache.test.tsx

@@ -55,7 +55,7 @@ describe('queryCache', () => {
       const unsubScribeObserver = observer.subscribe(vi.fn())
 
       await waitFor(() => {
-        expect(events.length).toBe(8)
+        expect(events.length).toBe(9)
       })
 
       expect(events).toEqual([
@@ -67,6 +67,7 @@ describe('queryCache', () => {
         'observerResultsUpdated', // 6. Observer result updated -> success
         'updated', // 7. Query updated -> success
         'observerResultsUpdated', // 8. Observer result updated -> stale
+        'updated', // 9. Query updated -> stale
       ])
 
       queries.forEach((query) => {
@@ -165,6 +166,7 @@ describe('queryCache', () => {
       await queryClient.prefetchQuery({
         queryKey: key1,
         queryFn: () => 'data1',
+        staleTime: 100,
       })
       await queryClient.prefetchQuery({
         queryKey: key2,
@@ -173,6 +175,7 @@ describe('queryCache', () => {
       await queryClient.prefetchQuery({
         queryKey: [{ a: 'a', b: 'b' }],
         queryFn: () => 'data3',
+        staleTime: 100,
       })
       await queryClient.prefetchQuery({
         queryKey: ['posts', 1],

packages/query-core/src/__tests__/queryClient.test.tsx

@@ -655,49 +655,85 @@ describe('queryClient', () => {
       const key = queryKey()
 
       queryClient.setQueryData(key, 'og')
-      const fetchFn = () => Promise.resolve('new')
+      const fetchFn = vi.fn().mockImplementation(() => Promise.resolve('new'))
       const first = await queryClient.fetchQuery({
         queryKey: key,
         queryFn: fetchFn,
         initialData: 'initial',
         staleTime: 100,
       })
       expect(first).toBe('og')
+      expect(fetchFn).toHaveBeenCalledTimes(0)
     })
 
     test('should only fetch if the data is older then the given stale time', async () => {
       const key = queryKey()
 
-      let count = 0
-      const fetchFn = () => ++count
+      const fetchFn = vi.fn().mockImplementation(() => null)
 
-      queryClient.setQueryData(key, count)
-      const first = await queryClient.fetchQuery({
+      queryClient.setQueryData(key, 'data')
+      await queryClient.fetchQuery({
         queryKey: key,
         queryFn: fetchFn,
         staleTime: 100,
       })
+      // no fetch because we have fresh data (not older than 100ms)
+      expect(fetchFn).toHaveBeenCalledTimes(0)
       await sleep(11)
-      const second = await queryClient.fetchQuery({
+      await queryClient.fetchQuery({
         queryKey: key,
         queryFn: fetchFn,
         staleTime: 10,
       })
-      const third = await queryClient.fetchQuery({
+      // fetch because staleTime is now 10ms and we have waited 11ms already
+      expect(fetchFn).toHaveBeenCalledTimes(1)
+      await queryClient.fetchQuery({
         queryKey: key,
         queryFn: fetchFn,
         staleTime: 10,
       })
+      // no additional fetch because the data is still fresh
+      expect(fetchFn).toHaveBeenCalledTimes(1)
       await sleep(11)
-      const fourth = await queryClient.fetchQuery({
+      await queryClient.fetchQuery({
         queryKey: key,
         queryFn: fetchFn,
         staleTime: 10,
       })
-      expect(first).toBe(0)
-      expect(second).toBe(1)
-      expect(third).toBe(1)
-      expect(fourth).toBe(2)
+      // another fetch after another sleep because the data is now stale
+      expect(fetchFn).toHaveBeenCalledTimes(2)
+    })
+
+    test('should fetch if data has been manually invalidated', async () => {
+      const key = queryKey()
+
+      const fetchFn = vi.fn().mockImplementation(() => null)
+
+      queryClient.setQueryDefaults(key, { staleTime: Infinity })
+      queryClient.setQueryData(key, 'data')
+
+      await queryClient.fetchQuery({
+        queryKey: key,
+        queryFn: fetchFn,
+        staleTime: 100,
+      })
+      // no fetch because we have fresh data (not older than 100ms)
+      expect(fetchFn).toHaveBeenCalledTimes(0)
+
+      // mark query as invalidated
+      await queryClient.invalidateQueries({
+        queryKey: key,
+        refetchType: 'none',
+      })
+
+      await queryClient.fetchQuery({
+        queryKey: key,
+        queryFn: fetchFn,
+        staleTime: 100,
+      })
+
+      // fetch because even if not stale by time, it's manually invalidated
+      expect(fetchFn).toHaveBeenCalledTimes(1)
     })
   })
 
@@ -1090,14 +1126,23 @@ describe('queryClient', () => {
     test('should be able to refetch all stale queries', async () => {
       const key1 = queryKey()
       const key2 = queryKey()
+      const key3 = queryKey()
       const queryFn1 = vi
         .fn<(...args: Array<unknown>) => string>()
         .mockReturnValue('data1')
       const queryFn2 = vi
         .fn<(...args: Array<unknown>) => string>()
         .mockReturnValue('data2')
+      const queryFn3 = vi
+        .fn<(...args: Array<unknown>) => string>()
+        .mockReturnValue('data3')
       await queryClient.fetchQuery({ queryKey: key1, queryFn: queryFn1 })
       await queryClient.fetchQuery({ queryKey: key2, queryFn: queryFn2 })
+      await queryClient.fetchQuery({
+        queryKey: key3,
+        queryFn: queryFn3,
+        staleTime: 1,
+      })
       const observer = new QueryObserver(queryClient, {
         queryKey: key1,
         queryFn: queryFn1,
@@ -1108,7 +1153,10 @@ describe('queryClient', () => {
       unsubscribe()
       // fetchQuery, observer mount, invalidation (cancels observer mount) and refetch
       expect(queryFn1).toHaveBeenCalledTimes(4)
-      expect(queryFn2).toHaveBeenCalledTimes(1)
+      // fetchQuery, refetch
+      expect(queryFn2).toHaveBeenCalledTimes(2)
+      // fetchQuery
+      expect(queryFn3).toHaveBeenCalledTimes(1)
     })
 
     test('should be able to refetch all stale and active queries', async () => {

packages/query-core/src/__tests__/queryObserver.test.tsx

@@ -663,12 +663,12 @@ describe('queryObserver', () => {
       results.push(x)
     })
     observer.setOptions({ queryKey: key, enabled: false, staleTime: 10 })
-    await queryClient.fetchQuery({ queryKey: key, queryFn })
+    await queryClient.fetchQuery({ queryKey: key, queryFn, staleTime: 1000 })
     await sleep(20)
     unsubscribe()
     expect(queryFn).toHaveBeenCalledTimes(1)
     expect(results.length).toBe(2)
-    expect(results[0]).toMatchObject({ isStale: false, data: undefined })
+    expect(results[0]).toMatchObject({ isStale: true, data: undefined })
     expect(results[1]).toMatchObject({ isStale: false, data: 'data' })
   })
 
@@ -1102,7 +1102,7 @@ describe('queryObserver', () => {
     unsubscribe()
   })
 
-  test('disabled observers should not be stale', async () => {
+  test('disabled observers should also be stale', async () => {
     const key = queryKey()
 
     const observer = new QueryObserver(queryClient, {
@@ -1111,7 +1111,7 @@ describe('queryObserver', () => {
     })
 
     const result = observer.getCurrentResult()
-    expect(result.isStale).toBe(false)
+    expect(result.isStale).toBe(true)
   })
 
   test('should allow staleTime as a function', async () => {

packages/query-core/src/__tests__/utils.test.tsx

@@ -8,6 +8,7 @@ import {
   partialMatchKey,
   replaceEqualDeep,
   shallowEqualObjects,
+  timeUntilStale,
 } from '../utils'
 import { Mutation } from '../mutation'
 import { createQueryClient } from './utils'
@@ -30,6 +31,15 @@ describe('core/utils', () => {
       expect(shallowEqualObjects({ a: 1 }, undefined)).toEqual(false)
     })
   })
+  describe('timeUntilStale', () => {
+    it('should work with Infinity', () => {
+      expect(timeUntilStale(25, Infinity)).toBe(Infinity)
+    })
+    it('should never go below zero', () => {
+      expect(timeUntilStale(25, -1)).toBe(0)
+      expect(timeUntilStale(25, -Infinity)).toBe(0)
+    })
+  })
   describe('isPlainObject', () => {
     it('should return `true` for a plain object', () => {
       expect(isPlainObject({})).toEqual(true)