@tanstack/solid-query 5.59.17 → 5.59.20

package/src/__tests__/transition.test.tsx

@@ -1,60 +0,0 @@
-import { describe, it } from 'vitest'
-import { fireEvent, render, waitFor } from '@solidjs/testing-library'
-import { Show, Suspense, createSignal, startTransition } from 'solid-js'
-import { QueryCache, QueryClientProvider, createQuery } from '..'
-import { createQueryClient, queryKey, sleep } from './utils'
-
-describe("createQuery's in Suspense mode with transitions", () => {
-  const queryCache = new QueryCache()
-  const queryClient = createQueryClient({ queryCache })
-
-  it('should render the content when the transition is done', async () => {
-    const key = queryKey()
-
-    function Suspended() {
-      const state = createQuery(() => ({
-        queryKey: key,
-        queryFn: async () => {
-          await sleep(10)
-          return true
-        },
-      }))
-      return <Show when={state.data}>Message</Show>
-    }
-
-    function Page() {
-      const [showSignal, setShowSignal] = createSignal(false)
-
-      return (
-        <div>
-          <button
-            aria-label="toggle"
-            onClick={() =>
-              startTransition(() => setShowSignal((value) => !value))
-            }
-          >
-            {showSignal() ? 'Hide' : 'Show'}
-          </button>
-          <Suspense fallback="Loading">
-            <Show when={showSignal()}>
-              <Suspended />
-            </Show>
-          </Suspense>
-        </div>
-      )
-    }
-
-    const rendered = render(() => (
-      <QueryClientProvider client={queryClient}>
-        <Page />
-      </QueryClientProvider>
-    ))
-
-    await waitFor(() => rendered.getByText('Show'))
-    fireEvent.click(rendered.getByLabelText('toggle'))
-
-    await waitFor(() => rendered.getByText('Message'))
-    // verify that the button also updated. See https://github.com/solidjs/solid/issues/1249
-    await waitFor(() => rendered.getByText('Hide'))
-  })
-})

package/src/__tests__/useIsFetching.test.tsx

