@tanstack/svelte-query 4.21.0

package/src/__tests__/createQuery.test.ts

@@ -0,0 +1,28 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/svelte'
+import CreateQuery from './CreateQuery.svelte'
+import { sleep } from './utils'
+
+describe('createQuery', () => {
+  it('Render and wait for success', async () => {
+    render(CreateQuery, {
+      props: {
+        queryKey: ['test'],
+        queryFn: async () => {
+          await sleep(100)
+          return 'Success'
+        },
+      },
+    })
+
+    expect(screen.queryByText('Loading')).toBeInTheDocument()
+    expect(screen.queryByText('Error')).not.toBeInTheDocument()
+    expect(screen.queryByText('Success')).not.toBeInTheDocument()
+
+    await sleep(200)
+
+    expect(screen.queryByText('Success')).toBeInTheDocument()
+    expect(screen.queryByText('Loading')).not.toBeInTheDocument()
+    expect(screen.queryByText('Error')).not.toBeInTheDocument()
+  })
+})

package/src/__tests__/utils.ts

@@ -0,0 +1,72 @@
+import { vi } from 'vitest'
+import { act } from '@testing-library/svelte'
+import {
+  QueryClient,
+  type QueryClientConfig,
+  type MutationOptions,
+} from '../lib'
+
+export function createQueryClient(config?: QueryClientConfig): QueryClient {
+  vi.spyOn(console, 'error').mockImplementation(() => undefined)
+  return new QueryClient({ logger: mockLogger, ...config })
+}
+
+export function mockVisibilityState(value: DocumentVisibilityState) {
+  return vi.spyOn(document, 'visibilityState', 'get').mockReturnValue(value)
+}
+
+export function mockNavigatorOnLine(value: boolean) {
+  return vi.spyOn(navigator, 'onLine', 'get').mockReturnValue(value)
+}
+
+export const mockLogger = {
+  log: vi.fn(),
+  warn: vi.fn(),
+  error: vi.fn(),
+}
+
+let queryKeyCount = 0
+export function queryKey(): Array<string> {
+  queryKeyCount++
+  return [`query_${queryKeyCount}`]
+}
+
+export function sleep(timeout: number): Promise<void> {
+  return new Promise((resolve, _reject) => {
+    setTimeout(resolve, timeout)
+  })
+}
+
+export async function simplefetcher() {
+  await sleep(10)
+  return 'test'
+}
+
+export function setActTimeout(fn: () => void, ms?: number) {
+  return setTimeout(() => {
+    act(() => {
+      fn()
+    })
+  }, ms)
+}
+
+/**
+ * Assert the parameter is of a specific type.
+ */
+export function expectType<T>(_: T): void {
+  return undefined
+}
+
+/**
+ * Assert the parameter is not typed as `any`
+ */
+export function expectTypeNotAny<T>(_: 0 extends 1 & T ? never : T): void {
+  return undefined
+}
+
+export function executeMutation(
+  queryClient: QueryClient,
+  options: MutationOptions<any, any, any, any>,
+): Promise<unknown> {
+  return queryClient.getMutationCache().build(queryClient, options).execute()
+}

package/src/lib/Hydrate.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import type { DehydratedState, HydrateOptions } from '@tanstack/query-core'
+  import { useHydrate } from './useHydrate'
+
+  export let state: DehydratedState
+  export let options: HydrateOptions | undefined = undefined
+
+  useHydrate(state, options)
+</script>
+
+<slot />

package/src/lib/QueryClientProvider.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import { onMount, onDestroy } from 'svelte'
+  import { QueryClient } from '@tanstack/query-core'
+  import { setQueryClientContext } from './context'
+
+  export let client = new QueryClient()
+
+  onMount(() => {
+    client.mount()
+  })
+
+  setQueryClientContext(client)
+
+  onDestroy(() => {
+    client.unmount()
+  })
+</script>
+
+<slot />

package/src/lib/context.ts

@@ -0,0 +1,21 @@
+import { setContext, getContext } from 'svelte'
+import type { QueryClient } from '@tanstack/query-core'
+
+const _contextKey = '$$_queryClient'
+
+/** Retrieves a Client from Svelte's context */
+export const getQueryClientContext = (): QueryClient => {
+  const client = getContext(_contextKey)
+  if (!client) {
+    throw new Error(
+      'No QueryClient was found in Svelte context. Did you forget to wrap your component with QueryClientProvider?',
+    )
+  }
+
+  return client as QueryClient
+}
+
+/** Sets a QueryClient on Svelte's context */
+export const setQueryClientContext = (client: QueryClient): void => {
+  setContext(_contextKey, client)
+}

