(undefined)
+
+ function Page() {
+ const { data = '' } = createMutation(() => Promise.resolve('mutation'))
+
+ return (
+
+
{data}
+
+ )
+ }
+
+ render(() => (
+
+ error boundary
}>
+
+ ,
+
+ ))
+
+ await waitFor(() => screen.getByText('error boundary'))
+ })
+ })
+
+ it('should call mutate callbacks only for the last observer', async () => {
+ const onSuccess = jest.fn()
+ const onSuccessMutate = jest.fn()
+ const onSettled = jest.fn()
+ const onSettledMutate = jest.fn()
+ let count = 0
+
+ function Page() {
+ const mutation = createMutation(
+ async (_text: string) => {
+ count++
+ await sleep(10)
+ return `result${count}`
+ },
+ {
+ onSuccess,
+ onSettled,
+ },
+ )
+
+ return (
+
+
+ mutation.mutate('todo', {
+ onSuccess: onSuccessMutate,
+ onSettled: onSettledMutate,
+ })
+ }
+ >
+ mutate
+
+
+ data: {mutation.data ?? 'null'}, status: {mutation.status}
+
+
+
+ ))
+
+ await screen.findByText('data: null, status: idle')
+
+ fireEvent.click(screen.getByRole('button', { name: /mutate/i }))
+ fireEvent.click(screen.getByRole('button', { name: /mutate/i }))
+
+ await screen.findByText('data: result2, status: success')
+
+ expect(count).toBe(2)
+
+ expect(onSuccess).toHaveBeenCalledTimes(2)
+ expect(onSettled).toHaveBeenCalledTimes(2)
+ expect(onSuccessMutate).toHaveBeenCalledTimes(1)
+ expect(onSuccessMutate).toHaveBeenCalledWith('result2', 'todo', undefined)
+ expect(onSettledMutate).toHaveBeenCalledTimes(1)
+ expect(onSettledMutate).toHaveBeenCalledWith(
+ 'result2',
+ null,
+ 'todo',
+ undefined,
+ )
+ })
+
+ it('should go to error state if onSuccess callback errors', async () => {
+ const error = new Error('error from onSuccess')
+ const onError = jest.fn()
+
+ function Page() {
+ const mutation = createMutation(
+ async (_text: string) => {
+ await sleep(10)
+ return 'result'
+ },
+ {
+ onSuccess: () => Promise.reject(error),
+ onError,
+ },
+ )
+
+ return (
+
+
mutation.mutate('todo')}>mutate
+
status: {mutation.status}
+
+
+ ))
+
+ await screen.findByText('status: idle')
+
+ screen.getByRole('button', { name: /mutate/i }).click()
+
+ await screen.findByText('status: error')
+
+ expect(onError).toHaveBeenCalledWith(error, 'todo', undefined)
+ })
+
+ it('should go to error state if onError callback errors', async () => {
+ const error = new Error('error from onError')
+ const mutateFnError = new Error('mutateFnError')
+
+ function Page() {
+ const mutation = createMutation(
+ async (_text: string) => {
+ await sleep(10)
+ throw mutateFnError
+ },
+ {
+ onError: () => Promise.reject(error),
+ },
+ )
+
+ return (
+
+
mutation.mutate('todo')}>mutate
+
+ error:{' '}
+ {mutation.error instanceof Error ? mutation.error.message : 'null'},
+ status: {mutation.status}
+
+
+
+ ))
+
+ await screen.findByText('error: null, status: idle')
+
+ screen.getByRole('button', { name: /mutate/i }).click()
+
+ await screen.findByText('error: mutateFnError, status: error')
+ })
+
+ it('should go to error state if onSettled callback errors', async () => {
+ const error = new Error('error from onSettled')
+ const mutateFnError = new Error('mutateFnError')
+ const onError = jest.fn()
+
+ function Page() {
+ const mutation = createMutation(
+ async (_text: string) => {
+ await sleep(10)
+ throw mutateFnError
+ },
+ {
+ onSettled: () => Promise.reject(error),
+ onError,
+ },
+ )
+
+ return (
+
+
mutation.mutate('todo')}>mutate
+
+ error:{' '}
+ {mutation.error instanceof Error ? mutation.error.message : 'null'},
+ status: {mutation.status}
+
+
+
+ ))
+
+ await screen.findByText('error: null, status: idle')
+
+ screen.getByRole('button', { name: /mutate/i }).click()
+
+ await screen.findByText('error: mutateFnError, status: error')
+
+ expect(onError).toHaveBeenCalledWith(mutateFnError, 'todo', undefined)
+ })
+})
diff --git a/packages/solid-query/src/__tests__/createQueries.test.tsx b/packages/solid-query/src/__tests__/createQueries.test.tsx
new file mode 100644
index 0000000000..836943a968
--- /dev/null
+++ b/packages/solid-query/src/__tests__/createQueries.test.tsx
@@ -0,0 +1,1163 @@
+import { fireEvent, render, screen, waitFor } from 'solid-testing-library'
+
+import * as QueriesObserverModule from '../../../query-core/src/queriesObserver'
+
+import type { QueryFunctionContext } from '@tanstack/query-core'
+import {
+ createContext,
+ createMemo,
+ createRenderEffect,
+ createSignal,
+ ErrorBoundary,
+} from 'solid-js'
+import type {
+ CreateQueryOptions,
+ CreateQueryResult,
+ QueryClient,
+ QueryFunction,
+ QueryObserverResult,
+ SolidQueryKey,
+} from '..'
+import {
+ createQueries,
+ QueriesObserver,
+ QueryCache,
+ QueryClientProvider,
+} from '..'
+import {
+ createQueryClient,
+ expectType,
+ expectTypeNotAny,
+ queryKey,
+ sleep,
+} from './utils'
+
+describe('useQueries', () => {
+ const queryCache = new QueryCache()
+ const queryClient = createQueryClient({ queryCache })
+
+ it('should return the correct states', async () => {
+ const key1 = queryKey()
+ const key2 = queryKey()
+ const results: CreateQueryResult[][] = []
+
+ function Page() {
+ const result = createQueries({
+ queries: [
+ {
+ queryKey: key1,
+ queryFn: async () => {
+ await sleep(10)
+ return 1
+ },
+ },
+ {
+ queryKey: key2,
+ queryFn: async () => {
+ await sleep(100)
+ return 2
+ },
+ },
+ ],
+ })
+
+ createRenderEffect(() => {
+ results.push([...result])
+ })
+
+ return (
+
+
+ data1: {String(result[0].data ?? 'null')}, data2:{' '}
+ {String(result[1].data ?? 'null')}
+
+
+
+ ))
+
+ await waitFor(() => screen.getByText('data1: 1, data2: 2'))
+
+ expect(results.length).toBe(3)
+ expect(results[0]).toMatchObject([{ data: undefined }, { data: undefined }])
+ expect(results[1]).toMatchObject([{ data: 1 }, { data: undefined }])
+ expect(results[2]).toMatchObject([{ data: 1 }, { data: 2 }])
+ })
+
+ it('should keep previous data if amount of queries is the same', async () => {
+ const key1 = queryKey()
+ const key2 = queryKey()
+ const states: CreateQueryResult[][] = []
+
+ function Page() {
+ const [count, setCount] = createSignal(1)
+ const result = createQueries({
+ queries: [
+ {
+ queryKey: () => [key1(), count()],
+ keepPreviousData: true,
+ queryFn: async () => {
+ await sleep(10)
+ return count() * 2
+ },
+ },
+ {
+ queryKey: () => [key2(), count()],
+ keepPreviousData: true,
+ queryFn: async () => {
+ await sleep(35)
+ return count() * 5
+ },
+ },
+ ],
+ })
+
+ createRenderEffect(() => {
+ states.push([...result])
+ })
+
+ const isFetching = createMemo(() => result.some((r) => r.isFetching))
+
+ return (
+
+
+ data1: {String(result[0].data ?? 'null')}, data2:{' '}
+ {String(result[1].data ?? 'null')}
+
+
isFetching: {String(isFetching())}
+
setCount((prev) => prev + 1)}>inc
+
+
+ ))
+
+ await waitFor(() => screen.getByText('data1: 2, data2: 5'))
+ fireEvent.click(screen.getByRole('button', { name: /inc/i }))
+
+ await waitFor(() => screen.getByText('data1: 4, data2: 10'))
+ await waitFor(() => screen.getByText('isFetching: false'))
+
+ expect(states[states.length - 1]).toMatchObject([
+ { status: 'success', data: 4, isPreviousData: false, isFetching: false },
+ { status: 'success', data: 10, isPreviousData: false, isFetching: false },
+ ])
+ })
+
+ it('should keep previous data for variable amounts of useQueries', async () => {
+ const key = queryKey()
+ const states: CreateQueryResult[][] = []
+
+ function Page() {
+ const [count, setCount] = createSignal(2)
+ const result = createQueries({
+ // TODO(lukemurray): reactive queries doesn't appear to work
+ get queries() {
+ return Array.from({ length: count() }, (_, i) => ({
+ queryKey: () => [key(), count(), i + 1],
+ keepPreviousData: true,
+ queryFn: async () => {
+ await sleep(35 * (i + 1))
+ return (i + 1) * count() * 2
+ },
+ }))
+ },
+ })
+
+ createRenderEffect(() => {
+ states.push([...result])
+ })
+
+ const isFetching = createMemo(() => result.some((r) => r.isFetching))
+
+ return (
+
+
data: {result.map((it) => it.data).join(',')}
+
isFetching: {String(isFetching())}
+
setCount((prev) => prev + 1)}>inc
+
+
+ ))
+
+ await waitFor(() => screen.getByText('data: 4,8'))
+ fireEvent.click(screen.getByRole('button', { name: /inc/i }))
+
+ await waitFor(() => screen.getByText('data: 6,12,18'))
+ await waitFor(() => screen.getByText('isFetching: false'))
+
+ expect(states[states.length - 1]).toMatchObject([
+ { status: 'success', data: 6, isPreviousData: false, isFetching: false },
+ { status: 'success', data: 12, isPreviousData: false, isFetching: false },
+ { status: 'success', data: 18, isPreviousData: false, isFetching: false },
+ ])
+ })
+
+ it('should keep previous data when switching between queries', async () => {
+ const key = queryKey()
+ const states: CreateQueryResult[][] = []
+
+ function Page() {
+ const [series1, setSeries1] = createSignal(1)
+ const [series2, setSeries2] = createSignal(2)
+ const ids = [series1, series2]
+
+ const result = createQueries({
+ queries: ids.map((id) => {
+ return {
+ queryKey: () => [key(), id()],
+ queryFn: async () => {
+ await sleep(5)
+ return id() * 5
+ },
+ keepPreviousData: true,
+ }
+ }),
+ })
+
+ createRenderEffect(() => {
+ states.push([...result])
+ })
+
+ const isFetching = createMemo(() => result.some((r) => r.isFetching))
+
+ return (
+
+
+ data1: {String(result[0]?.data ?? 'null')}, data2:{' '}
+ {String(result[1]?.data ?? 'null')}
+
+
isFetching: {String(isFetching())}
+
setSeries2(3)}>setSeries2
+
setSeries1(2)}>setSeries1
+
+
+ ))
+
+ await waitFor(() => screen.getByText('data1: 5, data2: 10'))
+ fireEvent.click(screen.getByRole('button', { name: /setSeries2/i }))
+
+ await waitFor(() => screen.getByText('data1: 5, data2: 15'))
+ fireEvent.click(screen.getByRole('button', { name: /setSeries1/i }))
+
+ await waitFor(() => screen.getByText('data1: 10, data2: 15'))
+ await waitFor(() => screen.getByText('isFetching: false'))
+
+ expect(states[states.length - 1]).toMatchObject([
+ { status: 'success', data: 10, isPreviousData: false, isFetching: false },
+ { status: 'success', data: 15, isPreviousData: false, isFetching: false },
+ ])
+ })
+
+ it('should not go to infinite render loop with previous data when toggling queries', async () => {
+ const key = queryKey()
+ const states: CreateQueryResult[][] = []
+
+ function Page() {
+ const [enableId1, setEnableId1] = createSignal(true)
+ const ids = createMemo(() => (enableId1() ? [1, 2] : [2]))
+
+ const result = createQueries({
+ // TODO(lukemurray): same issue queries should be reactive
+ get queries() {
+ return ids().map((id) => {
+ return {
+ queryKey: () => [key(), id],
+ queryFn: async () => {
+ await sleep(5)
+ return id * 5
+ },
+ keepPreviousData: true,
+ }
+ })
+ },
+ })
+
+ createRenderEffect(() => {
+ states.push([...result])
+ })
+
+ const text = createMemo(() => {
+ return result
+ .map((r, idx) => `data${idx + 1}: ${r.data ?? 'null'}`)
+ .join(' ')
+ })
+
+ const isFetching = createMemo(() => result.some((r) => r.isFetching))
+
+ return (
+
+
{text()}
+
isFetching: {String(isFetching())}
+
setEnableId1(false)}>set1Disabled
+
setEnableId1(true)}>set2Enabled
+
+
+ ))
+
+ await waitFor(() => screen.getByText('data1: 5 data2: 10'))
+ fireEvent.click(screen.getByRole('button', { name: /set1Disabled/i }))
+
+ await waitFor(() => screen.getByText('data1: 10'))
+ await waitFor(() => screen.getByText('isFetching: false'))
+ fireEvent.click(screen.getByRole('button', { name: /set2Enabled/i }))
+
+ await waitFor(() => screen.getByText('data1: 5 data2: 10'))
+ await waitFor(() => screen.getByText('isFetching: false'))
+
+ await waitFor(() => expect(states.length).toBe(5))
+
+ expect(states[0]).toMatchObject([
+ {
+ status: 'loading',
+ data: undefined,
+ isPreviousData: false,
+ isFetching: true,
+ },
+ {
+ status: 'loading',
+ data: undefined,
+ isPreviousData: false,
+ isFetching: true,
+ },
+ ])
+ expect(states[1]).toMatchObject([
+ { status: 'success', data: 5, isPreviousData: false, isFetching: false },
+ { status: 'success', data: 10, isPreviousData: false, isFetching: false },
+ ])
+ expect(states[2]).toMatchObject([
+ { status: 'success', data: 10, isPreviousData: false, isFetching: false },
+ ])
+ expect(states[3]).toMatchObject([
+ { status: 'success', data: 5, isPreviousData: false, isFetching: true },
+ { status: 'success', data: 10, isPreviousData: false, isFetching: false },
+ ])
+ expect(states[4]).toMatchObject([
+ { status: 'success', data: 5, isPreviousData: false, isFetching: false },
+ { status: 'success', data: 10, isPreviousData: false, isFetching: false },
+ ])
+ })
+
+ it('handles type parameter - tuple of tuples', async () => {
+ const key1 = queryKey()
+ const key2 = queryKey()
+ const key3 = queryKey()
+
+ // @ts-expect-error (Page component is not rendered)
+ // eslint-disable-next-line
+ function Page() {
+ const result1 = createQueries<[[number], [string], [string[], boolean]]>({
+ queries: [
+ {
+ queryKey: key1,
+ queryFn: () => 1,
+ },
+ {
+ queryKey: key2,
+ queryFn: () => 'string',
+ },
+ {
+ queryKey: key3,
+ queryFn: () => ['string[]'],
+ },
+ ],
+ })
+ expectType>(result1[0])
+ expectType>(result1[1])
+ expectType>(result1[2])
+ expectType(result1[0].data)
+ expectType(result1[1].data)
+ expectType(result1[2].data)
+ expectType(result1[2].error)
+
+ // TData (3rd element) takes precedence over TQueryFnData (1st element)
+ const result2 = createQueries<
+ [[string, unknown, string], [string, unknown, number]]
+ >({
+ queries: [
+ {
+ queryKey: key1,
+ queryFn: () => 'string',
+ select: (a) => {
+ expectType(a)
+ expectTypeNotAny(a)
+ return a.toLowerCase()
+ },
+ },
+ {
+ queryKey: key2,
+ queryFn: () => 'string',
+ select: (a) => {
+ expectType(a)
+ expectTypeNotAny(a)
+ return parseInt(a)
+ },
+ },
+ ],
+ })
+ expectType>(result2[0])
+ expectType>(result2[1])
+ expectType(result2[0].data)
+ expectType(result2[1].data)
+
+ // types should be enforced
+ createQueries<[[string, unknown, string], [string, boolean, number]]>({
+ queries: [
+ {
+ queryKey: key1,
+ queryFn: () => 'string',
+ select: (a) => {
+ expectType(a)
+ expectTypeNotAny(a)
+ return a.toLowerCase()
+ },
+ onSuccess: (a) => {
+ expectType(a)
+ expectTypeNotAny(a)
+ },
+ placeholderData: 'string',
+ // @ts-expect-error (initialData: string)
+ initialData: 123,
+ },
+ {
+ queryKey: key2,
+ queryFn: () => 'string',
+ select: (a) => {
+ expectType(a)
+ expectTypeNotAny(a)
+ return parseInt(a)
+ },
+ onSuccess: (a) => {
+ expectType(a)
+ expectTypeNotAny(a)
+ },
+ onError: (e) => {
+ expectType(e)
+ expectTypeNotAny(e)
+ },
+ placeholderData: 'string',
+ // @ts-expect-error (initialData: string)
+ initialData: 123,
+ },
+ ],
+ })
+
+ // field names should be enforced
+ createQueries<[[string]]>({
+ queries: [
+ {
+ queryKey: key1,
+ queryFn: () => 'string',
+ // @ts-expect-error (invalidField)
+ someInvalidField: [],
+ },
+ ],
+ })
+ }
+ })
+
+ it('handles type parameter - tuple of objects', async () => {
+ const key1 = queryKey()
+ const key2 = queryKey()
+ const key3 = queryKey()
+
+ // @ts-expect-error (Page component is not rendered)
+ // eslint-disable-next-line
+ function Page() {
+ const result1 = createQueries<
+ [
+ { queryFnData: number },
+ { queryFnData: string },
+ { queryFnData: string[]; error: boolean },
+ ]
+ >({
+ queries: [
+ {
+ queryKey: key1,
+ queryFn: () => 1,
+ },
+ {
+ queryKey: key2,
+ queryFn: () => 'string',
+ },
+ {
+ queryKey: key3,
+ queryFn: () => ['string[]'],
+ },
+ ],
+ })
+ expectType>(result1[0])
+ expectType>(result1[1])
+ expectType>(result1[2])
+ expectType(result1[0].data)
+ expectType(result1[1].data)
+ expectType(result1[2].data)
+ expectType(result1[2].error)
+
+ // TData (data prop) takes precedence over TQueryFnData (queryFnData prop)
+ const result2 = createQueries<
+ [
+ { queryFnData: string; data: string },
+ { queryFnData: string; data: number },
+ ]
+ >({
+ queries: [
+ {
+ queryKey: key1,
+ queryFn: () => 'string',
+ select: (a) => {
+ expectType(a)
+ expectTypeNotAny(a)
+ return a.toLowerCase()
+ },
+ },
+ {
+ queryKey: key2,
+ queryFn: () => 'string',
+ select: (a) => {
+ expectType(a)
+ expectTypeNotAny(a)
+ return parseInt(a)
+ },
+ },
+ ],
+ })
+ expectType>(result2[0])
+ expectType>(result2[1])
+ expectType(result2[0].data)
+ expectType(result2[1].data)
+
+ // can pass only TData (data prop) although TQueryFnData will be left unknown
+ const result3 = createQueries<[{ data: string }, { data: number }]>({
+ queries: [
+ {
+ queryKey: key1,
+ queryFn: () => 'string',
+ select: (a) => {
+ expectType(a)
+ expectTypeNotAny(a)
+ return a as string
+ },
+ },
+ {
+ queryKey: key2,
+ queryFn: () => 'string',
+ select: (a) => {
+ expectType(a)
+ expectTypeNotAny(a)
+ return a as number
+ },
+ },
+ ],
+ })
+ expectType>(result3[0])
+ expectType>(result3[1])
+ expectType(result3[0].data)
+ expectType(result3[1].data)
+
+ // types should be enforced
+ createQueries<
+ [
+ { queryFnData: string; data: string },
+ { queryFnData: string; data: number; error: boolean },
+ ]
+ >({
+ queries: [
+ {
+ queryKey: key1,
+ queryFn: () => 'string',
+ select: (a) => {
+ expectType(a)
+ expectTypeNotAny(a)
+ return a.toLowerCase()
+ },
+ onSuccess: (a) => {
+ expectType(a)
+ expectTypeNotAny(a)
+ },
+ placeholderData: 'string',
+ // @ts-expect-error (initialData: string)
+ initialData: 123,
+ },
+ {
+ queryKey: key2,
+ queryFn: () => 'string',
+ select: (a) => {
+ expectType(a)
+ expectTypeNotAny(a)
+ return parseInt(a)
+ },
+ onSuccess: (a) => {
+ expectType(a)
+ expectTypeNotAny(a)
+ },
+ onError: (e) => {
+ expectType(e)
+ expectTypeNotAny(e)
+ },
+ placeholderData: 'string',
+ // @ts-expect-error (initialData: string)
+ initialData: 123,
+ },
+ ],
+ })
+
+ // field names should be enforced
+ createQueries<[{ queryFnData: string }]>({
+ queries: [
+ {
+ queryKey: key1,
+ queryFn: () => 'string',
+ // @ts-expect-error (invalidField)
+ someInvalidField: [],
+ },
+ ],
+ })
+ }
+ })
+
+ it('handles array literal without type parameter to infer result type', async () => {
+ const key1 = queryKey()
+ const key2 = queryKey()
+ const key3 = queryKey()
+ const key4 = queryKey()
+
+ // @ts-expect-error (Page component is not rendered)
+ // eslint-disable-next-line
+ function Page() {
+ // Array.map preserves TQueryFnData
+ const result1 = createQueries({
+ queries: Array(50).map((_, i) => ({
+ queryKey: () => ['key', i] as const,
+ queryFn: () => i + 10,
+ })),
+ })
+ expectType[]>(result1)
+ expectType(result1[0]?.data)
+
+ // Array.map preserves TData
+ const result2 = createQueries({
+ queries: Array(50).map((_, i) => ({
+ queryKey: () => ['key', i] as const,
+ queryFn: () => i + 10,
+ select: (data: number) => data.toString(),
+ })),
+ })
+ expectType[]>(result2)
+
+ const result3 = createQueries({
+ queries: [
+ {
+ queryKey: key1,
+ queryFn: () => 1,
+ },
+ {
+ queryKey: key2,
+ queryFn: () => 'string',
+ },
+ {
+ queryKey: key3,
+ queryFn: () => ['string[]'],
+ select: () => 123,
+ },
+ ],
+ })
+ expectType>(result3[0])
+ expectType>(result3[1])
+ expectType>(result3[2])
+ expectType(result3[0].data)
+ expectType(result3[1].data)
+ // select takes precedence over queryFn
+ expectType(result3[2].data)
+
+ // initialData/placeholderData are enforced
+ createQueries({
+ queries: [
+ {
+ queryKey: key1,
+ queryFn: () => 'string',
+ placeholderData: 'string',
+ // @ts-expect-error (initialData: string)
+ initialData: 123,
+ },
+ {
+ queryKey: key2,
+ queryFn: () => 123,
+ // @ts-expect-error (placeholderData: number)
+ placeholderData: 'string',
+ initialData: 123,
+ },
+ ],
+ })
+
+ // select / onSuccess / onSettled params are "indirectly" enforced
+ createQueries({
+ queries: [
+ // unfortunately TS will not suggest the type for you
+ {
+ queryKey: key1,
+ queryFn: () => 'string',
+ // @ts-expect-error (noImplicitAny)
+ onSuccess: (a) => null,
+ // @ts-expect-error (noImplicitAny)
+ onSettled: (a) => null,
+ },
+ // however you can add a type to the callback
+ {
+ queryKey: key2,
+ queryFn: () => 'string',
+ onSuccess: (a: string) => {
+ expectType(a)
+ expectTypeNotAny(a)
+ },
+ onSettled: (a: string | undefined) => {
+ expectType(a)
+ expectTypeNotAny(a)
+ },
+ },
+ // the type you do pass is enforced
+ {
+ queryKey: key3,
+ queryFn: () => 'string',
+ // @ts-expect-error (only accepts string)
+ onSuccess: (a: number) => null,
+ },
+ {
+ queryKey: key4,
+ queryFn: () => 'string',
+ select: (a: string) => parseInt(a),
+ // @ts-expect-error (select is defined => only accepts number)
+ onSuccess: (a: string) => null,
+ onSettled: (a: number | undefined) => {
+ expectType(a)
+ expectTypeNotAny(a)
+ },
+ },
+ ],
+ })
+
+ // callbacks are also indirectly enforced with Array.map
+ createQueries({
+ // @ts-expect-error (onSuccess only accepts string)
+ queries: Array(50).map((_, i) => ({
+ queryKey: ['key', i] as const,
+ queryFn: () => i + 10,
+ select: (data: number) => data.toString(),
+ onSuccess: (_data: number) => null,
+ })),
+ })
+ createQueries({
+ queries: Array(50).map((_, i) => ({
+ queryKey: () => ['key', i] as const,
+ queryFn: () => i + 10,
+ select: (data: number) => data.toString(),
+ onSuccess: (_data: string) => null,
+ })),
+ })
+
+ // results inference works when all the handlers are defined
+ const result4 = createQueries({
+ queries: [
+ {
+ queryKey: key1,
+ queryFn: () => 'string',
+ // @ts-expect-error (noImplicitAny)
+ onSuccess: (a) => null,
+ // @ts-expect-error (noImplicitAny)
+ onSettled: (a) => null,
+ },
+ {
+ queryKey: key2,
+ queryFn: () => 'string',
+ onSuccess: (a: string) => {
+ expectType(a)
+ expectTypeNotAny(a)
+ },
+ onSettled: (a: string | undefined) => {
+ expectType(a)
+ expectTypeNotAny(a)
+ },
+ },
+ {
+ queryKey: key4,
+ queryFn: () => 'string',
+ select: (a: string) => parseInt(a),
+ onSuccess: (_a: number) => null,
+ onSettled: (a: number | undefined) => {
+ expectType(a)
+ expectTypeNotAny(a)
+ },
+ },
+ ],
+ })
+ expectType>(result4[0])
+ expectType>(result4[1])
+ expectType>(result4[2])
+
+ // handles when queryFn returns a Promise
+ const result5 = createQueries({
+ queries: [
+ {
+ queryKey: key1,
+ queryFn: () => Promise.resolve('string'),
+ onSuccess: (a: string) => {
+ expectType(a)
+ expectTypeNotAny(a)
+ },
+ // @ts-expect-error (refuses to accept a Promise)
+ onSettled: (a: Promise) => null,
+ },
+ ],
+ })
+ expectType>(result5[0])
+
+ // Array as const does not throw error
+ const result6 = createQueries({
+ queries: [
+ {
+ queryKey: () => ['key1'],
+ queryFn: () => 'string',
+ },
+ {
+ queryKey: () => ['key1'],
+ queryFn: () => 123,
+ },
+ ],
+ } as const)
+ expectType>(result6[0])
+ expectType>(result6[1])
+
+ // field names should be enforced - array literal
+ createQueries({
+ queries: [
+ {
+ queryKey: key1,
+ queryFn: () => 'string',
+ // @ts-expect-error (invalidField)
+ someInvalidField: [],
+ },
+ ],
+ })
+
+ // field names should be enforced - Array.map() result
+ createQueries({
+ // @ts-expect-error (invalidField)
+ queries: Array(10).map(() => ({
+ someInvalidField: '',
+ })),
+ })
+
+ // field names should be enforced - array literal
+ createQueries({
+ queries: [
+ {
+ queryKey: key1,
+ queryFn: () => 'string',
+ // @ts-expect-error (invalidField)
+ someInvalidField: [],
+ },
+ ],
+ })
+
+ // supports queryFn using fetch() to return Promise - Array.map() result
+ createQueries({
+ queries: Array(50).map((_, i) => ({
+ queryKey: () => ['key', i] as const,
+ queryFn: () =>
+ fetch('return Promise').then((resp) => resp.json()),
+ })),
+ })
+
+ // supports queryFn using fetch() to return Promise - array literal
+ createQueries({
+ queries: [
+ {
+ queryKey: key1,
+ queryFn: () =>
+ fetch('return Promise').then((resp) => resp.json()),
+ },
+ ],
+ })
+ }
+ })
+
+ it('handles strongly typed queryFn factories and useQueries wrappers', () => {
+ // QueryKey + queryFn factory
+ type QueryKeyA = ['queryA']
+ const getQueryKeyA = (): QueryKeyA => ['queryA']
+ type GetQueryFunctionA = () => QueryFunction
+ const getQueryFunctionA: GetQueryFunctionA = () => async () => {
+ return 1
+ }
+ type SelectorA = (data: number) => [number, string]
+ const getSelectorA = (): SelectorA => (data) => [data, data.toString()]
+
+ type QueryKeyB = ['queryB', string]
+ const getQueryKeyB = (id: string): QueryKeyB => ['queryB', id]
+ type GetQueryFunctionB = () => QueryFunction
+ const getQueryFunctionB: GetQueryFunctionB = () => async () => {
+ return '1'
+ }
+ type SelectorB = (data: string) => [string, number]
+ const getSelectorB = (): SelectorB => (data) => [data, +data]
+
+ // Wrapper with strongly typed array-parameter
+ function useWrappedQueries<
+ TQueryFnData,
+ TError,
+ TData,
+ TQueryKey extends SolidQueryKey,
+ >(queries: CreateQueryOptions[]) {
+ return createQueries({
+ queries: queries.map(
+ // no need to type the mapped query
+ (query) => {
+ const { queryFn: fn, queryKey: key, onError: err } = query
+ expectType<
+ QueryFunction> | undefined
+ >(fn)
+ return {
+ queryKey: key,
+ onError: err,
+ queryFn: fn
+ ? (ctx: QueryFunctionContext>) => {
+ expectType>(ctx.queryKey)
+ return fn.call({}, ctx)
+ }
+ : undefined,
+ }
+ },
+ ),
+ })
+ }
+
+ // @ts-expect-error (Page component is not rendered)
+ // eslint-disable-next-line
+ function Page() {
+ const result = createQueries({
+ queries: [
+ {
+ queryKey: () => getQueryKeyA(),
+ queryFn: getQueryFunctionA(),
+ },
+ {
+ queryKey: () => getQueryKeyB('id'),
+ queryFn: getQueryFunctionB(),
+ },
+ ],
+ })
+ expectType>(result[0])
+ expectType>(result[1])
+
+ const withSelector = createQueries({
+ queries: [
+ {
+ queryKey: () => getQueryKeyA(),
+ queryFn: getQueryFunctionA(),
+ select: getSelectorA(),
+ },
+ {
+ queryKey: () => getQueryKeyB('id'),
+ queryFn: getQueryFunctionB(),
+ select: getSelectorB(),
+ },
+ ],
+ })
+ expectType>(
+ withSelector[0],
+ )
+ expectType>(
+ withSelector[1],
+ )
+
+ const withWrappedQueries = useWrappedQueries(
+ Array(10).map(() => ({
+ queryKey: () => getQueryKeyA(),
+ queryFn: getQueryFunctionA(),
+ select: getSelectorA(),
+ })),
+ )
+
+ expectType[]>(
+ withWrappedQueries,
+ )
+ }
+ })
+
+ it('should not change state if unmounted', async () => {
+ const key1 = queryKey()
+
+ // We have to mock the QueriesObserver to not unsubscribe
+ // the listener when the component is unmounted
+ class QueriesObserverMock extends QueriesObserver {
+ subscribe(listener: any) {
+ super.subscribe(listener)
+ return () => void 0
+ }
+ }
+
+ const QueriesObserverSpy = jest
+ .spyOn(QueriesObserverModule, 'QueriesObserver')
+ .mockImplementation((fn) => {
+ return new QueriesObserverMock(fn)
+ })
+
+ function Queries() {
+ createQueries({
+ queries: [
+ {
+ queryKey: key1,
+ queryFn: async () => {
+ await sleep(10)
+ return 1
+ },
+ },
+ ],
+ })
+
+ return (
+
+ queries
+
+ )
+ }
+
+ function Page() {
+ const [mounted, setMounted] = createSignal(true)
+
+ return (
+
+ setMounted(false)}>unmount
+ {mounted() &&
+ )
+ }
+
+ render(() => (
+
+
+ ))
+ fireEvent.click(screen.getByText('unmount'))
+
+ // Should not display the console error
+ // "Warning: Can't perform a React state update on an unmounted component"
+
+ await sleep(20)
+ QueriesObserverSpy.mockRestore()
+ })
+
+ describe('with custom context', () => {
+ it('should return the correct states', async () => {
+ const context = createContext(undefined)
+
+ const key1 = queryKey()
+ const key2 = queryKey()
+ const results: CreateQueryResult[][] = []
+
+ function Page() {
+ const result = createQueries({
+ context,
+ queries: [
+ {
+ queryKey: key1,
+ queryFn: async () => {
+ await sleep(5)
+ return 1
+ },
+ },
+ {
+ queryKey: key2,
+ queryFn: async () => {
+ await sleep(10)
+ return 2
+ },
+ },
+ ],
+ })
+ createRenderEffect(() => {
+ results.push([...result])
+ })
+ return null
+ }
+
+ render(() => (
+
+
+ ))
+
+ await sleep(30)
+
+ expect(results[0]).toMatchObject([
+ { data: undefined },
+ { data: undefined },
+ ])
+ expect(results[results.length - 1]).toMatchObject([
+ { data: 1 },
+ { data: 2 },
+ ])
+ })
+
+ it('should throw if the context is necessary and is not passed to useQueries', async () => {
+ const context = createContext(undefined)
+
+ const key1 = queryKey()
+ const key2 = queryKey()
+ const results: CreateQueryResult[][] = []
+
+ function Page() {
+ const result = createQueries({
+ queries: [
+ {
+ queryKey: key1,
+ queryFn: async () => 1,
+ },
+ {
+ queryKey: key2,
+ queryFn: async () => 2,
+ },
+ ],
+ })
+ results.push(result)
+ return null
+ }
+
+ render(() => (
+
+ error boundary
}>
+
+
+ ))
+
+ await waitFor(() => screen.getByText('error boundary'))
+ })
+ })
+})
diff --git a/packages/solid-query/src/__tests__/createQuery.test.tsx b/packages/solid-query/src/__tests__/createQuery.test.tsx
new file mode 100644
index 0000000000..9437169cb8
--- /dev/null
+++ b/packages/solid-query/src/__tests__/createQuery.test.tsx
@@ -0,0 +1,6487 @@
+import '@testing-library/jest-dom'
+import type { JSX } from 'solid-js'
+import {
+ createEffect,
+ createMemo,
+ createRenderEffect,
+ createSignal,
+ ErrorBoundary,
+ Match,
+ on,
+ Switch,
+} from 'solid-js'
+import { fireEvent, render, screen, waitFor } from 'solid-testing-library'
+import type {
+ CreateQueryOptions,
+ CreateQueryResult,
+ DefinedCreateQueryResult,
+ QueryFunction,
+} from '..'
+import { createQuery, QueryCache, QueryClientProvider } from '..'
+import {
+ Blink,
+ createQueryClient,
+ expectType,
+ mockLogger,
+ mockNavigatorOnLine,
+ mockVisibilityState,
+ queryKey,
+ setActTimeout,
+ sleep,
+} from './utils'
+
+describe('createQuery', () => {
+ const queryCache = new QueryCache()
+ const queryClient = createQueryClient({ queryCache })
+
+ it('should return the correct types', () => {
+ const key = queryKey()
+
+ // @ts-ignore
+ // eslint-disable-next-line
+ function Page() {
+ // unspecified query function should default to unknown
+ const noQueryFn = createQuery(key)
+ expectType(noQueryFn.data)
+ expectType(noQueryFn.error)
+
+ // it should infer the result type from the query function
+ const fromQueryFn = createQuery(key, () => 'test')
+ expectType(fromQueryFn.data)
+ expectType(fromQueryFn.error)
+
+ // it should be possible to specify the result type
+ const withResult = createQuery(key, () => 'test')
+ expectType(withResult.data)
+ expectType(withResult.error)
+
+ // it should be possible to specify the error type
+ const withError = createQuery(key, () => 'test')
+ expectType(withError.data)
+ expectType(withError.error)
+
+ // it should provide the result type in the configuration
+ createQuery(
+ () => [key()],
+ async () => true,
+ {
+ onSuccess: (data) => expectType(data),
+ onSettled: (data) => expectType(data),
+ },
+ )
+
+ // it should be possible to specify a union type as result type
+ const unionTypeSync = createQuery(
+ key,
+ () => (Math.random() > 0.5 ? 'a' : 'b'),
+ {
+ onSuccess: (data) => expectType<'a' | 'b'>(data),
+ },
+ )
+ expectType<'a' | 'b' | undefined>(unionTypeSync.data)
+ const unionTypeAsync = createQuery<'a' | 'b'>(
+ key,
+ () => Promise.resolve(Math.random() > 0.5 ? 'a' : 'b'),
+ {
+ onSuccess: (data) => expectType<'a' | 'b'>(data),
+ },
+ )
+ expectType<'a' | 'b' | undefined>(unionTypeAsync.data)
+
+ // should error when the query function result does not match with the specified type
+ // @ts-expect-error
+ createQuery(key, () => 'test')
+
+ // it should infer the result type from a generic query function
+ function queryFn(): Promise {
+ return Promise.resolve({} as T)
+ }
+
+ const fromGenericQueryFn = createQuery(key, () => queryFn())
+ expectType(fromGenericQueryFn.data)
+ expectType(fromGenericQueryFn.error)
+
+ const fromGenericOptionsQueryFn = createQuery({
+ queryKey: key,
+ queryFn: () => queryFn(),
+ })
+ expectType(fromGenericOptionsQueryFn.data)
+ expectType(fromGenericOptionsQueryFn.error)
+
+ type MyData = number
+ type MyQueryKey = readonly ['my-data', number]
+
+ const getMyDataArrayKey: QueryFunction = async ({
+ queryKey: [, n],
+ }) => {
+ return n + 42
+ }
+
+ createQuery({
+ queryKey: () => ['my-data', 100] as const,
+ queryFn: getMyDataArrayKey,
+ })
+
+ const getMyDataStringKey: QueryFunction = async (
+ context,
+ ) => {
+ expectType(context.queryKey)
+ return Number(context.queryKey[0]) + 42
+ }
+
+ createQuery({
+ queryKey: () => ['1'] as const,
+ queryFn: getMyDataStringKey,
+ })
+
+ // it should handle query-functions that return Promise
+ createQuery(key, () =>
+ fetch('return Promise').then((resp) => resp.json()),
+ )
+
+ // handles wrapped queries with custom fetcher passed as inline queryFn
+ const useWrappedQuery = <
+ TQueryKey extends () => [string, Record?],
+ TQueryFnData,
+ TError,
+ TData = TQueryFnData,
+ >(
+ qk: TQueryKey,
+ fetcher: (
+ obj: ReturnType[1],
+ token: string,
+ // return type must be wrapped with TQueryFnReturn
+ ) => Promise,
+ options?: Omit<
+ CreateQueryOptions,
+ 'queryKey' | 'queryFn' | 'initialData'
+ >,
+ ) => createQuery(qk, () => fetcher(qk()[1], 'token'), options)
+ const test = useWrappedQuery(
+ () => [''],
+ async () => '1',
+ )
+ expectType(test.data)
+
+ // handles wrapped queries with custom fetcher passed directly to createQuery
+ const useWrappedFuncStyleQuery = <
+ TQueryKey extends () => [string, Record?],
+ TQueryFnData,
+ TError,
+ TData = TQueryFnData,
+ >(
+ qk: TQueryKey,
+ fetcher: () => Promise,
+ options?: Omit<
+ CreateQueryOptions,
+ 'queryKey' | 'queryFn' | 'initialData'
+ >,
+ ) => createQuery(qk, fetcher, options)
+ const testFuncStyle = useWrappedFuncStyleQuery(
+ () => [''],
+ async () => true,
+ )
+ expectType(testFuncStyle.data)
+ }
+ })
+
+ // See https://github.com/tannerlinsley/react-query/issues/105
+ it('should allow to set default data value', async () => {
+ const key = queryKey()
+
+ function Page() {
+ const state = createQuery(key, async () => {
+ await sleep(10)
+ return 'test'
+ })
+
+ return (
+
+
{state.data ?? 'default'}
+
+ )
+ }
+
+ render(() => (
+
+
+ ))
+
+ screen.getByText('default')
+
+ await waitFor(() => screen.getByText('test'))
+ })
+
+ it('should return the correct states for a successful query', async () => {
+ const key = queryKey()
+ const states: CreateQueryResult[] = []
+
+ function Page(): JSX.Element {
+ const state = createQuery(key, async () => {
+ await sleep(10)
+ return 'test'
+ })
+
+ createRenderEffect(() => {
+ states.push({ ...state })
+ })
+
+ if (state.isLoading) {
+ expectType(state.data)
+ expectType(state.error)
+ } else if (state.isLoadingError) {
+ expectType(state.data)
+ expectType(state.error)
+ } else {
+ expectType(state.data)
+ expectType(state.error)
+ }
+
+ return (
+ {state.data}}>
+
+ loading
+
+
+ {state.error!.message}
+
+
+ )
+ }
+
+ render(() => (
+
+
+ ))
+
+ await waitFor(() => screen.getByText('test'))
+
+ expect(states.length).toEqual(2)
+
+ expect(states[0]).toEqual({
+ data: undefined,
+ dataUpdatedAt: 0,
+ error: null,
+ errorUpdatedAt: 0,
+ failureCount: 0,
+ errorUpdateCount: 0,
+ isError: false,
+ isFetched: false,
+ isFetchedAfterMount: false,
+ isFetching: true,
+ isPaused: false,
+ isLoading: true,
+ isLoadingError: false,
+ isPlaceholderData: false,
+ isPreviousData: false,
+ isRefetchError: false,
+ isRefetching: false,
+ isStale: true,
+ isSuccess: false,
+ refetch: expect.any(Function),
+ remove: expect.any(Function),
+ status: 'loading',
+ fetchStatus: 'fetching',
+ })
+
+ expect(states[1]).toEqual({
+ data: 'test',
+ dataUpdatedAt: expect.any(Number),
+ error: null,
+ errorUpdatedAt: 0,
+ failureCount: 0,
+ errorUpdateCount: 0,
+ isError: false,
+ isFetched: true,
+ isFetchedAfterMount: true,
+ isFetching: false,
+ isPaused: false,
+ isLoading: false,
+ isLoadingError: false,
+ isPlaceholderData: false,
+ isPreviousData: false,
+ isRefetchError: false,
+ isRefetching: false,
+ isStale: true,
+ isSuccess: true,
+ refetch: expect.any(Function),
+ remove: expect.any(Function),
+ status: 'success',
+ fetchStatus: 'idle',
+ })
+ })
+
+ it('should return the correct states for an unsuccessful query', async () => {
+ const key = queryKey()
+
+ const states: CreateQueryResult[] = []
+
+ function Page() {
+ const state = createQuery(
+ key,
+ () => Promise.reject('rejected'),
+ {
+ retry: 1,
+ retryDelay: 1,
+ },
+ )
+
+ createRenderEffect(() => {
+ states.push({ ...state })
+ })
+
+ return (
+
+
Status: {state.status}
+
Failure Count: {state.failureCount}
+
+
+ ))
+
+ await waitFor(() => screen.getByText('Status: error'))
+
+ expect(states[0]).toEqual({
+ data: undefined,
+ dataUpdatedAt: 0,
+ error: null,
+ errorUpdatedAt: 0,
+ failureCount: 0,
+ errorUpdateCount: 0,
+ isError: false,
+ isFetched: false,
+ isFetchedAfterMount: false,
+ isFetching: true,
+ isPaused: false,
+ isLoading: true,
+ isLoadingError: false,
+ isPlaceholderData: false,
+ isPreviousData: false,
+ isRefetchError: false,
+ isRefetching: false,
+ isStale: true,
+ isSuccess: false,
+ refetch: expect.any(Function),
+ remove: expect.any(Function),
+ status: 'loading',
+ fetchStatus: 'fetching',
+ })
+
+ expect(states[1]).toEqual({
+ data: undefined,
+ dataUpdatedAt: 0,
+ error: null,
+ errorUpdatedAt: 0,
+ failureCount: 1,
+ errorUpdateCount: 0,
+ isError: false,
+ isFetched: false,
+ isFetchedAfterMount: false,
+ isFetching: true,
+ isPaused: false,
+ isLoading: true,
+ isLoadingError: false,
+ isPlaceholderData: false,
+ isPreviousData: false,
+ isRefetchError: false,
+ isRefetching: false,
+ isStale: true,
+ isSuccess: false,
+ refetch: expect.any(Function),
+ remove: expect.any(Function),
+ status: 'loading',
+ fetchStatus: 'fetching',
+ })
+
+ expect(states[2]).toEqual({
+ data: undefined,
+ dataUpdatedAt: 0,
+ error: 'rejected',
+ errorUpdatedAt: expect.any(Number),
+ failureCount: 2,
+ errorUpdateCount: 1,
+ isError: true,
+ isFetched: true,
+ isFetchedAfterMount: true,
+ isFetching: false,
+ isPaused: false,
+ isLoading: false,
+ isLoadingError: true,
+ isPlaceholderData: false,
+ isPreviousData: false,
+ isRefetchError: false,
+ isRefetching: false,
+ isStale: true,
+ isSuccess: false,
+ refetch: expect.any(Function),
+ remove: expect.any(Function),
+ status: 'error',
+ fetchStatus: 'idle',
+ })
+ })
+
+ it('should set isFetchedAfterMount to true after a query has been fetched', async () => {
+ const key = queryKey()
+ const states: CreateQueryResult[] = []
+
+ // TODO(lukemurray): do we want reactivity on this key?
+ await queryClient.prefetchQuery(key(), () => 'prefetched')
+
+ function Page() {
+ const state = createQuery(key, () => 'data')
+ createRenderEffect(() => {
+ states.push({ ...state })
+ })
+ return null
+ }
+
+ render(() => (
+
+
+ ))
+
+ await sleep(10)
+ expect(states.length).toBe(2)
+
+ expect(states[0]).toMatchObject({
+ data: 'prefetched',
+ isFetched: true,
+ isFetchedAfterMount: false,
+ })
+ expect(states[1]).toMatchObject({
+ data: 'data',
+ isFetched: true,
+ isFetchedAfterMount: true,
+ })
+ })
+
+ it('should call onSuccess after a query has been fetched', async () => {
+ const key = queryKey()
+ const states: CreateQueryResult[] = []
+ const onSuccess = jest.fn()
+
+ function Page() {
+ const state = createQuery(
+ key,
+ async () => {
+ await sleep(10)
+ return 'data'
+ },
+ { onSuccess },
+ )
+ createRenderEffect(() => {
+ states.push({ ...state })
+ })
+ return data: {state.data}
+ }
+
+ render(() => (
+
+
+ ))
+
+ await screen.findByText('data: data')
+ expect(states.length).toBe(2)
+ expect(onSuccess).toHaveBeenCalledTimes(1)
+ expect(onSuccess).toHaveBeenCalledWith('data')
+ })
+
+ it('should call onSuccess after a query has been refetched', async () => {
+ const key = queryKey()
+ const states: CreateQueryResult[] = []
+ const onSuccess = jest.fn()
+ let count = 0
+
+ function Page() {
+ const state = createQuery(
+ key,
+ async () => {
+ count++
+ await sleep(10)
+ return 'data' + count
+ },
+ { onSuccess },
+ )
+
+ createRenderEffect(
+ on(
+ () => [state.data, state.refetch],
+ () => {
+ states.push(state)
+ },
+ ),
+ )
+
+ return (
+
+
data: {state.data}
+
state.refetch()}>refetch
+
+
+ ))
+
+ await screen.findByText('data: data1')
+ fireEvent.click(screen.getByRole('button', { name: /refetch/i }))
+ await screen.findByText('data: data2')
+
+ expect(states.length).toBe(3) //loading, success, success after refetch
+ expect(count).toBe(2)
+ expect(onSuccess).toHaveBeenCalledTimes(2)
+ })
+
+ it('should call onSuccess after a disabled query has been fetched', async () => {
+ const key = queryKey()
+ const states: CreateQueryResult[] = []
+ const onSuccess = jest.fn()
+
+ function Page() {
+ const state = createQuery(key, () => 'data', {
+ enabled: false,
+ onSuccess,
+ })
+
+ createRenderEffect(() => {
+ states.push({ ...state })
+ })
+
+ createEffect(() => {
+ const refetch = state.refetch
+ setActTimeout(() => {
+ refetch()
+ }, 10)
+ })
+
+ return null
+ }
+
+ render(() => (
+
+
+ ))
+
+ await sleep(50)
+ expect(onSuccess).toHaveBeenCalledTimes(1)
+ expect(onSuccess).toHaveBeenCalledWith('data')
+ })
+
+ it('should not call onSuccess if a component has unmounted', async () => {
+ const key = queryKey()
+ const states: CreateQueryResult[] = []
+ const onSuccess = jest.fn()
+
+ function Page() {
+ const [show, setShow] = createSignal(true)
+
+ createEffect(() => {
+ setShow(false)
+ })
+ return <>{show() &&
+
+ ))
+
+ await sleep(50)
+ expect(states.length).toBe(1)
+ expect(onSuccess).toHaveBeenCalledTimes(0)
+ })
+
+ it('should call onError after a query has been fetched with an error', async () => {
+ const key = queryKey()
+ const states: CreateQueryResult[] = []
+ const onError = jest.fn()
+
+ function Page() {
+ const state = createQuery(key, () => Promise.reject('error'), {
+ retry: false,
+ onError,
+ })
+ createRenderEffect(() => {
+ states.push({ ...state })
+ })
+
+ return null
+ }
+
+ render(() => (
+
+
+ ))
+
+ await sleep(10)
+ expect(states.length).toBe(2)
+ expect(onError).toHaveBeenCalledTimes(1)
+ expect(onError).toHaveBeenCalledWith('error')
+ })
+
+ it('should not call onError when receiving a CancelledError', async () => {
+ const key = queryKey()
+ const onError = jest.fn()
+
+ function Page() {
+ const state = createQuery(
+ key,
+ async () => {
+ await sleep(10)
+ return 23
+ },
+ {
+ onError,
+ },
+ )
+ return (
+
+ status: {state.status}, fetchStatus: {state.fetchStatus}
+
+ )
+ }
+
+ render(() => (
+
+
+ ))
+
+ await sleep(5)
+ await queryClient.cancelQueries(key())
+ // query cancellation will reset the query to it's initial state
+ await waitFor(() => screen.getByText('status: loading, fetchStatus: idle'))
+ expect(onError).not.toHaveBeenCalled()
+ })
+
+ it('should call onSettled after a query has been fetched', async () => {
+ const key = queryKey()
+ const states: CreateQueryResult[] = []
+ const onSettled = jest.fn()
+
+ function Page() {
+ const state = createQuery(key, () => 'data', { onSettled })
+ createRenderEffect(() => {
+ states.push({ ...state })
+ })
+ return null
+ }
+
+ render(() => (
+
+
+ ))
+
+ await sleep(10)
+ expect(states.length).toBe(2)
+ expect(onSettled).toHaveBeenCalledTimes(1)
+ expect(onSettled).toHaveBeenCalledWith('data', null)
+ })
+
+ it('should call onSettled after a query has been fetched with an error', async () => {
+ const key = queryKey()
+ const states: CreateQueryResult[] = []
+ const onSettled = jest.fn()
+
+ function Page() {
+ const state = createQuery(key, () => Promise.reject('error'), {
+ retry: false,
+ onSettled,
+ })
+ createRenderEffect(() => {
+ states.push({ ...state })
+ })
+ return null
+ }
+
+ render(() => (
+
+
+ ))
+
+ await sleep(10)
+ expect(states.length).toBe(2)
+ expect(onSettled).toHaveBeenCalledTimes(1)
+ expect(onSettled).toHaveBeenCalledWith(undefined, 'error')
+ })
+
+ it('should not cancel an ongoing fetch when refetch is called with cancelRefetch=false if we have data already', async () => {
+ const key = queryKey()
+ let fetchCount = 0
+
+ function Page() {
+ const state = createQuery(
+ key,
+ async () => {
+ fetchCount++
+ await sleep(10)
+ return 'data'
+ },
+ { enabled: false, initialData: 'initialData' },
+ )
+
+ createEffect(() => {
+ setActTimeout(() => {
+ state.refetch()
+ }, 5)
+ setActTimeout(() => {
+ state.refetch({ cancelRefetch: false })
+ }, 5)
+ })
+
+ return null
+ }
+
+ render(() => (
+
+
+ ))
+
+ await sleep(20)
+ // first refetch only, second refetch is ignored
+ expect(fetchCount).toBe(1)
+ })
+
+ it('should cancel an ongoing fetch when refetch is called (cancelRefetch=true) if we have data already', async () => {
+ const key = queryKey()
+ let fetchCount = 0
+
+ function Page() {
+ const state = createQuery(
+ key,
+ async () => {
+ fetchCount++
+ await sleep(10)
+ return 'data'
+ },
+ { enabled: false, initialData: 'initialData' },
+ )
+
+ createEffect(() => {
+ setActTimeout(() => {
+ state.refetch()
+ }, 5)
+ setActTimeout(() => {
+ state.refetch()
+ }, 5)
+ })
+
+ return null
+ }
+
+ render(() => (
+
+
+ ))
+
+ await sleep(20)
+ // first refetch (gets cancelled) and second refetch
+ expect(fetchCount).toBe(2)
+ })
+
+ it('should not cancel an ongoing fetch when refetch is called (cancelRefetch=true) if we do not have data yet', async () => {
+ const key = queryKey()
+ let fetchCount = 0
+
+ function Page() {
+ const state = createQuery(
+ key,
+ async () => {
+ fetchCount++
+ await sleep(10)
+ return 'data'
+ },
+ { enabled: false },
+ )
+
+ createEffect(() => {
+ setActTimeout(() => {
+ state.refetch()
+ }, 5)
+ setActTimeout(() => {
+ state.refetch()
+ }, 5)
+ })
+
+ return null
+ }
+
+ render(() => (
+
+
+ ))
+
+ await sleep(20)
+ // first refetch will not get cancelled, second one gets skipped
+ expect(fetchCount).toBe(1)
+ })
+
+ it('should be able to watch a query without providing a query function', async () => {
+ const key = queryKey()
+ const states: CreateQueryResult[] = []
+
+ // TODO(lukemurray): do we want this to be reactive.
+ queryClient.setQueryDefaults(key(), { queryFn: () => 'data' })
+
+ function Page() {
+ const state = createQuery(key)
+ createRenderEffect(() => {
+ states.push({ ...state })
+ })
+ return null
+ }
+
+ render(() => (
+
+
+ ))
+
+ await sleep(10)
+
+ expect(states.length).toBe(2)
+ expect(states[0]).toMatchObject({ data: undefined })
+ expect(states[1]).toMatchObject({ data: 'data' })
+ })
+
+ it('should pick up a query when re-mounting with cacheTime 0', async () => {
+ const key = queryKey()
+ const states: CreateQueryResult[] = []
+
+ function Page() {
+ const [toggle, setToggle] = createSignal(false)
+
+ return (
+
+ setToggle(true)}>toggle
+
+
+
+
+
+
+
+ )
+ }
+
+ function Component({ value }: { value: string }) {
+ const state = createQuery(
+ key,
+ async () => {
+ await sleep(10)
+ return 'data: ' + value
+ },
+ {
+ cacheTime: 0,
+ notifyOnChangeProps: 'all',
+ },
+ )
+ createRenderEffect(() => {
+ states.push({ ...state })
+ })
+ return (
+
+ )
+ }
+
+ render(() => (
+
+
+ ))
+
+ await screen.findByText('data: 1')
+
+ fireEvent.click(screen.getByRole('button', { name: /toggle/i }))
+
+ await screen.findByText('data: 2')
+
+ expect(states.length).toBe(4)
+ // First load
+ expect(states[0]).toMatchObject({
+ isLoading: true,
+ isSuccess: false,
+ isFetching: true,
+ })
+ // First success
+ expect(states[1]).toMatchObject({
+ isLoading: false,
+ isSuccess: true,
+ isFetching: false,
+ })
+ // Switch, goes to fetching
+ expect(states[2]).toMatchObject({
+ isLoading: false,
+ isSuccess: true,
+ isFetching: true,
+ })
+ // Second success
+ expect(states[3]).toMatchObject({
+ isLoading: false,
+ isSuccess: true,
+ isFetching: false,
+ })
+ })
+
+ it.skip('should not get into an infinite loop when removing a query with cacheTime 0 and rerendering', async () => {
+ const key = queryKey()
+ const states: CreateQueryResult[] = []
+
+ function Page() {
+ //@ts-expect-error -- skip this test
+ const [, rerender] = NotReact.useState({})
+
+ const state = createQuery(
+ key,
+ async () => {
+ await sleep(5)
+ return 'data'
+ },
+ {
+ cacheTime: 0,
+ notifyOnChangeProps: 'all',
+ },
+ )
+
+ createRenderEffect(() => {
+ states.push({ ...state })
+ })
+
+ const { remove } = state
+
+ //@ts-expect-error skip this test
+ NotReact.useEffect(() => {
+ setActTimeout(() => {
+ remove()
+ rerender({})
+ }, 20)
+ }, [remove])
+
+ return null
+ }
+
+ render(() => (
+
+
+ ))
+
+ await sleep(100)
+
+ expect(states.length).toBe(5)
+ // First load
+ expect(states[0]).toMatchObject({ isLoading: true, isSuccess: false })
+ // First success
+ expect(states[1]).toMatchObject({ isLoading: false, isSuccess: true })
+ // Remove
+ expect(states[2]).toMatchObject({ isLoading: true, isSuccess: false })
+ // Hook state update
+ expect(states[3]).toMatchObject({ isLoading: true, isSuccess: false })
+ // Second success
+ expect(states[4]).toMatchObject({ isLoading: false, isSuccess: true })
+ })
+
+ it('should fetch when refetchOnMount is false and nothing has been fetched yet', async () => {
+ const key = queryKey()
+ const states: CreateQueryResult[] = []
+
+ function Page() {
+ const state = createQuery(key, () => 'test', {
+ refetchOnMount: false,
+ })
+ createRenderEffect(() => {
+ states.push({ ...state })
+ })
+ return null
+ }
+
+ render(() => (
+
+
+ ))
+
+ await sleep(10)
+
+ expect(states.length).toBe(2)
+ expect(states[0]).toMatchObject({ data: undefined })
+ expect(states[1]).toMatchObject({ data: 'test' })
+ })
+
+ it('should not fetch when refetchOnMount is false and data has been fetched already', async () => {
+ const key = queryKey()
+ const states: CreateQueryResult[] = []
+
+ queryClient.setQueryData(key(), 'prefetched')
+
+ function Page() {
+ const state = createQuery(key, () => 'test', {
+ refetchOnMount: false,
+ })
+ createRenderEffect(() => {
+ states.push({ ...state })
+ })
+ return null
+ }
+
+ render(() => (
+
+
+ ))
+
+ await sleep(10)
+
+ expect(states.length).toBe(1)
+ expect(states[0]).toMatchObject({ data: 'prefetched' })
+ })
+
+ it('should be able to select a part of the data with select', async () => {
+ const key = queryKey()
+ const states: CreateQueryResult[] = []
+
+ function Page() {
+ const state = createQuery(key, () => ({ name: 'test' }), {
+ select: (data) => data.name,
+ })
+ createRenderEffect(() => {
+ states.push({ ...state })
+ })
+ return null
+ }
+
+ render(() => (
+
+
+ ))
+
+ await sleep(10)
+
+ expect(states.length).toBe(2)
+ expect(states[0]).toMatchObject({ data: undefined })
+ expect(states[1]).toMatchObject({ data: 'test' })
+ })
+
+ it('should be able to select a part of the data with select in object syntax', async () => {
+ const key = queryKey()
+ const states: CreateQueryResult[] = []
+
+ function Page() {
+ const state = createQuery({
+ queryKey: key,
+ queryFn: () => ({ name: 'test' }),
+ select: (data) => data.name,
+ })
+ createRenderEffect(() => {
+ states.push({ ...state })
+ })
+ return null
+ }
+
+ render(() => (
+
+
+ ))
+
+ await sleep(10)
+
+ expect(states.length).toBe(2)
+ expect(states[0]).toMatchObject({ data: undefined })
+ expect(states[1]).toMatchObject({ data: 'test' })
+ })
+
+ it('should not re-render when it should only re-render only data change and the selected data did not change', async () => {
+ const key = queryKey()
+ const states: CreateQueryResult[] = []
+
+ function Page() {
+ const state = createQuery(key, () => ({ name: 'test' }), {
+ select: (data) => data.name,
+ notifyOnChangeProps: ['data'],
+ })
+
+ createRenderEffect(() => {
+ states.push({ ...state })
+ })
+
+ createEffect(() => {
+ const refetch = state.refetch
+ setActTimeout(() => {
+ refetch()
+ }, 5)
+ })
+
+ return null
+ }
+
+ render(() => (
+
+
+ ))
+
+ await sleep(10)
+
+ expect(states.length).toBe(2)
+ expect(states[0]).toMatchObject({ data: undefined })
+ expect(states[1]).toMatchObject({ data: 'test' })
+ })
+
+ it('should throw an error when a selector throws', async () => {
+ const key = queryKey()
+ const states: CreateQueryResult[] = []
+ const error = new Error('Select Error')
+
+ function Page() {
+ const state = createQuery(key, () => ({ name: 'test' }), {
+ select: () => {
+ throw error
+ },
+ })
+ createRenderEffect(() => {
+ states.push({ ...state })
+ })
+ return null
+ }
+
+ render(() => (
+
+
+ ))
+
+ await sleep(10)
+
+ expect(mockLogger.error).toHaveBeenCalledWith(error)
+ expect(states.length).toBe(2)
+
+ expect(states[0]).toMatchObject({ status: 'loading', data: undefined })
+ expect(states[1]).toMatchObject({ status: 'error', error })
+ })
+
+ it.skip('should not re-run a stable select when it re-renders if selector throws an error', async () => {
+ const key = queryKey()
+ const error = new Error('Select Error')
+ let runs = 0
+
+ function Page() {
+ //@ts-expect-error -- we skip this test, and no such thing as rerender in solid
+ const [, rerender] = NotReact.useReducer(() => ({}), {})
+ const state = createQuery(
+ key,
+ () => (runs === 0 ? 'test' : 'test2'),
+ {
+ select: () => {
+ runs++
+ throw error
+ },
+ },
+ )
+ return (
+
+
error: {state.error?.message}
+
rerender
+
state.refetch()}>refetch
+
+
+ ))
+
+ await waitFor(() => screen.getByText('error: Select Error'))
+ expect(runs).toEqual(1)
+ fireEvent.click(screen.getByRole('button', { name: 'rerender' }))
+ await sleep(10)
+ expect(runs).toEqual(1)
+ fireEvent.click(screen.getByRole('button', { name: 'refetch' }))
+ await sleep(10)
+ expect(runs).toEqual(2)
+ })
+
+ it('should track properties and only re-render when a tracked property changes', async () => {
+ const key = queryKey()
+ const states: CreateQueryResult[] = []
+
+ function Page() {
+ const state = createQuery(key, async () => {
+ await sleep(10)
+ return 'test'
+ })
+
+ createRenderEffect(() => {
+ states.push({ ...state })
+ })
+
+ createEffect(() => {
+ const data = state.data
+ const refetch = state.refetch
+ setActTimeout(() => {
+ if (data) {
+ refetch()
+ }
+ }, 20)
+ })
+
+ return (
+
+
{state.data ?? null}
+
+ )
+ }
+
+ render(() => (
+
+
+ ))
+
+ await waitFor(() => screen.getByText('test'))
+
+ expect(states.length).toBe(2)
+ expect(states[0]).toMatchObject({ data: undefined })
+ expect(states[1]).toMatchObject({ data: 'test' })
+ })
+
+ it('should always re-render if we are tracking props but not using any', async () => {
+ const key = queryKey()
+ let renderCount = 0
+ const states: CreateQueryResult[] = []
+
+ function Page() {
+ const state = createQuery(key, () => 'test')
+
+ createRenderEffect(() => {
+ states.push({ ...state })
+ })
+
+ createEffect(
+ on(
+ () => ({ ...state }),
+ () => {
+ renderCount++
+ },
+ ),
+ )
+
+ return (
+
+
hello
+
+ )
+ }
+
+ render(() => (
+
+
+ ))
+
+ await sleep(10)
+ expect(renderCount).toBe(2)
+ expect(states.length).toBe(2)
+ expect(states[0]).toMatchObject({ data: undefined })
+ expect(states[1]).toMatchObject({ data: 'test' })
+ })
+
+ it.skip('should be able to remove a query', async () => {
+ const key = queryKey()
+ const states: CreateQueryResult[] = []
+ let count = 0
+
+ function Page() {
+ //@ts-expect-error -- we skip this test, and no such thing as rerender in solid
+ const [, rerender] = NotReact.useState({})
+ const state = createQuery(key, () => ++count, {
+ notifyOnChangeProps: 'all',
+ })
+
+ createRenderEffect(() => {
+ states.push({ ...state })
+ })
+
+ const { remove } = state
+
+ return (
+
+ remove()}>remove
+ rerender({})}>rerender
+ data: {state.data ?? 'null'}
+
+ )
+ }
+
+ render(() => (
+
+
+ ))
+
+ await waitFor(() => screen.getByText('data: 1'))
+ fireEvent.click(screen.getByRole('button', { name: /remove/i }))
+
+ await sleep(20)
+ fireEvent.click(screen.getByRole('button', { name: /rerender/i }))
+ await waitFor(() => screen.getByText('data: 2'))
+
+ expect(states.length).toBe(4)
+ // Initial
+ expect(states[0]).toMatchObject({ status: 'loading', data: undefined })
+ // Fetched
+ expect(states[1]).toMatchObject({ status: 'success', data: 1 })
+ // Remove + Hook state update, batched
+ expect(states[2]).toMatchObject({ status: 'loading', data: undefined })
+ // Fetched
+ expect(states[3]).toMatchObject({ status: 'success', data: 2 })
+ })
+
+ it('should create a new query when refetching a removed query', async () => {
+ const key = queryKey()
+ const states: Partial>[] = []
+ let count = 0
+
+ function Page() {
+ const state = createQuery(
+ key,
+ async () => {
+ await sleep(10)
+ return ++count
+ },
+ { notifyOnChangeProps: 'all' },
+ )
+
+ createRenderEffect(() => {
+ states.push({ data: state.data, dataUpdatedAt: state.dataUpdatedAt })
+ })
+
+ return (
+
+ state.remove()}>remove
+ state.refetch()}>refetch
+ data: {state.data ?? 'null'}
+
+ )
+ }
+
+ render(() => (
+
+
+ ))
+
+ await waitFor(() => screen.getByText('data: 1'))
+ fireEvent.click(screen.getByRole('button', { name: /remove/i }))
+
+ await sleep(50)
+ fireEvent.click(screen.getByRole('button', { name: /refetch/i }))
+ await waitFor(() => screen.getByText('data: 2'))
+
+ expect(states.length).toBe(4)
+ // Initial
+ expect(states[0]).toMatchObject({ data: undefined, dataUpdatedAt: 0 })
+ // Fetched
+ expect(states[1]).toMatchObject({ data: 1 })
+ // Switch
+ expect(states[2]).toMatchObject({ data: undefined, dataUpdatedAt: 0 })
+ // Fetched
+ expect(states[3]).toMatchObject({ data: 2 })
+ })
+
+ it('should share equal data structures between query results', async () => {
+ const key = queryKey()
+
+ const result1 = [
+ { id: '1', done: false },
+ { id: '2', done: false },
+ ]
+
+ const result2 = [
+ { id: '1', done: false },
+ { id: '2', done: true },
+ ]
+
+ const states: CreateQueryResult[] = []
+
+ let count = 0
+
+ function Page() {
+ const state = createQuery(
+ key,
+ async () => {
+ await sleep(10)
+ count++
+ return count === 1 ? result1 : result2
+ },
+ { notifyOnChangeProps: 'all' },
+ )
+
+ createRenderEffect(() => {
+ states.push({ ...state })
+ })
+
+ const { refetch } = state
+
+ return (
+
+ refetch()}>refetch
+ data: {String(state.data?.[1]?.done)}
+
+ )
+ }
+
+ render(() => (
+
+
+ ))
+
+ await waitFor(() => screen.getByText('data: false'))
+ await sleep(20)
+ fireEvent.click(screen.getByRole('button', { name: /refetch/i }))
+ await waitFor(() => screen.getByText('data: true'))
+
+ await waitFor(() => expect(states.length).toBe(4))
+
+ const todos = states[2]?.data
+ const todo1 = todos?.[0]
+ const todo2 = todos?.[1]
+
+ const newTodos = states[3]?.data
+ const newTodo1 = newTodos?.[0]
+ const newTodo2 = newTodos?.[1]
+
+ expect(todos).toEqual(result1)
+ expect(newTodos).toEqual(result2)
+ expect(newTodos).not.toBe(todos)
+ expect(newTodo1).toBe(todo1)
+ expect(newTodo2).not.toBe(todo2)
+
+ return null
+ })
+
+ it('should use query function from hook when the existing query does not have a query function', async () => {
+ const key = queryKey()
+ const results: Partial>[] = []
+
+ queryClient.setQueryData(key(), 'set')
+
+ function Page() {
+ const result = createQuery(
+ key,
+ async () => {
+ await sleep(10)
+ return 'fetched'
+ },
+ {
+ initialData: 'initial',
+ staleTime: Infinity,
+ },
+ )
+
+ createRenderEffect(() => {
+ results.push({ data: result.data, isFetching: result.isFetching })
+ })
+
+ return (
+
+
isFetching: {result.isFetching}
+
queryClient.refetchQueries(key())}>
+ refetch
+
+ data: {result.data}
+
+
+ ))
+
+ await waitFor(() => screen.getByText('data: set'))
+ fireEvent.click(screen.getByRole('button', { name: /refetch/i }))
+ await waitFor(() => screen.getByText('data: fetched'))
+
+ await waitFor(() => expect(results.length).toBe(3))
+
+ expect(results[0]).toMatchObject({ data: 'set', isFetching: false })
+ expect(results[1]).toMatchObject({ data: 'set', isFetching: true })
+ expect(results[2]).toMatchObject({ data: 'fetched', isFetching: false })
+ })
+
+ it('should update query stale state and refetch when invalidated with invalidateQueries', async () => {
+ const key = queryKey()
+ const states: CreateQueryResult[] = []
+ let count = 0
+
+ function Page() {
+ const state = createQuery(
+ key,
+ async () => {
+ await sleep(10)
+ count++
+ return count
+ },
+ { staleTime: Infinity, notifyOnChangeProps: 'all' },
+ )
+
+ createEffect(() => {
+ states.push({ ...state })
+ })
+
+ return (
+
+ queryClient.invalidateQueries(key())}>
+ invalidate
+
+ data: {state.data}
+
+ )
+ }
+
+ render(() => (
+
+
+ ))
+
+ await waitFor(() => screen.getByText('data: 1'))
+ fireEvent.click(screen.getByRole('button', { name: /invalidate/i }))
+ await waitFor(() => screen.getByText('data: 2'))
+
+ await waitFor(() => expect(states.length).toBe(4))
+
+ expect(states[0]).toMatchObject({
+ data: undefined,
+ isFetching: true,
+ isRefetching: false,
+ isSuccess: false,
+ isStale: true,
+ })
+ expect(states[1]).toMatchObject({
+ data: 1,
+ isFetching: false,
+ isRefetching: false,
+ isSuccess: true,
+ isStale: false,
+ })
+ expect(states[2]).toMatchObject({
+ data: 1,
+ isFetching: true,
+ isRefetching: true,
+ isSuccess: true,
+ isStale: true,
+ })
+ expect(states[3]).toMatchObject({
+ data: 2,
+ isFetching: false,
+ isRefetching: false,
+ isSuccess: true,
+ isStale: false,
+ })
+ })
+
+ it('should not update disabled query when refetched with refetchQueries', async () => {
+ const key = queryKey()
+ const states: CreateQueryResult[] = []
+ let count = 0
+
+ function Page() {
+ const state = createQuery(
+ key,
+ async () => {
+ await sleep(10)
+ count++
+ return count
+ },
+ { enabled: false },
+ )
+
+ createRenderEffect(() => {
+ states.push({ ...state })
+ })
+
+ createEffect(() => {
+ setActTimeout(() => {
+ queryClient.refetchQueries({ queryKey: key() })
+ }, 20)
+ })
+
+ return null
+ }
+
+ render(() => (
+
+
+ ))
+
+ await sleep(50)
+
+ expect(states.length).toBe(1)
+ expect(states[0]).toMatchObject({
+ data: undefined,
+ isFetching: false,
+ isSuccess: false,
+ isStale: true,
+ })
+ })
+
+ it('should not refetch disabled query when invalidated with invalidateQueries', async () => {
+ const key = queryKey()
+ const states: CreateQueryResult[] = []
+ let count = 0
+
+ function Page() {
+ const state = createQuery(
+ key,
+ async () => {
+ await sleep(10)
+ count++
+ return count
+ },
+ { enabled: false },
+ )
+
+ createRenderEffect(() => {
+ states.push({ ...state })
+ })
+
+ createEffect(() => {
+ setActTimeout(() => {
+ queryClient.invalidateQueries(key())
+ }, 20)
+ })
+
+ return null
+ }
+
+ render(() => (
+
+
+ ))
+
+ await sleep(100)
+
+ expect(states.length).toBe(1)
+ expect(states[0]).toMatchObject({
+ data: undefined,
+ isFetching: false,
+ isSuccess: false,
+ isStale: true,
+ })
+ })
+
+ it('should not fetch when switching to a disabled query', async () => {
+ const key = queryKey()
+ const states: Partial>[] = []
+
+ function Page() {
+ const [count, setCount] = createSignal(0)
+
+ const state = createQuery(
+ () => [key(), count()],
+ async () => {
+ await sleep(5)
+ return count()
+ },
+ {
+ get enabled() {
+ return count() === 0
+ },
+ },
+ )
+
+ createRenderEffect(() => {
+ const { data, isSuccess, isFetching } = state
+ states.push({
+ data,
+ isFetching,
+ isSuccess,
+ })
+ })
+
+ createEffect(() => {
+ setActTimeout(() => {
+ setCount(1)
+ }, 10)
+ })
+
+ return null
+ }
+
+ render(() => (
+
+
+ ))
+
+ await sleep(50)
+
+ expect(states.length).toBe(3)
+
+ // Fetch query
+ expect(states[0]).toMatchObject({
+ data: undefined,
+ isFetching: true,
+ isSuccess: false,
+ })
+ // Fetched query
+ expect(states[1]).toMatchObject({
+ data: 0,
+ isFetching: false,
+ isSuccess: true,
+ })
+ // Switch to disabled query
+ expect(states[2]).toMatchObject({
+ data: undefined,
+ isFetching: false,
+ isSuccess: false,
+ })
+ })
+
+ it('should keep the previous data when keepPreviousData is set', async () => {
+ const key = queryKey()
+ const states: Partial>[] = []
+
+ function Page() {
+ const [count, setCount] = createSignal(0)
+
+ const state = createQuery(
+ () => [key(), count()],
+ async () => {
+ await sleep(10)
+ return count()
+ },
+ { keepPreviousData: true },
+ )
+
+ createRenderEffect(() => {
+ const { data, isFetching, isSuccess, isPreviousData } = state
+ states.push({
+ data,
+ isFetching,
+ isSuccess,
+ isPreviousData,
+ })
+ })
+
+ createEffect(() => {
+ setActTimeout(() => {
+ setCount(1)
+ }, 20)
+ })
+
+ return null
+ }
+
+ render(() => (
+
+
+ ))
+
+ await waitFor(() => expect(states.length).toBe(4))
+
+ // Initial
+ expect(states[0]).toMatchObject({
+ data: undefined,
+ isFetching: true,
+ isSuccess: false,
+ isPreviousData: false,
+ })
+ // Fetched
+ expect(states[1]).toMatchObject({
+ data: 0,
+ isFetching: false,
+ isSuccess: true,
+ isPreviousData: false,
+ })
+ // Set state
+ expect(states[2]).toMatchObject({
+ data: 0,
+ isFetching: true,
+ isSuccess: true,
+ isPreviousData: true,
+ })
+ // New data
+ expect(states[3]).toMatchObject({
+ data: 1,
+ isFetching: false,
+ isSuccess: true,
+ isPreviousData: false,
+ })
+ })
+
+ // this test relies on rerenders which don't exist in solid
+ it.skip('should transition to error state when keepPreviousData is set', async () => {
+ const key = queryKey()
+ const states: CreateQueryResult[] = []
+
+ function Page(props: { count: number }) {
+ const state = createQuery(
+ () => [key(), props.count],
+ async () => {
+ await sleep(10)
+ if (props.count === 2) {
+ throw new Error('Error test')
+ }
+ return Promise.resolve(props.count)
+ },
+ {
+ retry: false,
+ keepPreviousData: true,
+ },
+ )
+
+ createRenderEffect(() => {
+ states.push({ ...state })
+ })
+
+ return (
+
+
data: {state.data}
+
error: {state.error?.message}
+
previous data: {state.isPreviousData}
+
+
+ ))
+ await waitFor(() => screen.getByText('data: 0'))
+ // @ts-expect-error we skip this test and rerenders don't exist in solid
+ act(() => screen.rerender([] = []
+
+ function Page() {
+ const [count, setCount] = createSignal(0)
+
+ const state = createQuery(
+ () => [key(), count()],
+ async () => {
+ await sleep(10)
+ return count()
+ },
+ { initialData: 99, keepPreviousData: true },
+ )
+
+ createRenderEffect(() => {
+ states.push({ ...state })
+ })
+
+ createEffect(() => {
+ setActTimeout(() => {
+ setCount(1)
+ }, 20)
+ })
+
+ return null
+ }
+
+ render(() => (
+
+
+ ))
+
+ await waitFor(() => expect(states.length).toBe(4))
+
+ // Initial
+ expect(states[0]).toMatchObject({
+ data: 99,
+ isFetching: true,
+ isSuccess: true,
+ isPreviousData: false,
+ })
+ // Fetched
+ expect(states[1]).toMatchObject({
+ data: 0,
+ isFetching: false,
+ isSuccess: true,
+ isPreviousData: false,
+ })
+ // Set state
+ expect(states[2]).toMatchObject({
+ data: 0,
+ isFetching: true,
+ isSuccess: true,
+ isPreviousData: true,
+ })
+ // New data
+ expect(states[3]).toMatchObject({
+ data: 1,
+ isFetching: false,
+ isSuccess: true,
+ isPreviousData: false,
+ })
+ })
+
+ it('should keep the previous data on disabled query when keepPreviousData is set', async () => {
+ const key = queryKey()
+ const states: CreateQueryResult[] = []
+
+ function Page() {
+ const [count, setCount] = createSignal(0)
+
+ const state = createQuery(
+ () => [key(), count()],
+ async () => {
+ await sleep(10)
+ return count()
+ },
+ { enabled: false, keepPreviousData: true, notifyOnChangeProps: 'all' },
+ )
+
+ createRenderEffect(() => {
+ states.push({ ...state })
+ })
+
+ createEffect(() => {
+ const refetch = state.refetch
+ refetch()
+
+ setActTimeout(() => {
+ setCount(1)
+ }, 20)
+
+ setActTimeout(() => {
+ refetch()
+ }, 30)
+ })
+
+ return null
+ }
+
+ render(() => (
+
+
+ ))
+
+ await sleep(100)
+
+ expect(states.length).toBe(6)
+
+ // Disabled query
+ expect(states[0]).toMatchObject({
+ data: undefined,
+ isFetching: false,
+ isSuccess: false,
+ isPreviousData: false,
+ })
+ // Fetching query
+ expect(states[1]).toMatchObject({
+ data: undefined,
+ isFetching: true,
+ isSuccess: false,
+ isPreviousData: false,
+ })
+ // Fetched query
+ expect(states[2]).toMatchObject({
+ data: 0,
+ isFetching: false,
+ isSuccess: true,
+ isPreviousData: false,
+ })
+ // Set state
+ expect(states[3]).toMatchObject({
+ data: 0,
+ isFetching: false,
+ isSuccess: true,
+ isPreviousData: true,
+ })
+ // Fetching new query
+ expect(states[4]).toMatchObject({
+ data: 0,
+ isFetching: true,
+ isSuccess: true,
+ isPreviousData: true,
+ })
+ // Fetched new query
+ expect(states[5]).toMatchObject({
+ data: 1,
+ isFetching: false,
+ isSuccess: true,
+ isPreviousData: false,
+ })
+ })
+
+ it('should keep the previous data on disabled query when keepPreviousData is set and switching query key multiple times', async () => {
+ const key = queryKey()
+ const states: Partial>[] = []
+
+ queryClient.setQueryData([key(), 10], 10)
+
+ await sleep(10)
+
+ function Page() {
+ const [count, setCount] = createSignal(10)
+
+ const state = createQuery(
+ () => [key(), count()],
+ async () => {
+ await sleep(10)
+ return count()
+ },
+ { enabled: false, keepPreviousData: true, notifyOnChangeProps: 'all' },
+ )
+
+ createRenderEffect(() => {
+ const { data, isFetching, isSuccess, isPreviousData } = state
+ states.push({ data, isFetching, isSuccess, isPreviousData })
+ })
+
+ createEffect(() => {
+ const refetch = state.refetch
+ setActTimeout(() => {
+ setCount(11)
+ }, 20)
+ setActTimeout(() => {
+ setCount(12)
+ }, 30)
+ setActTimeout(() => {
+ refetch()
+ }, 40)
+ })
+
+ return null
+ }
+
+ render(() => (
+
+
+ ))
+
+ await sleep(100)
+
+ expect(states.length).toBe(4)
+
+ // Disabled query
+ expect(states[0]).toMatchObject({
+ data: 10,
+ isFetching: false,
+ isSuccess: true,
+ isPreviousData: false,
+ })
+ // Set state
+ expect(states[1]).toMatchObject({
+ data: 10,
+ isFetching: false,
+ isSuccess: true,
+ isPreviousData: true,
+ })
+ // Refetch
+ expect(states[2]).toMatchObject({
+ data: 10,
+ isFetching: true,
+ isSuccess: true,
+ isPreviousData: true,
+ })
+ // Refetch done
+ expect(states[3]).toMatchObject({
+ data: 12,
+ isFetching: false,
+ isSuccess: true,
+ isPreviousData: false,
+ })
+ })
+
+ it('should use the correct query function when components use different configurations', async () => {
+ const key = queryKey()
+ const states: CreateQueryResult[] = []
+
+ function FirstComponent() {
+ const state = createQuery(
+ key,
+ async () => {
+ await sleep(10)
+ return 1
+ },
+ { notifyOnChangeProps: 'all' },
+ )
+
+ createRenderEffect(() => {
+ states.push({ ...state })
+ })
+
+ return (
+
+ state.refetch()}>refetch
+ data: {state.data}
+
+ )
+ }
+
+ function SecondComponent() {
+ createQuery(key, () => 2, { notifyOnChangeProps: 'all' })
+ return null
+ }
+
+ function Page() {
+ return (
+ <>
+
+
+ ))
+
+ await waitFor(() => screen.getByText('data: 1'))
+ fireEvent.click(screen.getByRole('button', { name: /refetch/i }))
+
+ await waitFor(() => expect(states.length).toBe(4))
+
+ expect(states[0]).toMatchObject({
+ data: undefined,
+ })
+ expect(states[1]).toMatchObject({
+ data: 1,
+ })
+ expect(states[2]).toMatchObject({
+ data: 1,
+ })
+ // This state should be 1 instead of 2
+ expect(states[3]).toMatchObject({
+ data: 1,
+ })
+ })
+
+ it('should be able to set different stale times for a query', async () => {
+ const key = queryKey()
+ const states1: CreateQueryResult[] = []
+ const states2: CreateQueryResult[] = []
+
+ await queryClient.prefetchQuery(key(), async () => {
+ await sleep(10)
+ return 'prefetch'
+ })
+
+ await sleep(20)
+
+ function FirstComponent() {
+ const state = createQuery(
+ key,
+ async () => {
+ await sleep(10)
+ return 'one'
+ },
+ {
+ staleTime: 100,
+ },
+ )
+ createRenderEffect(() => {
+ states1.push({ ...state })
+ })
+ return null
+ }
+
+ function SecondComponent() {
+ const state = createQuery(
+ key,
+ async () => {
+ await sleep(10)
+ return 'two'
+ },
+ {
+ staleTime: 10,
+ },
+ )
+ createRenderEffect(() => {
+ states2.push({ ...state })
+ })
+ return null
+ }
+
+ function Page() {
+ return (
+ <>
+
+
+ ))
+
+ await sleep(200)
+
+ expect(states1.length).toBe(4)
+ expect(states2.length).toBe(3)
+
+ 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 5ms
+ {
+ data: 'two',
+ isStale: true,
+ },
+ ])
+ })
+
+ it('should re-render when a query becomes stale', async () => {
+ const key = queryKey()
+ const states: CreateQueryResult[] = []
+
+ function Page() {
+ const state = createQuery(key, () => 'test', {
+ staleTime: 50,
+ })
+ createRenderEffect(() => {
+ states.push({ ...state })
+ })
+ return null
+ }
+
+ render(() => (
+
+
+ ))
+
+ await sleep(100)
+
+ expect(states.length).toBe(3)
+ expect(states[0]).toMatchObject({ isStale: true })
+ expect(states[1]).toMatchObject({ isStale: false })
+ expect(states[2]).toMatchObject({ isStale: true })
+ })
+
+ it('should notify query cache when a query becomes stale', async () => {
+ const key = queryKey()
+ const states: CreateQueryResult[] = []
+ const fn = jest.fn()
+
+ const unsubscribe = queryCache.subscribe(fn)
+
+ function Page() {
+ const state = createQuery(key, () => 'test', {
+ staleTime: 10,
+ })
+ createRenderEffect(() => {
+ states.push({ ...state })
+ })
+ return null
+ }
+
+ render(() => (
+
+
+ ))
+
+ await sleep(20)
+ unsubscribe()
+
+ // 1. Query added -> loading
+ // 2. Observer result updated -> loading
+ // 3. Observer added
+ // 4. Query updated -> success
+ // 5. Observer result updated -> success
+ // 6. Query updated -> stale
+ // 7. Observer options updated
+ // 8. Observer result updated -> stale
+ // 9. Observer options updated
+ // Number 9 wont run in Solid JS
+ // Number 9 runs in react because the component re-renders after 8
+ expect(fn).toHaveBeenCalledTimes(8)
+ })
+
+ it('should not re-render when it should only re-render on data changes and the data did not change', async () => {
+ const key = queryKey()
+ const states: CreateQueryResult[] = []
+
+ function Page() {
+ const state = createQuery(
+ key,
+ async () => {
+ await sleep(5)
+ return 'test'
+ },
+ {
+ notifyOnChangeProps: ['data'],
+ },
+ )
+
+ createRenderEffect(() => {
+ states.push({ ...state })
+ })
+
+ createEffect(() => {
+ const refetch = state.refetch
+ setActTimeout(() => {
+ refetch()
+ }, 10)
+ })
+ return null
+ }
+
+ render(() => (
+
+
+ ))
+
+ await sleep(30)
+
+ expect(states.length).toBe(2)
+ expect(states[0]).toMatchObject({
+ data: undefined,
+ status: 'loading',
+ isFetching: true,
+ })
+ expect(states[1]).toMatchObject({
+ data: 'test',
+ status: 'success',
+ isFetching: false,
+ })
+ })
+
+ // See https://github.com/tannerlinsley/react-query/issues/137
+ it('should not override initial data in dependent queries', async () => {
+ const key1 = queryKey()
+ const key2 = queryKey()
+
+ function Page() {
+ const first = createQuery(key1, () => 'data', {
+ enabled: false,
+ initialData: 'init',
+ })
+
+ const second = createQuery(key2, () => 'data', {
+ enabled: false,
+ initialData: 'init',
+ })
+
+ return (
+
+
First Data: {first.data}
+
Second Data: {second.data}
+
First Status: {first.status}
+
Second Status: {second.status}
+
+
+ ))
+
+ screen.getByText('First Data: init')
+ screen.getByText('Second Data: init')
+ screen.getByText('First Status: success')
+ screen.getByText('Second Status: success')
+ })
+
+ it('should not override query configuration on render', async () => {
+ const key = queryKey()
+
+ const queryFn1 = async () => {
+ await sleep(10)
+ return 'data1'
+ }
+
+ const queryFn2 = async () => {
+ await sleep(10)
+ return 'data2'
+ }
+
+ function Page() {
+ createQuery(key, queryFn1)
+ createQuery(key, queryFn2)
+ return null
+ }
+
+ render(() => (
+
+
+ ))
+
+ expect(queryCache.find(key())!.options.queryFn).toBe(queryFn1)
+ })
+
+ // TODO(lukemurray): this seems like a react implementation detail
+ it.skip('should render correct states even in case of useEffect triggering delays', async () => {
+ const key = queryKey()
+ const states: CreateQueryResult[] = []
+
+ // @ts-expect-error - we skip this test
+ const originalUseEffect = NotReact.useEffect
+
+ // Try to simulate useEffect timing delay
+ // @ts-ignore
+ NotReact.useEffect = (...args: any[]) => {
+ originalUseEffect(() => {
+ setTimeout(() => {
+ args[0]()
+ }, 10)
+ }, args[1])
+ }
+
+ function Page() {
+ const state = createQuery(key, () => 'data', { staleTime: Infinity })
+ createRenderEffect(() => {
+ states.push({ ...state })
+ })
+ return null
+ }
+
+ render(() => (
+
+
+ ))
+ queryClient.setQueryData(key(), 'data')
+ await sleep(50)
+
+ // @ts-ignore
+ NotReact.useEffect = originalUseEffect
+
+ expect(states.length).toBe(2)
+ expect(states[0]).toMatchObject({ status: 'loading' })
+ expect(states[1]).toMatchObject({ status: 'success' })
+ })
+
+ it('should batch re-renders', async () => {
+ const key = queryKey()
+
+ let renders = 0
+
+ const queryFn = async () => {
+ await sleep(15)
+ return 'data'
+ }
+
+ function Page() {
+ createQuery(key, queryFn)
+ createQuery(key, queryFn)
+ renders++
+ return null
+ }
+
+ render(() => (
+
+
+ ))
+
+ await sleep(20)
+
+ // Since components are rendered once
+ // There wiil only be one pass
+ expect(renders).toBe(1)
+ })
+
+ it('should batch re-renders including hook callbacks', async () => {
+ const key = queryKey()
+
+ let renders = 0
+ let callbackCount = 0
+
+ const queryFn = async () => {
+ await sleep(10)
+ return 'data'
+ }
+
+ function Page() {
+ const [count, setCount] = createSignal(0)
+ createQuery(key, queryFn, {
+ onSuccess: () => {
+ setCount((x) => x + 1)
+ },
+ })
+ createQuery(key, queryFn, {
+ onSuccess: () => {
+ setCount((x) => x + 1)
+ },
+ })
+
+ createEffect(() => {
+ renders++
+ callbackCount = count()
+ })
+
+ return count: {count()}
+ }
+
+ render(() => (
+
+
+ ))
+
+ await waitFor(() => screen.getByText('count: 2'))
+
+ // Should be 3 instead of 5
+ expect(renders).toBe(3)
+ // Both callbacks should have been executed
+ expect(callbackCount).toBe(2)
+ })
+
+ it('should render latest data even if react has discarded certain renders', async () => {
+ const key = queryKey()
+
+ function Page() {
+ const [, setNewState] = createSignal('state')
+ const state = createQuery(key, () => 'data')
+ createEffect(() => {
+ setActTimeout(() => {
+ queryClient.setQueryData(key(), 'new')
+ // Update with same state to make react discard the next render
+ setNewState('state')
+ }, 10)
+ })
+ return {state.data}
+ }
+
+ render(() => (
+
+
+ ))
+
+ await waitFor(() => screen.getByText('new'))
+ })
+
+ // See https://github.com/tannerlinsley/react-query/issues/170
+ it('should start with status loading, fetchStatus idle if enabled is false', async () => {
+ const key1 = queryKey()
+ const key2 = queryKey()
+
+ function Page() {
+ const first = createQuery(key1, () => 'data', {
+ enabled: false,
+ })
+ const second = createQuery(key2, () => 'data')
+
+ return (
+
+
+ First Status: {first.status}, {first.fetchStatus}
+
+
+ Second Status: {second.status}, {second.fetchStatus}
+
+
+
+ ))
+
+ // use "act" to wait for state update and prevent console warning
+
+ screen.getByText('First Status: loading, idle')
+ await waitFor(() => screen.getByText('Second Status: loading, fetching'))
+ await waitFor(() => screen.getByText('Second Status: success, idle'))
+ })
+
+ // See https://github.com/tannerlinsley/react-query/issues/144
+ it('should be in "loading" state by default', async () => {
+ const key = queryKey()
+
+ function Page() {
+ const { status } = createQuery(key, async () => {
+ await sleep(10)
+ return 'test'
+ })
+
+ return status: {status}
+ }
+
+ render(() => (
+
+
+ ))
+
+ screen.getByText('status: loading')
+ })
+
+ // See https://github.com/tannerlinsley/react-query/issues/147
+ it('should not pass stringified variables to query function', async () => {
+ const key = queryKey()
+ const variables = { number: 5, boolean: false, object: {}, array: [] }
+ type CustomQueryKey = readonly [ReturnType, typeof variables]
+ const states: Partial>[] = []
+
+ // TODO(lukemurray): extract the query function to a variable queryFn
+
+ function Page() {
+ const state = createQuery(
+ () => [key(), variables] as const,
+ async (ctx) => {
+ await sleep(10)
+ return ctx.queryKey
+ },
+ )
+ createRenderEffect(() => {
+ states.push({ ...state })
+ })
+ return null
+ }
+
+ render(() => (
+
+
+ ))
+
+ await sleep(20)
+
+ expect(states[1]?.data).toEqual([key(), variables])
+ })
+
+ it('should not refetch query on focus when `enabled` is set to `false`', async () => {
+ const key = queryKey()
+ const queryFn = jest.fn().mockReturnValue('data')
+
+ function Page() {
+ const { data = 'default' } = createQuery(key, queryFn, {
+ enabled: false,
+ })
+
+ return (
+
+
{data}
+
+ )
+ }
+
+ render(() => (
+
+
+ ))
+
+ await waitFor(() => screen.getByText('default'))
+
+ window.dispatchEvent(new FocusEvent('focus'))
+
+ expect(queryFn).not.toHaveBeenCalled()
+ })
+
+ it('should not refetch stale query on focus when `refetchOnWindowFocus` is set to `false`', async () => {
+ const key = queryKey()
+ const states: CreateQueryResult[] = []
+ let count = 0
+
+ function Page() {
+ const state = createQuery(key, () => count++, {
+ staleTime: 0,
+ refetchOnWindowFocus: false,
+ })
+ createRenderEffect(() => {
+ states.push({ ...state })
+ })
+ return null
+ }
+
+ render(() => (
+
+
+ ))
+
+ await sleep(10)
+
+ window.dispatchEvent(new FocusEvent('focus'))
+
+ await sleep(10)
+
+ expect(states.length).toBe(2)
+ expect(states[0]).toMatchObject({ data: undefined, isFetching: true })
+ expect(states[1]).toMatchObject({ data: 0, isFetching: false })
+ })
+
+ it('should not refetch stale query on focus when `refetchOnWindowFocus` is set to a function that returns `false`', async () => {
+ const key = queryKey()
+ const states: CreateQueryResult[] = []
+ let count = 0
+
+ function Page() {
+ const state = createQuery(key, () => count++, {
+ staleTime: 0,
+ refetchOnWindowFocus: () => false,
+ })
+ createRenderEffect(() => {
+ states.push({ ...state })
+ })
+ return null
+ }
+
+ render(() => (
+
+
+ ))
+
+ await sleep(10)
+
+ window.dispatchEvent(new FocusEvent('focus'))
+
+ await sleep(10)
+
+ expect(states.length).toBe(2)
+ expect(states[0]).toMatchObject({ data: undefined, isFetching: true })
+ expect(states[1]).toMatchObject({ data: 0, isFetching: false })
+ })
+
+ it('should not refetch fresh query on focus when `refetchOnWindowFocus` is set to `true`', async () => {
+ const key = queryKey()
+ const states: CreateQueryResult[] = []
+ let count = 0
+
+ function Page() {
+ const state = createQuery(key, () => count++, {
+ staleTime: Infinity,
+ refetchOnWindowFocus: true,
+ })
+ createRenderEffect(() => {
+ states.push({ ...state })
+ })
+ return null
+ }
+
+ render(() => (
+
+
+ ))
+
+ await sleep(10)
+
+ window.dispatchEvent(new FocusEvent('focus'))
+
+ await sleep(10)
+
+ expect(states.length).toBe(2)
+ expect(states[0]).toMatchObject({ data: undefined, isFetching: true })
+ expect(states[1]).toMatchObject({ data: 0, isFetching: false })
+ })
+
+ it('should refetch fresh query on focus when `refetchOnWindowFocus` is set to `always`', async () => {
+ const key = queryKey()
+ const states: CreateQueryResult[] = []
+ let count = 0
+
+ function Page() {
+ const state = createQuery(
+ key,
+ async () => {
+ await sleep(10)
+ return count++
+ },
+ {
+ staleTime: Infinity,
+ refetchOnWindowFocus: 'always',
+ },
+ )
+ createRenderEffect(() => {
+ states.push({ ...state })
+ })
+ return null
+ }
+
+ render(() => (
+
+
+ ))
+
+ await sleep(20)
+
+ window.dispatchEvent(new FocusEvent('focus'))
+
+ await sleep(20)
+
+ await waitFor(() => expect(states.length).toBe(4))
+ expect(states[0]).toMatchObject({ data: undefined, isFetching: true })
+ expect(states[1]).toMatchObject({ data: 0, isFetching: false })
+ expect(states[2]).toMatchObject({ data: 0, isFetching: true })
+ expect(states[3]).toMatchObject({ data: 1, isFetching: false })
+ })
+
+ it('should calculate focus behaviour for refetchOnWindowFocus depending on function', async () => {
+ const key = queryKey()
+ const states: CreateQueryResult[] = []
+ let count = 0
+
+ function Page() {
+ const state = createQuery(
+ key,
+ async () => {
+ await sleep(10)
+ return count++
+ },
+ {
+ staleTime: 0,
+ retry: 0,
+ refetchOnWindowFocus: (query) => (query.state.data || 0) < 1,
+ },
+ )
+ createRenderEffect(() => {
+ states.push({ ...state })
+ })
+ return data: {state.data}
+ }
+
+ render(() => (
+
+
+ ))
+
+ await screen.findByText('data: 0')
+
+ expect(states.length).toBe(2)
+ expect(states[0]).toMatchObject({ data: undefined, isFetching: true })
+ expect(states[1]).toMatchObject({ data: 0, isFetching: false })
+
+ window.dispatchEvent(new FocusEvent('focus'))
+
+ await screen.findByText('data: 1')
+
+ // refetch should happen
+ expect(states.length).toBe(4)
+
+ expect(states[2]).toMatchObject({ data: 0, isFetching: true })
+ expect(states[3]).toMatchObject({ data: 1, isFetching: false })
+
+ await sleep(20)
+
+ // no more refetch now
+ expect(states.length).toBe(4)
+ })
+
+ it('should refetch fresh query when refetchOnMount is set to always', async () => {
+ const key = queryKey()
+ const states: CreateQueryResult[] = []
+
+ await queryClient.prefetchQuery(key(), () => 'prefetched')
+
+ function Page() {
+ const state = createQuery(key, () => 'data', {
+ refetchOnMount: 'always',
+ staleTime: Infinity,
+ })
+ createRenderEffect(() => {
+ states.push({ ...state })
+ })
+ return null
+ }
+
+ render(() => (
+
+
+ ))
+
+ await sleep(10)
+
+ expect(states.length).toBe(2)
+ expect(states[0]).toMatchObject({
+ data: 'prefetched',
+ isStale: false,
+ isFetching: true,
+ })
+ expect(states[1]).toMatchObject({
+ data: 'data',
+ isStale: false,
+ isFetching: false,
+ })
+ })
+
+ it('should refetch stale query when refetchOnMount is set to true', async () => {
+ const key = queryKey()
+ const states: CreateQueryResult[] = []
+
+ await queryClient.prefetchQuery(key(), () => 'prefetched')
+
+ await sleep(10)
+
+ function Page() {
+ const state = createQuery(key, () => 'data', {
+ refetchOnMount: true,
+ staleTime: 0,
+ })
+ createRenderEffect(() => {
+ states.push({ ...state })
+ })
+ return null
+ }
+
+ render(() => (
+
+
+ ))
+
+ await sleep(10)
+
+ expect(states.length).toBe(2)
+ expect(states[0]).toMatchObject({
+ data: 'prefetched',
+ isStale: true,
+ isFetching: true,
+ })
+ expect(states[1]).toMatchObject({
+ data: 'data',
+ isStale: true,
+ isFetching: false,
+ })
+ })
+
+ it('should set status to error if queryFn throws', async () => {
+ const key = queryKey()
+
+ function Page() {
+ const state = createQuery(
+ key,
+ () => {
+ return Promise.reject('Error test jaylen')
+ },
+ { retry: false },
+ )
+
+ return (
+
+
{state.status}
+ {state.error}
+
+ )
+ }
+
+ render(() => (
+
+
+ ))
+
+ await waitFor(() => screen.getByText('error'))
+ await waitFor(() => screen.getByText('Error test jaylen'))
+ })
+
+ it('should throw error if queryFn throws and useErrorBoundary is in use', async () => {
+ const key = queryKey()
+
+ function Page() {
+ const state = createQuery(
+ key,
+ () => Promise.reject('Error test jaylen'),
+ { retry: false, useErrorBoundary: true },
+ )
+
+ return (
+
+
{state.status}
+ {state.error}
+
+ )
+ }
+
+ render(() => (
+
+ error boundary
}>
+
+
+ ))
+
+ await waitFor(() => screen.getByText('error boundary'))
+ })
+
+ it('should update with data if we observe no properties and useErrorBoundary', async () => {
+ const key = queryKey()
+
+ let result: CreateQueryResult | undefined
+
+ function Page() {
+ const query = createQuery(key, () => Promise.resolve('data'), {
+ useErrorBoundary: true,
+ })
+
+ createEffect(() => {
+ result = query
+ })
+
+ return null
+ }
+
+ render(() => (
+
+
+ ))
+
+ await sleep(10)
+
+ expect(result?.data).toBe('data')
+ })
+
+ it('should set status to error instead of throwing when error should not be thrown', async () => {
+ const key = queryKey()
+
+ function Page() {
+ const state = createQuery(
+ key,
+ () => Promise.reject('Local Error'),
+ {
+ retry: false,
+ useErrorBoundary: (err) => err !== 'Local Error',
+ },
+ )
+
+ return (
+
+
{state.status}
+ {state.error}
+
+ )
+ }
+
+ render(() => (
+
+ error boundary
}>
+
+
+ ))
+
+ await waitFor(() => screen.getByText('error'))
+ await waitFor(() => screen.getByText('Local Error'))
+ })
+
+ it('should throw error instead of setting status when error should be thrown', async () => {
+ const key = queryKey()
+
+ function Page() {
+ const state = createQuery(
+ key,
+ () => Promise.reject(new Error('Remote Error')),
+ {
+ retry: false,
+ useErrorBoundary: (err) => err.message !== 'Local Error',
+ },
+ )
+
+ return (
+
+
{state.status}
+ {state.error?.message ?? ''}
+
+ )
+ }
+
+ render(() => (
+
+ (
+
+
error boundary
+ {/* eslint-disable-next-line @typescript-eslint/no-unnecessary-condition */}
+
{error?.message}
+
+
+ ))
+
+ await waitFor(() => screen.getByText('error boundary'))
+ await waitFor(() => screen.getByText('Remote Error'))
+ })
+
+ it('should continue retries when observers unmount and remount while waiting for a retry (#3031)', async () => {
+ const key = queryKey()
+ let count = 0
+
+ function Page() {
+ const result = createQuery(
+ key,
+ async () => {
+ count++
+ await sleep(10)
+ return Promise.reject('some error')
+ },
+ {
+ retry: 2,
+ retryDelay: 100,
+ },
+ )
+
+ return (
+
+
error: {result.error ?? 'null'}
+
failureCount: {result.failureCount}
+
+
{show() ? 'hide' : 'show'}
+ {show() &&
}
+
+
+ ))
+
+ await waitFor(() => screen.getByText('failureCount: 1'))
+ fireEvent.click(screen.getByRole('button', { name: /hide/i }))
+ await waitFor(() => screen.getByRole('button', { name: /show/i }))
+ fireEvent.click(screen.getByRole('button', { name: /show/i }))
+ await waitFor(() => screen.getByText('error: some error'))
+
+ expect(count).toBe(3)
+ })
+
+ it('should restart when observers unmount and remount while waiting for a retry when query was cancelled in between (#3031)', async () => {
+ const key = queryKey()
+ let count = 0
+
+ function Page() {
+ const result = createQuery(
+ key,
+ async () => {
+ count++
+ await sleep(10)
+ return Promise.reject('some error')
+ },
+ {
+ retry: 2,
+ retryDelay: 100,
+ },
+ )
+
+ return (
+
+
error: {result.error ?? 'null'}
+
failureCount: {result.failureCount}
+
+
{show() ? 'hide' : 'show'}
+
queryClient.cancelQueries({ queryKey: key() })}
+ >
+ cancel
+
+ {show() &&
}
+
+
+ ))
+
+ await waitFor(() => screen.getByText('failureCount: 1'))
+ fireEvent.click(screen.getByRole('button', { name: /hide/i }))
+ fireEvent.click(screen.getByRole('button', { name: /cancel/i }))
+ await waitFor(() => screen.getByRole('button', { name: /show/i }))
+ fireEvent.click(screen.getByRole('button', { name: /show/i }))
+ await waitFor(() => screen.getByText('error: some error'))
+
+ // initial fetch (1), which will be cancelled, followed by new mount(2) + 2 retries = 4
+ expect(count).toBe(4)
+ })
+
+ it('should always fetch if refetchOnMount is set to always', async () => {
+ const key = queryKey()
+ const states: CreateQueryResult[] = []
+
+ await queryClient.prefetchQuery(key(), () => 'prefetched')
+
+ function Page() {
+ const state = createQuery(key, () => 'data', {
+ refetchOnMount: 'always',
+ staleTime: 50,
+ })
+ createRenderEffect(() => {
+ states.push({ ...state })
+ })
+ return (
+
+
data: {state.data ?? 'null'}
+
isFetching: {state.isFetching}
+
isStale: {state.isStale}
+
+
+ ))
+
+ await waitFor(() => screen.getByText('data: data'))
+ await waitFor(() => expect(states.length).toBe(3))
+
+ expect(states[0]).toMatchObject({
+ data: 'prefetched',
+ isStale: false,
+ isFetching: true,
+ })
+ expect(states[1]).toMatchObject({
+ data: 'data',
+ isStale: false,
+ isFetching: false,
+ })
+ expect(states[2]).toMatchObject({
+ data: 'data',
+ isStale: true,
+ isFetching: false,
+ })
+ })
+
+ it('should fetch if initial data is set', async () => {
+ const key = queryKey()
+ const states: DefinedCreateQueryResult[] = []
+
+ function Page() {
+ const state = createQuery(key, () => 'data', {
+ initialData: 'initial',
+ })
+ createRenderEffect(() => {
+ states.push({ ...state })
+ })
+ return null
+ }
+
+ render(() => (
+
+
+ ))
+
+ await sleep(50)
+
+ expect(states.length).toBe(2)
+
+ expect(states[0]).toMatchObject({
+ data: 'initial',
+ isStale: true,
+ isFetching: true,
+ })
+ expect(states[1]).toMatchObject({
+ data: 'data',
+ isStale: true,
+ isFetching: false,
+ })
+ })
+
+ it('should not fetch if initial data is set with a stale time', async () => {
+ const key = queryKey()
+ const states: DefinedCreateQueryResult[] = []
+
+ function Page() {
+ const state = createQuery(key, () => 'data', {
+ staleTime: 50,
+ initialData: 'initial',
+ })
+ createRenderEffect(() => {
+ states.push({ ...state })
+ })
+ return null
+ }
+
+ render(() => (
+
+
+ ))
+
+ await sleep(100)
+
+ expect(states.length).toBe(2)
+ expect(states[0]).toMatchObject({
+ data: 'initial',
+ isStale: false,
+ isFetching: false,
+ })
+ expect(states[1]).toMatchObject({
+ data: 'initial',
+ isStale: true,
+ isFetching: false,
+ })
+ })
+
+ it('should fetch if initial data updated at is older than stale time', async () => {
+ const key = queryKey()
+ const states: DefinedCreateQueryResult[] = []
+
+ const oneSecondAgo = Date.now() - 1000
+
+ function Page() {
+ const state = createQuery(key, () => 'data', {
+ staleTime: 50,
+ initialData: 'initial',
+ initialDataUpdatedAt: oneSecondAgo,
+ })
+ createRenderEffect(() => {
+ states.push({ ...state })
+ })
+ return null
+ }
+
+ render(() => (
+
+
+ ))
+
+ await sleep(100)
+
+ expect(states.length).toBe(3)
+ expect(states[0]).toMatchObject({
+ data: 'initial',
+ isStale: true,
+ isFetching: true,
+ })
+ expect(states[1]).toMatchObject({
+ data: 'data',
+ isStale: false,
+ isFetching: false,
+ })
+ expect(states[2]).toMatchObject({
+ data: 'data',
+ isStale: true,
+ isFetching: false,
+ })
+ })
+
+ it('should fetch if "initial data updated at" is exactly 0', async () => {
+ const key = queryKey()
+ const states: DefinedCreateQueryResult[] = []
+
+ function Page() {
+ const state = createQuery(key, () => 'data', {
+ staleTime: 10 * 1000, // 10 seconds
+ initialData: 'initial',
+ initialDataUpdatedAt: 0,
+ })
+ createRenderEffect(() => {
+ states.push({ ...state })
+ })
+ return null
+ }
+
+ render(() => (
+
+
+ ))
+
+ await sleep(100)
+
+ expect(states.length).toBe(2)
+ expect(states[0]).toMatchObject({
+ data: 'initial',
+ isStale: true,
+ isFetching: true,
+ })
+ expect(states[1]).toMatchObject({
+ data: 'data',
+ isStale: false,
+ isFetching: false,
+ })
+ })
+
+ it('should keep initial data when the query key changes', async () => {
+ const key = queryKey()
+ const states: DefinedCreateQueryResult<{ count: number }>[] = []
+
+ function Page() {
+ const [count, setCount] = createSignal(0)
+ const state = createQuery(
+ () => [key(), count()],
+ () => ({ count: 10 }),
+ {
+ staleTime: Infinity,
+ initialData: () => ({ count: count() }),
+ },
+ )
+ createRenderEffect(() => {
+ states.push({ ...state })
+ })
+
+ createEffect(() => {
+ setActTimeout(() => {
+ setCount(1)
+ }, 10)
+ }, [])
+
+ return null
+ }
+
+ render(() => (
+
+
+ ))
+
+ await sleep(100)
+
+ expect(states.length).toBe(2)
+ // Initial
+ expect(states[0]).toMatchObject({ data: { count: 0 } })
+ // Set state
+ expect(states[1]).toMatchObject({ data: { count: 1 } })
+ })
+
+ it('should retry specified number of times', async () => {
+ const key = queryKey()
+
+ const queryFn = jest.fn()
+ queryFn.mockImplementation(() => {
+ return Promise.reject('Error test Barrett')
+ })
+
+ function Page() {
+ const state = createQuery(key, queryFn, {
+ retry: 1,
+ retryDelay: 1,
+ })
+
+ return (
+
+
{state.status}
+ Failed {state.failureCount} times
+
+ )
+ }
+
+ render(() => (
+
+
+ ))
+
+ await waitFor(() => screen.getByText('loading'))
+ await waitFor(() => screen.getByText('error'))
+
+ // query should fail `retry + 1` times, since first time isn't a "retry"
+ await waitFor(() => screen.getByText('Failed 2 times'))
+
+ expect(queryFn).toHaveBeenCalledTimes(2)
+ })
+
+ it('should not retry if retry function `false`', async () => {
+ const key = queryKey()
+
+ const queryFn = jest.fn()
+
+ queryFn.mockImplementationOnce(() => {
+ return Promise.reject('Error test Tanner')
+ })
+
+ queryFn.mockImplementation(() => {
+ return Promise.reject('NoRetry')
+ })
+
+ function Page() {
+ const state = createQuery(key, queryFn, {
+ retryDelay: 1,
+ retry: (_failureCount, err) => err !== 'NoRetry',
+ })
+
+ return (
+