@@ -1,251 +0,0 @@
-import { describe, expect, it } from 'vitest'
-import { fireEvent, render, waitFor } from '@solidjs/testing-library'
-import { Show, createEffect, createRenderEffect, createSignal } from 'solid-js'
-import { QueryCache, QueryClientProvider, createQuery, useIsFetching } from '..'
-import { createQueryClient, queryKey, setActTimeout, sleep } from './utils'
-
-describe('useIsFetching', () => {
-  // See https://github.com/tannerlinsley/react-query/issues/105
-  it('should update as queries start and stop fetching', async () => {
-    const queryCache = new QueryCache()
-    const queryClient = createQueryClient({ queryCache })
-    const key = queryKey()
-
-    function IsFetching() {
-      const isFetching = useIsFetching()
-      return <div>isFetching: {isFetching()}</div>
-    }
-
-    function Query() {
-      const [ready, setReady] = createSignal(false)
-
-      createQuery(() => ({
-        queryKey: key,
-        queryFn: async () => {
-          await sleep(50)
-          return 'test'
-        },
-        enabled: ready(),
-      }))
-
-      return <button onClick={() => setReady(true)}>setReady</button>
-    }
-
-    function Page() {
-      return (
-        <div>
-          <IsFetching />
-          <Query />
-        </div>
-      )
-    }
-
-    const rendered = render(() => (
-      <QueryClientProvider client={queryClient}>
-        <Page />
-      </QueryClientProvider>
-    ))
-
-    await rendered.findByText('isFetching: 0')
-    fireEvent.click(rendered.getByRole('button', { name: /setReady/i }))
-    await rendered.findByText('isFetching: 1')
-    await rendered.findByText('isFetching: 0')
-  })
-
-  it('should not update state while rendering', async () => {
-    const queryCache = new QueryCache()
-    const queryClient = createQueryClient({ queryCache })
-
-    const key1 = queryKey()
-    const key2 = queryKey()
-
-    const isFetchingArray: Array<number> = []
-
-    function IsFetching() {
-      const isFetching = useIsFetching()
-      createRenderEffect(() => {
-        isFetchingArray.push(isFetching())
-      })
-      return null
-    }
-
-    function FirstQuery() {
-      createQuery(() => ({
-        queryKey: key1,
-        queryFn: async () => {
-          await sleep(150)
-          return 'data'
-        },
-      }))
-      return null
-    }
-
-    function SecondQuery() {
-      createQuery(() => ({
-        queryKey: key2,
-        queryFn: async () => {
-          await sleep(200)
-          return 'data'
-        },
-      }))
-      return null
-    }
-
-    function Page() {
-      const [renderSecond, setRenderSecond] = createSignal(false)
-
-      createEffect(() => {
-        setActTimeout(() => {
-          setRenderSecond(true)
-        }, 100)
-      })
-
-      return (
-        <>
-          <IsFetching />
-          <FirstQuery />
-          <Show when={renderSecond()}>
-            <SecondQuery />
-          </Show>
-        </>
-      )
-    }
-
-    render(() => (
-      <QueryClientProvider client={queryClient}>
-        <Page />
-      </QueryClientProvider>
-    ))
-    // unlike react, Updating renderSecond wont cause a rerender for FirstQuery
-    await waitFor(() => expect(isFetchingArray).toEqual([0, 1, 2, 1, 0]))
-  })
-
-  it('should be able to filter', async () => {
-    const queryClient = createQueryClient()
-    const key1 = queryKey()
-    const key2 = queryKey()
-
-    const isFetchingArray: Array<number> = []
-
-    function One() {
-      createQuery(() => ({
-        queryKey: key1,
-        queryFn: async () => {
-          await sleep(10)
-          return 'test'
-        },
-      }))
-      return null
-    }
-
-    function Two() {
-      createQuery(() => ({
-        queryKey: key2,
-        queryFn: async () => {
-          await sleep(20)
-          return 'test'
-        },
-      }))
-      return null
-    }
-
-    function Page() {
-      const [started, setStarted] = createSignal(false)
-      const isFetching = useIsFetching(() => ({
-        queryKey: key1,
-      }))
-
-      createRenderEffect(() => {
-        isFetchingArray.push(isFetching())
-      })
-
-      return (
-        <div>
-          <button onClick={() => setStarted(true)}>setStarted</button>
-          <div>isFetching: {isFetching()}</div>
-          <Show when={started()}>
-            <>
-              <One />
-              <Two />
-            </>
-          </Show>
-        </div>
-      )
-    }
-
-    const rendered = render(() => (
-      <QueryClientProvider client={queryClient}>
-        <Page />
-      </QueryClientProvider>
-    ))
-
-    await rendered.findByText('isFetching: 0')
-    fireEvent.click(rendered.getByRole('button', { name: /setStarted/i }))
-    await rendered.findByText('isFetching: 1')
-    await rendered.findByText('isFetching: 0')
-    // at no point should we have isFetching: 2
-    expect(isFetchingArray).toEqual(expect.not.arrayContaining([2]))
-  })
-
-  it('should show the correct fetching state when mounted after a query', async () => {
-    const queryClient = createQueryClient()
-    const key = queryKey()
-
-    function Page() {
-      createQuery(() => ({
-        queryKey: key,
-        queryFn: async () => {
-          await sleep(10)
-          return 'test'
-        },
-      }))
-
-      const isFetching = useIsFetching()
-
-      return (
-        <div>
-          <div>isFetching: {isFetching()}</div>
-        </div>
-      )
-    }
-
-    const rendered = render(() => (
-      <QueryClientProvider client={queryClient}>
-        <Page />
-      </QueryClientProvider>
-    ))
-
-    await rendered.findByText('isFetching: 1')
-    await rendered.findByText('isFetching: 0')
-  })
-
-  it('should use provided custom queryClient', async () => {
-    const queryClient = createQueryClient()
-    const key = queryKey()
-
-    function Page() {
-      createQuery(
-        () => ({
-          queryKey: key,
-          queryFn: async () => {
-            await sleep(10)
-            return 'test'
-          },
-        }),
-        () => queryClient,
-      )
-
-      const isFetching = useIsFetching(undefined, () => queryClient)
-
-      return (
-        <div>
-          <div>isFetching: {isFetching()}</div>
-        </div>
-      )
-    }
-
-    const rendered = render(() => <Page></Page>)
-
-    await rendered.findByText('isFetching: 1')
-  })
-})