package/src/lib/createBaseQuery.ts

@@ -0,0 +1,76 @@
+import {
+  notifyManager,
+  type QueryKey,
+  type QueryObserver,
+} from '@tanstack/query-core'
+import type { CreateBaseQueryOptions } from './types'
+import { useQueryClient } from './useQueryClient'
+import { derived, readable } from 'svelte/store'
+
+export function createBaseQuery<
+  TQueryFnData,
+  TError,
+  TData,
+  TQueryData,
+  TQueryKey extends QueryKey,
+>(
+  options: CreateBaseQueryOptions<
+    TQueryFnData,
+    TError,
+    TData,
+    TQueryData,
+    TQueryKey
+  >,
+  Observer: typeof QueryObserver,
+) {
+  const queryClient = useQueryClient()
+  const defaultedOptions = queryClient.defaultQueryOptions(options)
+  defaultedOptions._optimisticResults = 'optimistic'
+
+  let observer = new Observer<
+    TQueryFnData,
+    TError,
+    TData,
+    TQueryData,
+    TQueryKey
+  >(queryClient, defaultedOptions)
+
+  // Include callbacks in batch renders
+  if (defaultedOptions.onError) {
+    defaultedOptions.onError = notifyManager.batchCalls(
+      defaultedOptions.onError,
+    )
+  }
+
+  if (defaultedOptions.onSuccess) {
+    defaultedOptions.onSuccess = notifyManager.batchCalls(
+      defaultedOptions.onSuccess,
+    )
+  }
+
+  if (defaultedOptions.onSettled) {
+    defaultedOptions.onSettled = notifyManager.batchCalls(
+      defaultedOptions.onSettled,
+    )
+  }
+
+  readable(observer).subscribe(($observer) => {
+    observer = $observer
+    // Do not notify on updates because of changes in the options because
+    // these changes should already be reflected in the optimistic result.
+    observer.setOptions(defaultedOptions, { listeners: false })
+  })
+
+  const result = readable(observer.getCurrentResult(), (set) => {
+    return observer.subscribe(notifyManager.batchCalls(set))
+  })
+
+  const { subscribe } = derived(result, ($result) => {
+    $result = observer.getOptimisticResult(defaultedOptions)
+    return !defaultedOptions.notifyOnChangeProps
+      ? observer.trackResult($result)
+      : $result
+  })
+
+  return { subscribe }
+}

package/src/lib/createInfiniteQuery.ts

@@ -0,0 +1,103 @@
+import {
+  InfiniteQueryObserver,
+  parseQueryArgs,
+  type QueryObserver,
+  type QueryFunction,
+  type QueryKey,
+} from '@tanstack/query-core'
+import type {
+  CreateInfiniteQueryOptions,
+  CreateInfiniteQueryResult,
+} from './types'
+import { createBaseQuery } from './createBaseQuery'
+
+export function createInfiniteQuery<
+  TQueryFnData = unknown,
+  TError = unknown,
+  TData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey,
+>(
+  options: CreateInfiniteQueryOptions<
+    TQueryFnData,
+    TError,
+    TData,
+    TQueryFnData,
+    TQueryKey
+  >,
+): CreateInfiniteQueryResult<TData, TError>
+export function createInfiniteQuery<
+  TQueryFnData = unknown,
+  TError = unknown,
+  TData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey,
+>(
+  queryKey: TQueryKey,
+  options?: Omit<
+    CreateInfiniteQueryOptions<
+      TQueryFnData,
+      TError,
+      TData,
+      TQueryFnData,
+      TQueryKey
+    >,
+    'queryKey'
+  >,
+): CreateInfiniteQueryResult<TData, TError>
+export function createInfiniteQuery<
+  TQueryFnData = unknown,
+  TError = unknown,
+  TData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey,
+>(
+  queryKey: TQueryKey,
+  queryFn: QueryFunction<TQueryFnData, TQueryKey>,
+  options?: Omit<
+    CreateInfiniteQueryOptions<
+      TQueryFnData,
+      TError,
+      TData,
+      TQueryFnData,
+      TQueryKey
+    >,
+    'queryKey' | 'queryFn'
+  >,
+): CreateInfiniteQueryResult<TData, TError>
+
+export function createInfiniteQuery<
+  TQueryFnData,
+  TError,
+  TData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey,
+>(
+  arg1:
+    | TQueryKey
+    | CreateInfiniteQueryOptions<
+        TQueryFnData,
+        TError,
+        TData,
+        TQueryFnData,
+        TQueryKey
+      >,
+  arg2?:
+    | QueryFunction<TQueryFnData, TQueryKey>
+    | CreateInfiniteQueryOptions<
+        TQueryFnData,
+        TError,
+        TData,
+        TQueryFnData,
+        TQueryKey
+      >,
+  arg3?: CreateInfiniteQueryOptions<
+    TQueryFnData,
+    TError,
+    TData,
+    TQueryFnData,
+    TQueryKey
+  >,
+): CreateInfiniteQueryResult<TData, TError> {
+  const options = parseQueryArgs(arg1, arg2, arg3)
+  return createBaseQuery(
+    options,
+    InfiniteQueryObserver as typeof QueryObserver,
+  ) as CreateInfiniteQueryResult<TData, TError>
+}

