@tanstack/svelte-query 4.24.10 → 5.0.0-alpha.1

package/src/__tests__/createQueries.test.ts

@@ -1,37 +1,41 @@
 import { describe, it, expect } from 'vitest'
-import { render, screen } from '@testing-library/svelte'
+import { render, waitFor } from '@testing-library/svelte'
 import CreateQueries from './CreateQueries.svelte'
 import { sleep } from './utils'
 
 describe('createQueries', () => {
   it('Render and wait for success', async () => {
-    render(CreateQueries, {
+    const rendered = render(CreateQueries, {
       props: {
-        options: [
-          {
-            queryKey: ['key-1'],
-            queryFn: async () => {
-              await sleep(10)
-              return 'Success 1'
+        options: {
+          queries: [
+            {
+              queryKey: ['key-1'],
+              queryFn: async () => {
+                await sleep(10)
+                return 'Success 1'
+              },
             },
-          },
-          {
-            queryKey: ['key-2'],
-            queryFn: async () => {
-              await sleep(10)
-              return 'Success 2'
+            {
+              queryKey: ['key-2'],
+              queryFn: async () => {
+                await sleep(10)
+                return 'Success 2'
+              },
             },
-          },
-        ],
+          ],
+        },
       },
     })
 
-    expect(screen.queryByText('Success 1')).not.toBeInTheDocument()
-    expect(screen.queryByText('Success 2')).not.toBeInTheDocument()
-
-    await sleep(20)
+    await waitFor(() => {
+      expect(rendered.getByText('Loading 1')).toBeInTheDocument()
+      expect(rendered.getByText('Loading 2')).toBeInTheDocument()
+    })
 
-    expect(screen.queryByText('Success 1')).toBeInTheDocument()
-    expect(screen.queryByText('Success 2')).toBeInTheDocument()
+    await waitFor(() => {
+      expect(rendered.getByText('Success 1')).toBeInTheDocument()
+      expect(rendered.getByText('Success 2')).toBeInTheDocument()
+    })
   })
 })

package/src/__tests__/createQuery.test.ts

@@ -1,7 +1,9 @@
 import { describe, it, expect } from 'vitest'
 import { render, waitFor } from '@testing-library/svelte'
+import { writable } from 'svelte/store'
 import CreateQuery from './CreateQuery.svelte'
 import { sleep } from './utils'
+import type { CreateQueryOptions, WritableOrVal } from '../types'
 
 describe('createQuery', () => {
   it('Render and wait for success', async () => {
@@ -25,4 +27,38 @@ describe('createQuery', () => {
       expect(rendered.getByText('Success')).toBeInTheDocument()
     })
   })
+
+  it('should keep previous data when returned as placeholder data', async () => {
+    const options: WritableOrVal<CreateQueryOptions> = writable({
+      queryKey: ['test', [1]],
+      queryFn: async ({ queryKey }) => {
+        await sleep(50)
+        const ids = queryKey[1]
+        if (!ids || !Array.isArray(ids)) return []
+        return ids.map((id) => ({ id }))
+      },
+      placeholderData: (previousData: { id: number }[]) => previousData,
+    })
+    const rendered = render(CreateQuery, { props: { options } })
+
+    expect(rendered.queryByText('id: 1')).not.toBeInTheDocument()
+    expect(rendered.queryByText('id: 2')).not.toBeInTheDocument()
+
+    await sleep(100)
+
+    expect(rendered.queryByText('id: 1')).toBeInTheDocument()
+    expect(rendered.queryByText('id: 2')).not.toBeInTheDocument()
+
+    options.update((o) => ({ ...o, queryKey: ['test', [1, 2]] }))
+
+    await sleep(0)
+
+    expect(rendered.queryByText('id: 1')).toBeInTheDocument()
+    expect(rendered.queryByText('id: 2')).not.toBeInTheDocument()
+
+    await sleep(100)
+
+    expect(rendered.queryByText('id: 1')).toBeInTheDocument()
+    expect(rendered.queryByText('id: 2')).toBeInTheDocument()
+  })
 })

package/src/__tests__/utils.ts

@@ -1,14 +1,9 @@
 import { vi } from 'vitest'
 import { act } from '@testing-library/svelte'
-import {
-  QueryClient,
-  type QueryClientConfig,
-  type MutationOptions,
-} from '../index'
+import { QueryClient, type QueryClientConfig } from '../index'
 
 export function createQueryClient(config?: QueryClientConfig): QueryClient {
-  vi.spyOn(console, 'error').mockImplementation(() => undefined)
-  return new QueryClient({ logger: mockLogger, ...config })
+  return new QueryClient(config)
 }
 
 export function mockVisibilityState(value: DocumentVisibilityState) {
@@ -19,12 +14,6 @@ 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++
@@ -49,24 +38,3 @@ export function setActTimeout(fn: () => void, ms?: number) {
     })
   }, 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/createBaseQuery.ts

@@ -1,11 +1,13 @@
-import {
-  notifyManager,
-  type QueryKey,
-  type QueryObserver,
-} from '@tanstack/query-core'
-import type { CreateBaseQueryOptions, CreateBaseQueryResult } from './types'
+import type { QueryClient, QueryKey, QueryObserver } from '@tanstack/query-core'
+import { notifyManager } from '@tanstack/query-core'
+import type {
+  CreateBaseQueryOptions,
+  CreateBaseQueryResult,
+  WritableOrVal,
+} from './types'
 import { useQueryClient } from './useQueryClient'
-import { derived, readable } from 'svelte/store'
+import { derived, get, readable, writable } from 'svelte/store'
+import { isWritable } from './utils'
 
 export function createBaseQuery<
   TQueryFnData,
@@ -14,51 +16,54 @@ export function createBaseQuery<
   TQueryData,
   TQueryKey extends QueryKey,
 >(
-  options: CreateBaseQueryOptions<
-    TQueryFnData,
-    TError,
-    TData,
-    TQueryData,
-    TQueryKey
+  options: WritableOrVal<
+    CreateBaseQueryOptions<TQueryFnData, TError, TData, TQueryData, TQueryKey>
   >,
   Observer: typeof QueryObserver,
+  queryClient?: QueryClient,
 ): CreateBaseQueryResult<TData, TError> {
-  const queryClient = useQueryClient()
-  const defaultedOptions = queryClient.defaultQueryOptions(options)
-  defaultedOptions._optimisticResults = 'optimistic'
+  const client = useQueryClient(queryClient)
+
+  const optionsStore = isWritable(options) ? options : writable(options)
+
+  const defaultedOptionsStore = derived(optionsStore, ($options) => {
+    const defaultedOptions = client.defaultQueryOptions($options)
+    defaultedOptions._optimisticResults = 'optimistic'
+
+    // Include callbacks in batch renders
+    if (defaultedOptions.onError) {
+      defaultedOptions.onError = notifyManager.batchCalls(
+        defaultedOptions.onError,
+      )
+    }
 
-  let observer = new Observer<
+    if (defaultedOptions.onSuccess) {
+      defaultedOptions.onSuccess = notifyManager.batchCalls(
+        defaultedOptions.onSuccess,
+      )
+    }
+
+    if (defaultedOptions.onSettled) {
+      defaultedOptions.onSettled = notifyManager.batchCalls(
+        defaultedOptions.onSettled,
+      )
+    }
+
+    return defaultedOptions
+  })
+
+  const 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,
-    )
-  }
+  >(client, get(defaultedOptionsStore))
 
-  readable(observer).subscribe(($observer) => {
-    observer = $observer
+  defaultedOptionsStore.subscribe(($defaultedOptions) => {
     // 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 })
+    observer.setOptions($defaultedOptions, { listeners: false })
   })
 
   const result = readable(observer.getCurrentResult(), (set) => {
@@ -66,8 +71,8 @@ export function createBaseQuery<
   })
 
   const { subscribe } = derived(result, ($result) => {
-    $result = observer.getOptimisticResult(defaultedOptions)
-    return !defaultedOptions.notifyOnChangeProps
+    $result = observer.getOptimisticResult(get(defaultedOptionsStore))
+    return !get(defaultedOptionsStore).notifyOnChangeProps
       ? observer.trackResult($result)
       : $result
   })

package/src/createInfiniteQuery.ts

@@ -1,103 +1,41 @@
-import {
-  InfiniteQueryObserver,
-  parseQueryArgs,
-  type QueryObserver,
-  type QueryFunction,
-  type QueryKey,
+import type {
+  QueryObserver,
+  QueryKey,
+  QueryClient,
+  RegisteredError,
+  InfiniteData,
 } from '@tanstack/query-core'
+import { InfiniteQueryObserver } from '@tanstack/query-core'
 import type {
   CreateInfiniteQueryOptions,
   CreateInfiniteQueryResult,
+  WritableOrVal,
 } 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,
+  TQueryFnData,
+  TError = RegisteredError,
+  TData = InfiniteData<TQueryFnData>,
   TQueryKey extends QueryKey = QueryKey,
+  TPageParam = unknown,
 >(
-  queryKey: TQueryKey,
-  queryFn: QueryFunction<TQueryFnData, TQueryKey>,
-  options?: Omit<
+  options: WritableOrVal<
     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
+      TQueryKey,
+      TPageParam
+    >
   >,
+  queryClient?: QueryClient,
 ): CreateInfiniteQueryResult<TData, TError> {
-  const options = parseQueryArgs(arg1, arg2, arg3)
   return createBaseQuery(
     options,
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
     InfiniteQueryObserver as typeof QueryObserver,
+    queryClient,
   ) as CreateInfiniteQueryResult<TData, TError>
 }

package/src/createMutation.ts

@@ -1,96 +1,41 @@
-import { readable, derived } from 'svelte/store'
-import {
-  type MutationFunction,
-  type MutationKey,
-  MutationObserver,
-  notifyManager,
-  parseMutationArgs,
-} from '@tanstack/query-core'
+import { readable, derived, writable, get } from 'svelte/store'
+import type { QueryClient, RegisteredError } from '@tanstack/query-core'
+import { MutationObserver, notifyManager } from '@tanstack/query-core'
 import type {
   CreateMutateFunction,
   CreateMutationOptions,
   CreateMutationResult,
+  WritableOrVal,
 } from './types'
 import { useQueryClient } from './useQueryClient'
+import { isWritable } from './utils'
 
 export function createMutation<
   TData = unknown,
-  TError = unknown,
+  TError = RegisteredError,
   TVariables = void,
   TContext = unknown,
 >(
-  options: CreateMutationOptions<TData, TError, TVariables, TContext>,
-): CreateMutationResult<TData, TError, TVariables, TContext>
-
-export function createMutation<
-  TData = unknown,
-  TError = unknown,
-  TVariables = void,
-  TContext = unknown,
->(
-  mutationFn: MutationFunction<TData, TVariables>,
-  options?: Omit<
-    CreateMutationOptions<TData, TError, TVariables, TContext>,
-    'mutationFn'
-  >,
-): CreateMutationResult<TData, TError, TVariables, TContext>
-
-export function createMutation<
-  TData = unknown,
-  TError = unknown,
-  TVariables = void,
-  TContext = unknown,
->(
-  mutationKey: MutationKey,
-  options?: Omit<
-    CreateMutationOptions<TData, TError, TVariables, TContext>,
-    'mutationKey'
+  options: WritableOrVal<
+    CreateMutationOptions<TData, TError, TVariables, TContext>
   >,
-): CreateMutationResult<TData, TError, TVariables, TContext>
+  queryClient?: QueryClient,
+): CreateMutationResult<TData, TError, TVariables, TContext> {
+  const client = useQueryClient(queryClient)
 
-export function createMutation<
-  TData = unknown,
-  TError = unknown,
-  TVariables = void,
-  TContext = unknown,
->(
-  mutationKey: MutationKey,
-  mutationFn?: MutationFunction<TData, TVariables>,
-  options?: Omit<
-    CreateMutationOptions<TData, TError, TVariables, TContext>,
-    'mutationKey' | 'mutationFn'
-  >,
-): CreateMutationResult<TData, TError, TVariables, TContext>
+  const optionsStore = isWritable(options) ? options : writable(options)
 
-export function createMutation<
-  TData = unknown,
-  TError = unknown,
-  TVariables = void,
-  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>,
-): CreateMutationResult<TData, TError, TVariables, TContext> {
-  const options = parseMutationArgs(arg1, arg2, arg3)
-  const queryClient = useQueryClient()
-  let observer = new MutationObserver<TData, TError, TVariables, TContext>(
-    queryClient,
-    options,
+  const observer = new MutationObserver<TData, TError, TVariables, TContext>(
+    client,
+    get(optionsStore),
   )
   let mutate: CreateMutateFunction<TData, TError, TVariables, TContext>
 
-  readable(observer).subscribe(($observer) => {
-    observer = $observer
+  optionsStore.subscribe(($options) => {
     mutate = (variables, mutateOptions) => {
       observer.mutate(variables, mutateOptions).catch(noop)
     }
-    observer.setOptions(options)
+    observer.setOptions($options)
   })
 
   const result = readable(observer.getCurrentResult(), (set) => {

package/src/createQueries.ts

@@ -2,23 +2,31 @@ import type {
   QueryKey,
   QueryFunction,
   QueryClient,
+  QueriesPlaceholderDataFunction,
   QueryObserverResult,
+  RegisteredError,
 } from '@tanstack/query-core'
 
 import { notifyManager, QueriesObserver } from '@tanstack/query-core'
-import { readable, type Readable } from 'svelte/store'
+import { derived, get, readable, writable, type Readable } from 'svelte/store'
 
-import type { CreateQueryOptions } from './types'
+import type { CreateQueryOptions, WritableOrVal } from './types'
 import { useQueryClient } from './useQueryClient'
+import { isWritable } from './utils'
 
 // 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.
+// `placeholderData` function does not have a parameter
 type CreateQueryOptionsForCreateQueries<
   TQueryFnData = unknown,
-  TError = unknown,
+  TError = RegisteredError,
   TData = TQueryFnData,
   TQueryKey extends QueryKey = QueryKey,
-> = Omit<CreateQueryOptions<TQueryFnData, TError, TData, TQueryKey>, 'context'>
+> = Omit<
+  CreateQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
+  'placeholderData'
+> & {
+  placeholderData?: TQueryFnData | QueriesPlaceholderDataFunction<TQueryFnData>
+}
 
 // Avoid TS depth-limit error in case of large array literal
 type MAXIMUM_DEPTH = 20
@@ -47,16 +55,11 @@ type GetOptions<T> =
         queryFn?: QueryFunction<infer TQueryFnData, infer TQueryKey>
         select: (data: any) => infer TData
       }
-    ? CreateQueryOptionsForCreateQueries<
-        TQueryFnData,
-        unknown,
-        TData,
-        TQueryKey
-      >
+    ? CreateQueryOptionsForCreateQueries<TQueryFnData, Error, TData, TQueryKey>
     : T extends { queryFn?: QueryFunction<infer TQueryFnData, infer TQueryKey> }
     ? CreateQueryOptionsForCreateQueries<
         TQueryFnData,
-        unknown,
+        Error,
         TQueryFnData,
         TQueryKey
       >
@@ -140,40 +143,46 @@ export type QueriesResults<
       any
     >[]
   ? // Dynamic-size (homogenous) CreateQueryOptions array: map directly to array of results
-    QueryObserverResult<unknown extends TData ? TQueryFnData : TData, TError>[]
+    QueryObserverResult<
+      unknown extends TData ? TQueryFnData : TData,
+      unknown extends TError ? RegisteredError : TError
+    >[]
   : // Fallback
     QueryObserverResult[]
 
 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()
+export function createQueries<T extends any[]>({
+  queries,
+  queryClient,
+}: {
+  queries: WritableOrVal<[...QueriesOptions<T>]>
+  queryClient?: QueryClient
+}): CreateQueriesResult<T> {
+  const client = useQueryClient(queryClient)
   // const isRestoring = useIsRestoring()
 
-  function getDefaultQuery(newQueries: readonly [...QueriesOptions<T>]) {
-    return newQueries.map((options) => {
+  const queriesStore = isWritable(queries) ? queries : writable(queries)
+
+  const defaultedQueriesStore = derived(queriesStore, ($queries) => {
+    return $queries.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)
+  })
+  const observer = new QueriesObserver(client, get(defaultedQueriesStore))
 
-  readable(observer).subscribe(($observer) => {
-    observer = $observer
+  defaultedQueriesStore.subscribe(($defaultedQueries) => {
     // 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 })
+    observer.setQueries($defaultedQueries, { listeners: false })
   })
 
   const { subscribe } = readable(
-    observer.getOptimisticResult(defaultedQueries) as any,
+    observer.getOptimisticResult(get(defaultedQueriesStore)) as any,
     (set) => {
       return observer.subscribe(notifyManager.batchCalls(set))
     },