package/src/__tests__/useIsMutating.test.tsx

@@ -1,248 +0,0 @@
-import { describe, expect, it, vi } from 'vitest'
-import { fireEvent, render, waitFor } from '@solidjs/testing-library'
-import { Show, createEffect, createRenderEffect, createSignal } from 'solid-js'
-import * as QueryCore from '@tanstack/query-core'
-import { QueryClientProvider, createMutation, useIsMutating } from '..'
-import { createQueryClient, setActTimeout, sleep } from './utils'
-
-describe('useIsMutating', () => {
-  it('should return the number of fetching mutations', async () => {
-    const isMutatingArray: Array<number> = []
-    const queryClient = createQueryClient()
-
-    function IsMutating() {
-      const isMutating = useIsMutating()
-      createRenderEffect(() => {
-        isMutatingArray.push(isMutating())
-      })
-      return null
-    }
-
-    function Mutations() {
-      const { mutate: mutate1 } = createMutation(() => ({
-        mutationKey: ['mutation1'],
-        mutationFn: async () => {
-          await sleep(150)
-          return 'data'
-        },
-      }))
-      const { mutate: mutate2 } = createMutation(() => ({
-        mutationKey: ['mutation2'],
-        mutationFn: async () => {
-          await sleep(50)
-          return 'data'
-        },
-      }))
-
-      createEffect(() => {
-        mutate1()
-        setActTimeout(() => {
-          mutate2()
-        }, 50)
-      })
-
-      return null
-    }
-
-    function Page() {
-      return (
-        <div>
-          <IsMutating />
-          <Mutations />
-        </div>
-      )
-    }
-
-    render(() => (
-      <QueryClientProvider client={queryClient}>
-        <Page />
-      </QueryClientProvider>
-    ))
-    await waitFor(() => expect(isMutatingArray).toEqual([0, 1, 2, 1, 0]))
-  })
-
-  it('should filter correctly by mutationKey', async () => {
-    const isMutatingArray: Array<number> = []
-    const queryClient = createQueryClient()
-
-    function IsMutating() {
-      const isMutating = useIsMutating(() => ({ mutationKey: ['mutation1'] }))
-      createRenderEffect(() => {
-        isMutatingArray.push(isMutating())
-      })
-      return null
-    }
-
-    function Page() {
-      const { mutate: mutate1 } = createMutation(() => ({
-        mutationKey: ['mutation1'],
-        mutationFn: async () => {
-          await sleep(100)
-          return 'data'
-        },
-      }))
-      const { mutate: mutate2 } = createMutation(() => ({
-        mutationKey: ['mutation2'],
-        mutationFn: async () => {
-          await sleep(100)
-          return 'data'
-        },
-      }))
-
-      createEffect(() => {
-        mutate1()
-        mutate2()
-      })
-
-      return <IsMutating />
-    }
-
-    render(() => (
-      <QueryClientProvider client={queryClient}>
-        <Page />
-      </QueryClientProvider>
-    ))
-    // Unlike React, IsMutating Wont re-render twice with mutation2
-    await waitFor(() => expect(isMutatingArray).toEqual([0, 1, 0]))
-  })
-
-  it('should filter correctly by predicate', async () => {
-    const isMutatingArray: Array<number> = []
-    const queryClient = createQueryClient()
-
-    function IsMutating() {
-      const isMutating = useIsMutating(() => ({
-        predicate: (mutation) =>
-          mutation.options.mutationKey?.[0] === 'mutation1',
-      }))
-      createRenderEffect(() => {
-        isMutatingArray.push(isMutating())
-      })
-      return null
-    }
-
-    function Page() {
-      const { mutate: mutate1 } = createMutation(() => ({
-        mutationKey: ['mutation1'],
-        mutationFn: async () => {
-          await sleep(100)
-          return 'data'
-        },
-      }))
-      const { mutate: mutate2 } = createMutation(() => ({
-        mutationKey: ['mutation2'],
-        mutationFn: async () => {
-          await sleep(100)
-          return 'data'
-        },
-      }))
-
-      createEffect(() => {
-        mutate1()
-        mutate2()
-      })
-
-      return <IsMutating />
-    }
-
-    render(() => (
-      <QueryClientProvider client={queryClient}>
-        <Page />
-      </QueryClientProvider>
-    ))
-
-    // Again, No unnecessary re-renders like React
-    await waitFor(() => expect(isMutatingArray).toEqual([0, 1, 0]))
-  })
-
-  it('should use provided custom queryClient', async () => {
-    const queryClient = createQueryClient()
-
-    function Page() {
-      const isMutating = useIsMutating(undefined, () => queryClient)
-      const { mutate } = createMutation(
-        () => ({
-          mutationKey: ['mutation1'],
-          mutationFn: async () => {
-            await sleep(10)
-            return 'data'
-          },
-        }),
-        () => queryClient,
-      )
-      createEffect(() => {
-        mutate()
-      })
-      return (
-        <div>
-          <div>mutating: {isMutating()}</div>
-        </div>
-      )
-    }
-
-    const rendered = render(() => <Page></Page>)
-
-    await waitFor(() => rendered.findByText('mutating: 1'))
-  })
-
-  it('should not change state if unmounted', async () => {
-    // We have to mock the MutationCache to not unsubscribe
-    // the listener when the component is unmounted
-    class MutationCacheMock extends QueryCore.MutationCache {
-      subscribe(listener: any) {
-        super.subscribe(listener)
-        return () => void 0
-      }
-    }
-
-    const MutationCacheSpy = vi
-      .spyOn(QueryCore, 'MutationCache')
-      .mockImplementation((fn) => {
-        return new MutationCacheMock(fn)
-      })
-
-    const queryClient = createQueryClient()
-
-    function IsMutating() {
-      useIsMutating()
-      return null
-    }
-
-    function Page() {
-      const [mounted, setMounted] = createSignal(true)
-      const { mutate: mutate1 } = createMutation(() => ({
-        mutationKey: ['mutation1'],
-        mutationFn: async () => {
-          await sleep(10)
-          return 'data'
-        },
-      }))
-
-      createEffect(() => {
-        mutate1()
-      })
-
-      return (
-        <div>
-          <button onClick={() => setMounted(false)}>unmount</button>
-          <Show when={mounted()}>
-            <IsMutating />
-          </Show>
-        </div>
-      )
-    }
-
-    const rendered = render(() => (
-      <QueryClientProvider client={queryClient}>
-        <Page />
-      </QueryClientProvider>
-    ))
-    fireEvent.click(rendered.getByText('unmount'))
-
-    // Should not display the console error
-    // "Warning: Can't perform a React state update on an unmounted component"
-
-    await sleep(20)
-    MutationCacheSpy.mockRestore()
-  })
-})