package/src/lib/createMutation.ts

@@ -0,0 +1,110 @@
+import { readable, derived } from 'svelte/store'
+import {
+  type MutationFunction,
+  type MutationKey,
+  MutationObserver,
+  notifyManager,
+  parseMutationArgs,
+} from '@tanstack/query-core'
+import type {
+  UseMutateFunction,
+  CreateMutationOptions,
+  MutationStoreResult,
+} from './types'
+import { useQueryClient } from './useQueryClient'
+
+export function createMutation<
+  TData = unknown,
+  TError = unknown,
+  TVariables = unknown,
+  TContext = unknown,
+>(
+  options: CreateMutationOptions<TData, TError, TVariables, TContext>,
+): MutationStoreResult<TData, TError, TVariables, TContext>
+
+export function createMutation<
+  TData = unknown,
+  TError = unknown,
+  TVariables = unknown,
+  TContext = unknown,
+>(
+  mutationFn: MutationFunction<TData, TVariables>,
+  options?: Omit<
+    CreateMutationOptions<TData, TError, TVariables, TContext>,
+    'mutationFn'
+  >,
+): MutationStoreResult<TData, TError, TVariables, TContext>
+
+export function createMutation<
+  TData = unknown,
+  TError = unknown,
+  TVariables = unknown,
+  TContext = unknown,
+>(
+  mutationKey: MutationKey,
+  options?: Omit<
+    CreateMutationOptions<TData, TError, TVariables, TContext>,
+    'mutationKey'
+  >,
+): MutationStoreResult<TData, TError, TVariables, TContext>
+
+export function createMutation<
+  TData = unknown,
+  TError = unknown,
+  TVariables = unknown,
+  TContext = unknown,
+>(
+  mutationKey: MutationKey,
+  mutationFn?: MutationFunction<TData, TVariables>,
+  options?: Omit<
+    CreateMutationOptions<TData, TError, TVariables, TContext>,
+    'mutationKey' | 'mutationFn'
+  >,
+): MutationStoreResult<TData, TError, TVariables, TContext>
+
+export function createMutation<
+  TData = unknown,
+  TError = unknown,
+  TVariables = unknown,
+  TContext = unknown,
+>(
+  arg1:
+    | MutationKey
+    | MutationFunction<TData, TVariables>
+    | CreateMutationOptions<TData, TError, TVariables, TContext>,
+  arg2?:
+    | MutationFunction<TData, TVariables>
+    | CreateMutationOptions<TData, TError, TVariables, TContext>,
+  arg3?: CreateMutationOptions<TData, TError, TVariables, TContext>,
+): MutationStoreResult<TData, TError, TVariables, TContext> {
+  const options = parseMutationArgs(arg1, arg2, arg3)
+  const queryClient = useQueryClient()
+  let observer = new MutationObserver<TData, TError, TVariables, TContext>(
+    queryClient,
+    options,
+  )
+  let mutate: UseMutateFunction<TData, TError, TVariables, TContext>
+
+  readable(observer).subscribe(($observer) => {
+    observer = $observer
+    mutate = (variables, mutateOptions) => {
+      observer.mutate(variables, mutateOptions).catch(noop)
+    }
+    observer.setOptions(options)
+  })
+
+  const result = readable(observer.getCurrentResult(), (set) => {
+    return observer.subscribe(notifyManager.batchCalls((val) => set(val)))
+  })
+
+  const { subscribe } = derived(result, ($result) => ({
+    ...$result,
+    mutate,
+    mutateAsync: $result.mutate,
+  }))
+
+  return { subscribe }
+}
+
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+function noop() {}

