diff --git a/packages/svelte-query/tests/createQuery.svelte.test.ts b/packages/svelte-query/tests/createQuery.svelte.test.ts index 2aa9f532169..d733970a158 100644 --- a/packages/svelte-query/tests/createQuery.svelte.test.ts +++ b/packages/svelte-query/tests/createQuery.svelte.test.ts @@ -1267,117 +1267,97 @@ describe('createQuery', () => { }), ) - it.todo( - 'should be able to set different stale times for a query', - async () => { - /** - * TODO: There's a super weird bug with this test, and I think it's caused by a race condition in query-core. - * - * If you add this to the top `updateResult` in `packages/query-core/src/queryObserver.ts:647`: - * ``` - * for (let i = 0; i < 10_000_000; i++) { - * continue - * } - * ``` - * - * This test will miraculously start to pass. I'm suspicious that there's some race condition between props - * being tracked and `updateResult` being called, but that _should_ be fixed by `notifyOnChangeProps: 'all'`, - * and that's not doing anything. - * - * This test will also start to magically pass if you put `$inspect(firstQuery)` before `vi.waitFor` near - * the end of the test. - */ + it('should be able to set different stale times for a query', async () => { + const key = ['test-key'] + const states1: Array> = [] + const states2: Array> = [] - const key = ['test-key'] - const states1: Array> = [] - const states2: Array> = [] + // Prefetch the query + const prefetchPromise = queryClient.prefetchQuery({ + queryKey: key, + queryFn: () => sleep(10).then(() => 'prefetch'), + }) + await vi.advanceTimersByTimeAsync(10) + await prefetchPromise - // Prefetch the query - await queryClient.prefetchQuery({ - queryKey: key, - queryFn: async () => { - await sleep(10) - return 'prefetch' - }, + expect(queryClient.getQueryState(key)?.data).toBe('prefetch') + // Advance time so secondQuery (staleTime: 10) sees prefetched data as stale + await vi.advanceTimersByTimeAsync(10) + + await withEffectRoot(async () => { + const firstQuery = createQuery( + () => ({ + queryKey: key, + queryFn: () => Promise.resolve('one'), + staleTime: 100, + }), + () => queryClient, + ) + + $effect(() => { + states1.push({ ...firstQuery }) }) - await vi.advanceTimersByTimeAsync(10) - expect(queryClient.getQueryState(key)?.data).toBe('prefetch') - - await withEffectRoot(async () => { - const firstQuery = createQuery( - () => ({ - queryKey: key, - queryFn: () => Promise.resolve('one'), - staleTime: 100, - }), - () => queryClient, - ) - - $effect(() => { - states1.push({ ...firstQuery }) - }) - - const secondQuery = createQuery( - () => ({ - queryKey: key, - queryFn: () => Promise.resolve('two'), - staleTime: 10, - }), - () => queryClient, - ) - - $effect(() => { - states2.push({ ...secondQuery }) - }) - - await vi.advanceTimersByTimeAsync(101) - expect(firstQuery).toMatchObject({ data: 'two', isStale: true }) - expect(secondQuery).toMatchObject({ data: 'two', isStale: true }) - - expect(states1).toMatchObject([ - // First render - { - data: 'prefetch', - isStale: false, - }, - // Second createQuery started fetching - { - data: 'prefetch', - isStale: false, - }, - // Second createQuery data came in - { - data: 'two', - isStale: false, - }, - // Data became stale after 100ms - { - data: 'two', - isStale: true, - }, - ]) + const secondQuery = createQuery( + () => ({ + queryKey: key, + queryFn: () => Promise.resolve('two'), + staleTime: 10, + }), + () => queryClient, + ) - expect(states2).toMatchObject([ - // First render, data is stale and starts fetching - { - data: 'prefetch', - isStale: true, - }, - // Second createQuery data came in - { - data: 'two', - isStale: false, - }, - // Data became stale after 10ms - { - data: 'two', - isStale: true, - }, - ]) - })() - }, - ) + $effect(() => { + states2.push({ ...secondQuery }) + }) + + // Wait for both staleTime to expire (100ms for firstQuery) + await vi.advanceTimersByTimeAsync(101) + expect(firstQuery).toMatchObject({ data: 'two', isStale: true }) + expect(secondQuery).toMatchObject({ data: 'two', isStale: true }) + + expect(states1).toMatchObject([ + // First render + { + data: 'prefetch', + isStale: false, + }, + // Second createQuery started fetching + { + data: 'prefetch', + isStale: false, + }, + // Second createQuery data came in + { + data: 'two', + isStale: false, + }, + // Data became stale after 100ms + { + data: 'two', + isStale: true, + }, + ]) + + expect(states2).toMatchObject([ + // First render, data is stale and starts fetching + { + data: 'prefetch', + isStale: true, + }, + // Second createQuery data came in + { + data: 'two', + isStale: false, + }, + // Data became stale after 10ms + { + data: 'two', + isStale: true, + }, + ]) + })() + }) it( 'should re-render when a query becomes stale', @@ -1535,10 +1515,7 @@ describe('createQuery', () => { withEffectRoot(() => { const key = ['test-key'] - const queryFn = async () => { - await sleep(10) - return 'data1' - } + const queryFn = () => sleep(10).then(() => 'data1') // Create two queries with the same key but different options createQuery( diff --git a/packages/svelte-query/tests/useIsFetching/Query.svelte b/packages/svelte-query/tests/useIsFetching/Query.svelte index 3a2eeb669eb..f2acbe0df58 100644 --- a/packages/svelte-query/tests/useIsFetching/Query.svelte +++ b/packages/svelte-query/tests/useIsFetching/Query.svelte @@ -6,10 +6,7 @@ const query = createQuery(() => ({ queryKey: ['test'], - queryFn: async () => { - await sleep(10) - return 'test' - }, + queryFn: () => sleep(10).then(() => 'test'), enabled: ready, })) diff --git a/packages/svelte-query/tests/useIsMutating/Query.svelte b/packages/svelte-query/tests/useIsMutating/Query.svelte index f9cc2504b03..f7641b15050 100644 --- a/packages/svelte-query/tests/useIsMutating/Query.svelte +++ b/packages/svelte-query/tests/useIsMutating/Query.svelte @@ -4,10 +4,7 @@ const mutation = createMutation(() => ({ mutationKey: ['mutation-1'], - mutationFn: async () => { - await sleep(10) - return 'data' - }, + mutationFn: () => sleep(10).then(() => 'data'), }))