package/src/__tests__/useMutationState.test-d.tsx

@@ -1,21 +0,0 @@
-import { describe, expectTypeOf, it } from 'vitest'
-import { useMutationState } from '../useMutationState'
-import type { MutationState, MutationStatus } from '@tanstack/query-core'
-
-describe('useMutationState', () => {
-  it('should default to QueryState', () => {
-    const result = useMutationState(() => ({
-      filters: { status: 'pending' },
-    }))
-
-    expectTypeOf(result()).toEqualTypeOf<Array<MutationState>>()
-  })
-  it('should infer with select', () => {
-    const result = useMutationState(() => ({
-      filters: { status: 'pending' },
-      select: (mutation) => mutation.state.status,
-    }))
-
-    expectTypeOf(result()).toEqualTypeOf<Array<MutationStatus>>()
-  })
-})

package/src/__tests__/useMutationState.test.tsx

@@ -1,68 +0,0 @@
-import { describe, expect, it } from 'vitest'
-import { fireEvent, render, waitFor } from '@solidjs/testing-library'
-import { createEffect } from 'solid-js'
-import { useMutationState } from '../useMutationState'
-import { createMutation } from '../createMutation'
-import { QueryClientProvider } from '../QueryClientProvider'
-import { createQueryClient, sleep } from './utils'
-
-describe('useMutationState', () => {
-  it('should return variables after calling mutate', async () => {
-    const queryClient = createQueryClient()
-    const variables: Array<Array<unknown>> = []
-    const mutationKey = ['mutation']
-
-    function Variables() {
-      const states = useMutationState(() => ({
-        filters: { mutationKey, status: 'pending' },
-        select: (mutation) => mutation.state.variables,
-      }))
-
-      createEffect(() => {
-        variables.push(states())
-      })
-
-      return null
-    }
-
-    function Mutate() {
-      const mutation = createMutation(() => ({
-        mutationKey,
-        mutationFn: async (input: number) => {
-          await sleep(150)
-          return 'data' + input
-        },
-      }))
-
-      return (
-        <div>
-          data: {mutation.data ?? 'null'}
-          <button onClick={() => mutation.mutate(1)}>mutate</button>
-        </div>
-      )
-    }
-
-    function Page() {
-      return (
-        <div>
-          <Variables />
-          <Mutate />
-        </div>
-      )
-    }
-
-    const rendered = render(() => (
-      <QueryClientProvider client={queryClient}>
-        <Page />
-      </QueryClientProvider>
-    ))
-
-    await waitFor(() => rendered.getByText('data: null'))
-
-    fireEvent.click(rendered.getByRole('button', { name: /mutate/i }))
-
-    await waitFor(() => rendered.getByText('data: data1'))
-
-    expect(variables).toEqual([[], [1], []])
-  })
-})