package/src/lib/createQueries.ts

@@ -0,0 +1,178 @@
+import type { QueryKey, QueryFunction, QueryClient } from '@tanstack/query-core'
+
+import { notifyManager, QueriesObserver } from '@tanstack/query-core'
+import { readable, type Readable } from 'svelte/store'
+
+import type { CreateQueryOptions, CreateQueryResult } from './types'
+import { useQueryClient } from './useQueryClient'
+
+// This defines the `CreateQueryOptions` that are accepted in `QueriesOptions` & `GetOptions`.
+// - `context` is omitted as it is passed as a root-level option to `createQueries` instead.
+type CreateQueryOptionsForCreateQueries<
+  TQueryFnData = unknown,
+  TError = unknown,
+  TData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey,
+> = Omit<CreateQueryOptions<TQueryFnData, TError, TData, TQueryKey>, 'context'>
+
+// Avoid TS depth-limit error in case of large array literal
+type MAXIMUM_DEPTH = 20
+
+type GetOptions<T> =
+  // Part 1: responsible for applying explicit type parameter to function arguments, if object { queryFnData: TQueryFnData, error: TError, data: TData }
+  T extends {
+    queryFnData: infer TQueryFnData
+    error?: infer TError
+    data: infer TData
+  }
+    ? CreateQueryOptionsForCreateQueries<TQueryFnData, TError, TData>
+    : T extends { queryFnData: infer TQueryFnData; error?: infer TError }
+    ? CreateQueryOptionsForCreateQueries<TQueryFnData, TError>
+    : T extends { data: infer TData; error?: infer TError }
+    ? CreateQueryOptionsForCreateQueries<unknown, TError, TData>
+    : // Part 2: responsible for applying explicit type parameter to function arguments, if tuple [TQueryFnData, TError, TData]
+    T extends [infer TQueryFnData, infer TError, infer TData]
+    ? CreateQueryOptionsForCreateQueries<TQueryFnData, TError, TData>
+    : T extends [infer TQueryFnData, infer TError]
+    ? CreateQueryOptionsForCreateQueries<TQueryFnData, TError>
+    : T extends [infer TQueryFnData]
+    ? CreateQueryOptionsForCreateQueries<TQueryFnData>
+    : // Part 3: responsible for inferring and enforcing type if no explicit parameter was provided
+    T extends {
+        queryFn?: QueryFunction<infer TQueryFnData, infer TQueryKey>
+        select: (data: any) => infer TData
+      }
+    ? CreateQueryOptionsForCreateQueries<
+        TQueryFnData,
+        unknown,
+        TData,
+        TQueryKey
+      >
+    : T extends { queryFn?: QueryFunction<infer TQueryFnData, infer TQueryKey> }
+    ? CreateQueryOptionsForCreateQueries<
+        TQueryFnData,
+        unknown,
+        TQueryFnData,
+        TQueryKey
+      >
+    : // Fallback
+      CreateQueryOptionsForCreateQueries
+
+type GetResults<T> =
+  // Part 1: responsible for mapping explicit type parameter to function result, if object
+  T extends { queryFnData: any; error?: infer TError; data: infer TData }
+    ? CreateQueryResult<TData, TError>
+    : T extends { queryFnData: infer TQueryFnData; error?: infer TError }
+    ? CreateQueryResult<TQueryFnData, TError>
+    : T extends { data: infer TData; error?: infer TError }
+    ? CreateQueryResult<TData, TError>
+    : // Part 2: responsible for mapping explicit type parameter to function result, if tuple
+    T extends [any, infer TError, infer TData]
+    ? CreateQueryResult<TData, TError>
+    : T extends [infer TQueryFnData, infer TError]
+    ? CreateQueryResult<TQueryFnData, TError>
+    : T extends [infer TQueryFnData]
+    ? CreateQueryResult<TQueryFnData>
+    : // Part 3: responsible for mapping inferred type to results, if no explicit parameter was provided
+    T extends {
+        queryFn?: QueryFunction<unknown, any>
+        select: (data: any) => infer TData
+      }
+    ? CreateQueryResult<TData>
+    : T extends { queryFn?: QueryFunction<infer TQueryFnData, any> }
+    ? CreateQueryResult<TQueryFnData>
+    : // Fallback
+      CreateQueryResult
+
+/**
+ * QueriesOptions reducer recursively unwraps function arguments to infer/enforce type param
+ */
+export type QueriesOptions<
+  T extends any[],
+  Result extends any[] = [],
+  Depth extends ReadonlyArray<number> = [],
+> = Depth['length'] extends MAXIMUM_DEPTH
+  ? CreateQueryOptionsForCreateQueries[]
+  : T extends []
+  ? []
+  : T extends [infer Head]
+  ? [...Result, GetOptions<Head>]
+  : T extends [infer Head, ...infer Tail]
+  ? QueriesOptions<[...Tail], [...Result, GetOptions<Head>], [...Depth, 1]>
+  : unknown[] extends T
+  ? T
+  : // If T is *some* array but we couldn't assign unknown[] to it, then it must hold some known/homogenous type!
+  // use this to infer the param types in the case of Array.map() argument
+  T extends CreateQueryOptionsForCreateQueries<
+      infer TQueryFnData,
+      infer TError,
+      infer TData,
+      infer TQueryKey
+    >[]
+  ? CreateQueryOptionsForCreateQueries<TQueryFnData, TError, TData, TQueryKey>[]
+  : // Fallback
+    CreateQueryOptionsForCreateQueries[]
+
+/**
+ * QueriesResults reducer recursively maps type param to results
+ */
+export type QueriesResults<
+  T extends any[],
+  Result extends any[] = [],
+  Depth extends ReadonlyArray<number> = [],
+> = Depth['length'] extends MAXIMUM_DEPTH
+  ? CreateQueryResult[]
+  : T extends []
+  ? []
+  : T extends [infer Head]
+  ? [...Result, GetResults<Head>]
+  : T extends [infer Head, ...infer Tail]
+  ? QueriesResults<[...Tail], [...Result, GetResults<Head>], [...Depth, 1]>
+  : T extends CreateQueryOptionsForCreateQueries<
+      infer TQueryFnData,
+      infer TError,
+      infer TData,
+      any
+    >[]
+  ? // Dynamic-size (homogenous) CreateQueryOptions array: map directly to array of results
+    CreateQueryResult<unknown extends TData ? TQueryFnData : TData, TError>[]
+  : // Fallback
+    CreateQueryResult[]
+
+export type CreateQueriesResult<T extends any[]> = Readable<QueriesResults<T>>
+
+export function createQueries<T extends any[]>(
+  queries: readonly [...QueriesOptions<T>],
+): CreateQueriesResult<T> {
+  const client: QueryClient = useQueryClient()
+  // const isRestoring = useIsRestoring()
+
+  function getDefaultQuery(newQueries: readonly [...QueriesOptions<T>]) {
+    return newQueries.map((options) => {
+      const defaultedOptions = client.defaultQueryOptions(options)
+      // Make sure the results are already in fetching state before subscribing or updating options
+      defaultedOptions._optimisticResults = 'optimistic'
+
+      return defaultedOptions
+    })
+  }
+
+  const defaultedQueries = getDefaultQuery(queries)
+  let observer = new QueriesObserver(client, defaultedQueries)
+
+  readable(observer).subscribe(($observer) => {
+    observer = $observer
+    // Do not notify on updates because of changes in the options because
+    // these changes should already be reflected in the optimistic result.
+    observer.setQueries(defaultedQueries, { listeners: false })
+  })
+
+  const { subscribe } = readable(
+    observer.getOptimisticResult(defaultedQueries) as any,
+    (set) => {
+      return observer.subscribe(notifyManager.batchCalls(set))
+    },
+  )
+
+  return { subscribe }
+}