package/src/__tests__/utils.tsx

@@ -1,61 +0,0 @@
-import { vi } from 'vitest'
-import { Show, createEffect, createSignal, onCleanup } from 'solid-js'
-import { onlineManager } from '@tanstack/query-core'
-import { QueryClient } from '../QueryClient'
-import type { QueryClientConfig } from '..'
-import type { ParentProps } from 'solid-js'
-import type { MockInstance } from 'vitest'
-
-let queryKeyCount = 0
-export function queryKey() {
-  queryKeyCount++
-  return [`query_${queryKeyCount}`]
-}
-
-export function Blink(
-  props: {
-    duration: number
-  } & ParentProps,
-) {
-  const [shouldShow, setShouldShow] = createSignal<boolean>(true)
-
-  createEffect(() => {
-    setShouldShow(true)
-    const timeout = setActTimeout(() => setShouldShow(false), props.duration)
-    onCleanup(() => clearTimeout(timeout))
-  })
-
-  return (
-    <Show when={shouldShow()} fallback={<>off</>}>
-      <>{props.children}</>
-    </Show>
-  )
-}
-
-export function createQueryClient(config?: QueryClientConfig): QueryClient {
-  return new QueryClient(config)
-}
-
-export function mockVisibilityState(
-  value: DocumentVisibilityState,
-): MockInstance<() => DocumentVisibilityState> {
-  return vi.spyOn(document, 'visibilityState', 'get').mockReturnValue(value)
-}
-
-export function mockOnlineManagerIsOnline(
-  value: boolean,
-): MockInstance<() => boolean> {
-  return vi.spyOn(onlineManager, 'isOnline').mockReturnValue(value)
-}
-
-export function sleep(timeout: number): Promise<void> {
-  return new Promise((resolve, _reject) => {
-    setTimeout(resolve, timeout)
-  })
-}
-
-export function setActTimeout(fn: () => void, ms?: number) {
-  return setTimeout(() => {
-    fn()
-  }, ms)
-}