From d2660a52bc1b94ce3df904f9ce4c44154edc9ab1 Mon Sep 17 00:00:00 2001 From: Lachlan Collins <1667261+lachlancollins@users.noreply.github.com> Date: Sat, 27 Jul 2024 14:41:27 +1000 Subject: [PATCH] feat(svelte-5-adapter): require options to be passed as function (#7804) * fix(svelte-5-adapter): Require options to be passed as function * More fixes * More fixes * Update examples --- examples/svelte/basic/src/lib/Post.svelte | 4 +- examples/svelte/basic/src/lib/Posts.svelte | 4 +- .../src/lib/LoadMore.svelte | 4 +- .../src/routes/+page.svelte | 4 +- .../playground/src/routes/AddTodo.svelte | 8 +++- .../playground/src/routes/EditTodo.svelte | 6 +-- examples/svelte/simple/src/lib/Simple.svelte | 4 +- examples/svelte/ssr/src/lib/Post.svelte | 4 +- examples/svelte/ssr/src/lib/Posts.svelte | 4 +- .../src/routes/characters/+page.svelte | 4 +- .../characters/[characterId]/+page.svelte | 4 +- .../characters/[characterId]/Film.svelte | 4 +- .../characters/[characterId]/Homeworld.svelte | 4 +- .../star-wars/src/routes/films/+page.svelte | 4 +- .../src/routes/films/[filmId]/+page.svelte | 4 +- .../routes/films/[filmId]/Character.svelte | 4 +- .../AwaitOnSuccess/AwaitOnSuccess.svelte | 4 +- .../tests/FreshData/FreshData.svelte | 4 +- .../tests/InitialData/InitialData.svelte | 4 +- .../tests/OnSuccess/OnSuccess.svelte | 4 +- .../tests/RemoveCache/RemoveCache.svelte | 4 +- .../tests/RestoreCache/RestoreCache.svelte | 4 +- .../tests/UseQueries/UseQueries.svelte | 2 +- .../src/createBaseQuery.svelte.ts | 23 +++++------- .../svelte-query/src/createInfiniteQuery.ts | 17 +++++---- .../svelte-query/src/createQueries.svelte.ts | 10 ++--- packages/svelte-query/src/createQuery.ts | 15 ++++++-- packages/svelte-query/src/types.ts | 28 +++++--------- .../QueryClientProvider/ChildComponent.svelte | 4 +- .../createInfiniteQuery/BaseExample.svelte | 4 +- .../createInfiniteQuery/SelectExample.svelte | 4 +- .../tests/createQueries/BaseExample.svelte | 2 +- .../tests/createQueries/CombineExample.svelte | 17 +++++---- .../createQueries/createQueries.test-d.ts | 6 +-- .../tests/createQueries/createQueries.test.ts | 2 +- .../tests/createQuery/BaseExample.svelte | 4 +- .../tests/createQuery/DisabledExample.svelte | 21 ++++++----- .../tests/createQuery/PlaceholderData.svelte | 21 ++++++----- .../createQuery/createQuery.svelte.test.ts | 14 +++---- .../tests/createQuery/createQuery.test-d.ts | 14 +++---- .../infiniteQueryOptions.test-d.ts | 2 +- .../tests/queryOptions/queryOptions.test-d.ts | 2 +- .../tests/useIsFetching/BaseExample.svelte | 21 ++++++----- pnpm-lock.yaml | 37 ------------------- 44 files changed, 164 insertions(+), 200 deletions(-) diff --git a/examples/svelte/basic/src/lib/Post.svelte b/examples/svelte/basic/src/lib/Post.svelte index 4450ffe490..49469c2fb5 100644 --- a/examples/svelte/basic/src/lib/Post.svelte +++ b/examples/svelte/basic/src/lib/Post.svelte @@ -5,10 +5,10 @@ const { postId }: { postId: number } = $props() - const post = createQuery({ + const post = createQuery(() => ({ queryKey: ['post', postId], queryFn: () => getPostById(postId), - }) + }))
diff --git a/examples/svelte/basic/src/lib/Posts.svelte b/examples/svelte/basic/src/lib/Posts.svelte index 354ab8b1f6..e6a0851ee2 100644 --- a/examples/svelte/basic/src/lib/Posts.svelte +++ b/examples/svelte/basic/src/lib/Posts.svelte @@ -9,10 +9,10 @@ const posts = createQuery< { id: number; title: string; body: string }[], Error - >({ + >(() => ({ queryKey: ['posts', limit], queryFn: () => getPosts(limit), - }) + }))
diff --git a/examples/svelte/load-more-infinite-scroll/src/lib/LoadMore.svelte b/examples/svelte/load-more-infinite-scroll/src/lib/LoadMore.svelte index 0b51a97a6b..32f6e8971d 100644 --- a/examples/svelte/load-more-infinite-scroll/src/lib/LoadMore.svelte +++ b/examples/svelte/load-more-infinite-scroll/src/lib/LoadMore.svelte @@ -6,7 +6,7 @@ const fetchPlanets = async ({ pageParam = 1 }) => await fetch(`${endPoint}/planets/?page=${pageParam}`).then((r) => r.json()) - const query = createInfiniteQuery({ + const query = createInfiniteQuery(() => ({ queryKey: ['planets'], queryFn: ({ pageParam }) => fetchPlanets({ pageParam }), initialPageParam: 1, @@ -20,7 +20,7 @@ } return undefined }, - }) + })) {#if query.isPending} diff --git a/examples/svelte/optimistic-updates/src/routes/+page.svelte b/examples/svelte/optimistic-updates/src/routes/+page.svelte index f61aedcfd5..f3ff93fad7 100644 --- a/examples/svelte/optimistic-updates/src/routes/+page.svelte +++ b/examples/svelte/optimistic-updates/src/routes/+page.svelte @@ -36,10 +36,10 @@ }), }).then((res) => res.json()) - const todos = createQuery({ + const todos = createQuery(() => ({ queryKey: ['optimistic'], queryFn: fetchTodos, - }) + })) const addTodoMutation = createMutation({ mutationFn: createTodo, diff --git a/examples/svelte/playground/src/routes/AddTodo.svelte b/examples/svelte/playground/src/routes/AddTodo.svelte index 23ec3e5b78..11e2bb22eb 100644 --- a/examples/svelte/playground/src/routes/AddTodo.svelte +++ b/examples/svelte/playground/src/routes/AddTodo.svelte @@ -20,7 +20,13 @@ () => { if (Math.random() < errorRate.value) { return reject( - new Error(JSON.stringify({ postTodo: { name, notes } }, null, 2)), + new Error( + JSON.stringify( + { postTodo: { name: $state.snapshot(name), notes } }, + null, + 2, + ), + ), ) } const todo = { name, notes, id: id.value } diff --git a/examples/svelte/playground/src/routes/EditTodo.svelte b/examples/svelte/playground/src/routes/EditTodo.svelte index b4b959eab6..10eeea6f65 100644 --- a/examples/svelte/playground/src/routes/EditTodo.svelte +++ b/examples/svelte/playground/src/routes/EditTodo.svelte @@ -55,7 +55,7 @@ } list.value = list.value.map((d) => { if (d.id === todo.id) { - return todo + return $state.snapshot(todo) } return d }) @@ -67,11 +67,11 @@ }) } - const query = createQuery({ + const query = createQuery(() => ({ queryKey: ['todo', { id: editingIndex.value }], queryFn: () => fetchTodoById({ id: editingIndex.value || 0 }), enabled: editingIndex.value !== null, - }) + })) const saveMutation = createMutation({ mutationFn: patchTodo, diff --git a/examples/svelte/simple/src/lib/Simple.svelte b/examples/svelte/simple/src/lib/Simple.svelte index 9577198f5b..a467e91393 100644 --- a/examples/svelte/simple/src/lib/Simple.svelte +++ b/examples/svelte/simple/src/lib/Simple.svelte @@ -9,13 +9,13 @@ forks_count: number } - const query = createQuery({ + const query = createQuery(() => ({ queryKey: ['repoData'], queryFn: async () => await fetch('https://api.github.com/repos/TanStack/query').then((r) => r.json(), ), - }) + }))

Simple

diff --git a/examples/svelte/ssr/src/lib/Post.svelte b/examples/svelte/ssr/src/lib/Post.svelte index 9f6c886d49..10b4df1949 100644 --- a/examples/svelte/ssr/src/lib/Post.svelte +++ b/examples/svelte/ssr/src/lib/Post.svelte @@ -5,10 +5,10 @@ const { postId }: { postId: number } = $props() - const post = createQuery({ + const post = createQuery(() => ({ queryKey: ['post', postId], queryFn: () => api().getPostById(postId), - }) + }))
diff --git a/examples/svelte/ssr/src/lib/Posts.svelte b/examples/svelte/ssr/src/lib/Posts.svelte index 2a84ff17d4..7f7065e813 100644 --- a/examples/svelte/ssr/src/lib/Posts.svelte +++ b/examples/svelte/ssr/src/lib/Posts.svelte @@ -9,10 +9,10 @@ const posts = createQuery< { id: number; title: string; body: string }[], Error - >({ + >(() => ({ queryKey: ['posts', limit], queryFn: () => api().getPosts(limit), - }) + }))
diff --git a/examples/svelte/star-wars/src/routes/characters/+page.svelte b/examples/svelte/star-wars/src/routes/characters/+page.svelte index 4bd81ba07e..7c59efd108 100644 --- a/examples/svelte/star-wars/src/routes/characters/+page.svelte +++ b/examples/svelte/star-wars/src/routes/characters/+page.svelte @@ -6,10 +6,10 @@ return await res.json() } - const query = createQuery({ + const query = createQuery(() => ({ queryKey: ['characters'], queryFn: getCharacters, - }) + })) {#if query.status === 'pending'} diff --git a/examples/svelte/star-wars/src/routes/characters/[characterId]/+page.svelte b/examples/svelte/star-wars/src/routes/characters/[characterId]/+page.svelte index e887ba454e..3298c72c5a 100644 --- a/examples/svelte/star-wars/src/routes/characters/[characterId]/+page.svelte +++ b/examples/svelte/star-wars/src/routes/characters/[characterId]/+page.svelte @@ -12,10 +12,10 @@ return await res.json() } - const query = createQuery({ + const query = createQuery(() => ({ queryKey: ['character', data.params.characterId], queryFn: getCharacter, - }) + })) {#if query.status === 'pending'} diff --git a/examples/svelte/star-wars/src/routes/characters/[characterId]/Film.svelte b/examples/svelte/star-wars/src/routes/characters/[characterId]/Film.svelte index a08ed25a6a..f9c7aba727 100644 --- a/examples/svelte/star-wars/src/routes/characters/[characterId]/Film.svelte +++ b/examples/svelte/star-wars/src/routes/characters/[characterId]/Film.svelte @@ -8,10 +8,10 @@ return await res.json() } - const query = createQuery({ + const query = createQuery(() => ({ queryKey: ['film', filmId], queryFn: getFilm, - }) + })) {#if query.status === 'success'} diff --git a/examples/svelte/star-wars/src/routes/characters/[characterId]/Homeworld.svelte b/examples/svelte/star-wars/src/routes/characters/[characterId]/Homeworld.svelte index 384318fd62..bde4c4cada 100644 --- a/examples/svelte/star-wars/src/routes/characters/[characterId]/Homeworld.svelte +++ b/examples/svelte/star-wars/src/routes/characters/[characterId]/Homeworld.svelte @@ -8,10 +8,10 @@ return await res.json() } - const query = createQuery({ + const query = createQuery(() => ({ queryKey: ['homeworld', homeworldId], queryFn: getHomeworld, - }) + })) {#if query.status === 'success'} diff --git a/examples/svelte/star-wars/src/routes/films/+page.svelte b/examples/svelte/star-wars/src/routes/films/+page.svelte index ccca60b894..4fc29c6f50 100644 --- a/examples/svelte/star-wars/src/routes/films/+page.svelte +++ b/examples/svelte/star-wars/src/routes/films/+page.svelte @@ -6,10 +6,10 @@ return await res.json() } - const query = createQuery({ + const query = createQuery(() => ({ queryKey: ['films'], queryFn: getFilms, - }) + })) {#if query.status === 'pending'} diff --git a/examples/svelte/star-wars/src/routes/films/[filmId]/+page.svelte b/examples/svelte/star-wars/src/routes/films/[filmId]/+page.svelte index 1f8d55537f..84f1abffe9 100644 --- a/examples/svelte/star-wars/src/routes/films/[filmId]/+page.svelte +++ b/examples/svelte/star-wars/src/routes/films/[filmId]/+page.svelte @@ -11,10 +11,10 @@ return await res.json() } - const query = createQuery({ + const query = createQuery(() => ({ queryKey: ['film', data.params.filmId], queryFn: getFilm, - }) + })) {#if query.status === 'pending'} diff --git a/examples/svelte/star-wars/src/routes/films/[filmId]/Character.svelte b/examples/svelte/star-wars/src/routes/films/[filmId]/Character.svelte index 88c5d6b5d2..2b1a0ba4c9 100644 --- a/examples/svelte/star-wars/src/routes/films/[filmId]/Character.svelte +++ b/examples/svelte/star-wars/src/routes/films/[filmId]/Character.svelte @@ -8,10 +8,10 @@ return await res.json() } - const query = createQuery({ + const query = createQuery(() => ({ queryKey: ['character', characterId], queryFn: getCharacter, - }) + })) {#if query.status === 'success'} diff --git a/packages/svelte-query-persist-client/tests/AwaitOnSuccess/AwaitOnSuccess.svelte b/packages/svelte-query-persist-client/tests/AwaitOnSuccess/AwaitOnSuccess.svelte index b9ccb7377f..d3521e4503 100644 --- a/packages/svelte-query-persist-client/tests/AwaitOnSuccess/AwaitOnSuccess.svelte +++ b/packages/svelte-query-persist-client/tests/AwaitOnSuccess/AwaitOnSuccess.svelte @@ -4,7 +4,7 @@ let { states }: { states: Array } = $props() - const query = createQuery({ + const query = createQuery(() => ({ queryKey: ['test'], queryFn: async () => { states.push('fetching') @@ -12,7 +12,7 @@ states.push('fetched') return 'fetched' }, - }) + }))
{query.data}
diff --git a/packages/svelte-query-persist-client/tests/FreshData/FreshData.svelte b/packages/svelte-query-persist-client/tests/FreshData/FreshData.svelte index 0284becb09..3dfc17b017 100644 --- a/packages/svelte-query-persist-client/tests/FreshData/FreshData.svelte +++ b/packages/svelte-query-persist-client/tests/FreshData/FreshData.svelte @@ -12,7 +12,7 @@ fetched: boolean } = $props() - const query = createQuery({ + const query = createQuery(() => ({ queryKey: ['test'], queryFn: async () => { fetched = true @@ -21,7 +21,7 @@ }, staleTime: Infinity, - }) + })) $effect(() => { states.value = [...untrack(() => states.value), $state.snapshot(query)] diff --git a/packages/svelte-query-persist-client/tests/InitialData/InitialData.svelte b/packages/svelte-query-persist-client/tests/InitialData/InitialData.svelte index 25695e07fc..adf5852af1 100644 --- a/packages/svelte-query-persist-client/tests/InitialData/InitialData.svelte +++ b/packages/svelte-query-persist-client/tests/InitialData/InitialData.svelte @@ -6,7 +6,7 @@ let { states }: { states: { value: Array> } } = $props() - const query = createQuery({ + const query = createQuery(() => ({ queryKey: ['test'], queryFn: async () => { await sleep(5) @@ -17,7 +17,7 @@ // make sure that initial data is older than the hydration data // otherwise initialData would be newer and takes precedence initialDataUpdatedAt: 1, - }) + })) $effect(() => { states.value = [...untrack(() => states.value), $state.snapshot(query)] diff --git a/packages/svelte-query-persist-client/tests/OnSuccess/OnSuccess.svelte b/packages/svelte-query-persist-client/tests/OnSuccess/OnSuccess.svelte index c07fee7267..5d0aebb318 100644 --- a/packages/svelte-query-persist-client/tests/OnSuccess/OnSuccess.svelte +++ b/packages/svelte-query-persist-client/tests/OnSuccess/OnSuccess.svelte @@ -2,13 +2,13 @@ import { createQuery } from '@tanstack/svelte-query' import { sleep } from '../utils.svelte' - const query = createQuery({ + const query = createQuery(() => ({ queryKey: ['test'], queryFn: async () => { await sleep(5) return 'fetched' }, - }) + }))
{query.data}
diff --git a/packages/svelte-query-persist-client/tests/RemoveCache/RemoveCache.svelte b/packages/svelte-query-persist-client/tests/RemoveCache/RemoveCache.svelte index c07fee7267..5d0aebb318 100644 --- a/packages/svelte-query-persist-client/tests/RemoveCache/RemoveCache.svelte +++ b/packages/svelte-query-persist-client/tests/RemoveCache/RemoveCache.svelte @@ -2,13 +2,13 @@ import { createQuery } from '@tanstack/svelte-query' import { sleep } from '../utils.svelte' - const query = createQuery({ + const query = createQuery(() => ({ queryKey: ['test'], queryFn: async () => { await sleep(5) return 'fetched' }, - }) + }))
{query.data}
diff --git a/packages/svelte-query-persist-client/tests/RestoreCache/RestoreCache.svelte b/packages/svelte-query-persist-client/tests/RestoreCache/RestoreCache.svelte index e7e04e3900..7c92c6135d 100644 --- a/packages/svelte-query-persist-client/tests/RestoreCache/RestoreCache.svelte +++ b/packages/svelte-query-persist-client/tests/RestoreCache/RestoreCache.svelte @@ -6,13 +6,13 @@ let { states }: { states: { value: Array> } } = $props() - const query = createQuery({ + const query = createQuery(() => ({ queryKey: ['test'], queryFn: async () => { await sleep(5) return 'fetched' }, - }) + })) $effect(() => { states.value = [...untrack(() => states.value), $state.snapshot(query)] diff --git a/packages/svelte-query-persist-client/tests/UseQueries/UseQueries.svelte b/packages/svelte-query-persist-client/tests/UseQueries/UseQueries.svelte index 50170142ae..62abffe368 100644 --- a/packages/svelte-query-persist-client/tests/UseQueries/UseQueries.svelte +++ b/packages/svelte-query-persist-client/tests/UseQueries/UseQueries.svelte @@ -7,7 +7,7 @@ let { states }: { states: { value: Array> } } = $props() const queries = createQueries({ - queries: [ + queries: () => [ { queryKey: ['test'], queryFn: async (): Promise => { diff --git a/packages/svelte-query/src/createBaseQuery.svelte.ts b/packages/svelte-query/src/createBaseQuery.svelte.ts index f5427bd664..d94baccada 100644 --- a/packages/svelte-query/src/createBaseQuery.svelte.ts +++ b/packages/svelte-query/src/createBaseQuery.svelte.ts @@ -2,7 +2,11 @@ import { notifyManager } from '@tanstack/query-core' import { untrack } from 'svelte' import { useIsRestoring } from './useIsRestoring' import { useQueryClient } from './useQueryClient' -import type { CreateBaseQueryOptions, CreateBaseQueryResult } from './types' +import type { + CreateBaseQueryOptions, + CreateBaseQueryResult, + FunctionedParams, +} from './types' import type { QueryClient, QueryKey, @@ -17,12 +21,8 @@ export function createBaseQuery< TQueryData, TQueryKey extends QueryKey, >( - options: CreateBaseQueryOptions< - TQueryFnData, - TError, - TData, - TQueryData, - TQueryKey + options: FunctionedParams< + CreateBaseQueryOptions >, Observer: typeof QueryObserver, queryClient?: QueryClient, @@ -30,18 +30,13 @@ export function createBaseQuery< /** Load query client */ const client = useQueryClient(queryClient) const isRestoring = useIsRestoring() - const optionsStore = typeof options !== 'function' ? () => options : options /** Creates a store that has the default options applied */ function updateOptions() { - const key = optionsStore().queryKey - const keyFn = typeof key === 'function' ? key : () => key // allow query-key and enable to be a function - const queryKey: TQueryKey = $state.snapshot(keyFn()) as any // remove proxy prevent reactive query in devTools - let tempEnable = optionsStore().enabled + const queryKey: TQueryKey = $state.snapshot(options().queryKey) as any // remove proxy prevent reactive query in devTools const defaultedOptions = client.defaultQueryOptions({ - ...optionsStore(), + ...options(), queryKey: queryKey, - enabled: typeof tempEnable == 'function' ? tempEnable() : tempEnable, }) defaultedOptions._optimisticResults = 'optimistic' if (isRestoring()) { diff --git a/packages/svelte-query/src/createInfiniteQuery.ts b/packages/svelte-query/src/createInfiniteQuery.ts index 7cd72b7aec..9db65cd526 100644 --- a/packages/svelte-query/src/createInfiniteQuery.ts +++ b/packages/svelte-query/src/createInfiniteQuery.ts @@ -10,6 +10,7 @@ import type { import type { CreateInfiniteQueryOptions, CreateInfiniteQueryResult, + FunctionedParams, } from './types' export function createInfiniteQuery< @@ -19,13 +20,15 @@ export function createInfiniteQuery< TQueryKey extends QueryKey = QueryKey, TPageParam = unknown, >( - options: CreateInfiniteQueryOptions< - TQueryFnData, - TError, - TData, - TQueryFnData, - TQueryKey, - TPageParam + options: FunctionedParams< + CreateInfiniteQueryOptions< + TQueryFnData, + TError, + TData, + TQueryFnData, + TQueryKey, + TPageParam + > >, queryClient?: QueryClient, ): CreateInfiniteQueryResult { diff --git a/packages/svelte-query/src/createQueries.svelte.ts b/packages/svelte-query/src/createQueries.svelte.ts index f46d9dd258..8a32ce3d13 100644 --- a/packages/svelte-query/src/createQueries.svelte.ts +++ b/packages/svelte-query/src/createQueries.svelte.ts @@ -2,7 +2,7 @@ import { untrack } from 'svelte' import { QueriesObserver, notifyManager } from '@tanstack/query-core' import { useIsRestoring } from './useIsRestoring' import { useQueryClient } from './useQueryClient' -import type { FnOrVal } from '.' +import type { FunctionedParams } from './types' import type { DefaultError, DefinedQueryObserverResult, @@ -208,7 +208,7 @@ export function createQueries< queries, ...options }: { - queries: FnOrVal<[...QueriesOptions]> + queries: FunctionedParams<[...QueriesOptions]> combine?: (result: QueriesResults) => TCombinedResult }, queryClient?: QueryClient, @@ -216,12 +216,8 @@ export function createQueries< const client = useQueryClient(queryClient) const isRestoring = useIsRestoring() - const queriesStore = $derived( - typeof queries != 'function' ? () => queries : queries, - ) - const defaultedQueriesStore = $derived(() => { - return queriesStore().map((opts) => { + return queries().map((opts) => { const defaultedOptions = client.defaultQueryOptions(opts) // Make sure the results are already in fetching state before subscribing or updating options defaultedOptions._optimisticResults = isRestoring() diff --git a/packages/svelte-query/src/createQuery.ts b/packages/svelte-query/src/createQuery.ts index 03444c9dd5..216539b52a 100644 --- a/packages/svelte-query/src/createQuery.ts +++ b/packages/svelte-query/src/createQuery.ts @@ -5,6 +5,7 @@ import type { CreateQueryOptions, CreateQueryResult, DefinedCreateQueryResult, + FunctionedParams, } from './types' import type { DefinedInitialDataOptions, @@ -17,7 +18,9 @@ export function createQuery< TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey, >( - options: DefinedInitialDataOptions, + options: FunctionedParams< + DefinedInitialDataOptions + >, queryClient?: QueryClient, ): DefinedCreateQueryResult @@ -27,7 +30,9 @@ export function createQuery< TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey, >( - options: UndefinedInitialDataOptions, + options: FunctionedParams< + UndefinedInitialDataOptions + >, queryClient?: QueryClient, ): CreateQueryResult @@ -37,12 +42,14 @@ export function createQuery< TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey, >( - options: CreateQueryOptions, + options: FunctionedParams< + CreateQueryOptions + >, queryClient?: QueryClient, ): CreateQueryResult export function createQuery( - options: CreateQueryOptions, + options: FunctionedParams, queryClient?: QueryClient, ) { return createBaseQuery(options, QueryObserver, queryClient) diff --git a/packages/svelte-query/src/types.ts b/packages/svelte-query/src/types.ts index 42d2c751a0..8e7c2f4dd1 100644 --- a/packages/svelte-query/src/types.ts +++ b/packages/svelte-query/src/types.ts @@ -16,7 +16,7 @@ import type { QueryObserverResult, } from '@tanstack/query-core' -export type FnOrVal = (() => T) | T // can be a fn that returns reactive statement or $state or $derived deep states +export type FunctionedParams = () => T /** Options for createBaseQuery */ export type CreateBaseQueryOptions< @@ -25,12 +25,7 @@ export type CreateBaseQueryOptions< TData = TQueryFnData, TQueryData = TQueryFnData, TQueryKey extends QueryKey = QueryKey, -> = FnOrVal< - Omit< - QueryObserverOptions, - 'queryKey' | 'enabled' - > & { enabled?: FnOrVal; queryKey: FnOrVal } -> +> = QueryObserverOptions /** Result from createBaseQuery */ export type CreateBaseQueryResult< @@ -60,18 +55,13 @@ export type CreateInfiniteQueryOptions< TQueryData = TQueryFnData, TQueryKey extends QueryKey = QueryKey, TPageParam = unknown, -> = FnOrVal< - Omit< - InfiniteQueryObserverOptions< - TQueryFnData, - TError, - TData, - TQueryData, - TQueryKey, - TPageParam - >, - 'queryKey' | 'enabled' - > & { enabled?: FnOrVal; queryKey: FnOrVal } +> = InfiniteQueryObserverOptions< + TQueryFnData, + TError, + TData, + TQueryData, + TQueryKey, + TPageParam > /** Result from createInfiniteQuery */ diff --git a/packages/svelte-query/tests/QueryClientProvider/ChildComponent.svelte b/packages/svelte-query/tests/QueryClientProvider/ChildComponent.svelte index 003f7f9e2f..349a14f211 100644 --- a/packages/svelte-query/tests/QueryClientProvider/ChildComponent.svelte +++ b/packages/svelte-query/tests/QueryClientProvider/ChildComponent.svelte @@ -2,13 +2,13 @@ import { createQuery } from '../../src/createQuery' import { sleep } from '../utils.svelte' - const query = createQuery({ + const query = createQuery(() => ({ queryKey: ['hello'], queryFn: async () => { await sleep(5) return 'test' }, - }) + }))
Data: {query.data ?? 'undefined'}
diff --git a/packages/svelte-query/tests/createInfiniteQuery/BaseExample.svelte b/packages/svelte-query/tests/createInfiniteQuery/BaseExample.svelte index df42f1fe09..452852178b 100644 --- a/packages/svelte-query/tests/createInfiniteQuery/BaseExample.svelte +++ b/packages/svelte-query/tests/createInfiniteQuery/BaseExample.svelte @@ -10,7 +10,7 @@ const queryClient = new QueryClient() const query = createInfiniteQuery( - { + () => ({ queryKey: ['test'], queryFn: async ({ pageParam }) => { await sleep(5) @@ -18,7 +18,7 @@ }, getNextPageParam: (lastPage) => lastPage + 1, initialPageParam: 0, - }, + }), queryClient, ) diff --git a/packages/svelte-query/tests/createInfiniteQuery/SelectExample.svelte b/packages/svelte-query/tests/createInfiniteQuery/SelectExample.svelte index 9fc7a7db16..5cee416b6e 100644 --- a/packages/svelte-query/tests/createInfiniteQuery/SelectExample.svelte +++ b/packages/svelte-query/tests/createInfiniteQuery/SelectExample.svelte @@ -9,7 +9,7 @@ const queryClient = new QueryClient() const query = createInfiniteQuery( - { + () => ({ queryKey: ['test'], queryFn: () => Promise.resolve({ count: 1 }), select: (data) => ({ @@ -18,7 +18,7 @@ }), getNextPageParam: () => undefined, initialPageParam: 0, - }, + }), queryClient, ) diff --git a/packages/svelte-query/tests/createQueries/BaseExample.svelte b/packages/svelte-query/tests/createQueries/BaseExample.svelte index 15962b21c4..9dd218c8ab 100644 --- a/packages/svelte-query/tests/createQueries/BaseExample.svelte +++ b/packages/svelte-query/tests/createQueries/BaseExample.svelte @@ -11,7 +11,7 @@ queryClient, }: { options: { - queries: [...QueriesOptions] + queries: () => [...QueriesOptions] combine?: (result: QueriesResults>) => any } queryClient: QueryClient diff --git a/packages/svelte-query/tests/createQueries/CombineExample.svelte b/packages/svelte-query/tests/createQueries/CombineExample.svelte index e2e7af0d2f..009e7a0b0f 100644 --- a/packages/svelte-query/tests/createQueries/CombineExample.svelte +++ b/packages/svelte-query/tests/createQueries/CombineExample.svelte @@ -9,13 +9,14 @@ const queries = createQueries( { - queries: ids.map((id) => ({ - queryKey: [id], - queryFn: async () => { - await sleep(5) - return id - }, - })), + queries: () => + ids.map((id) => ({ + queryKey: [id], + queryFn: async () => { + await sleep(5) + return id + }, + })), combine: (results) => { return { isPending: results.some((result) => result.isPending), @@ -29,4 +30,4 @@
isPending: {queries.isPending}
-
Data: {queries.data ?? 'undefined'}
+
Data: {queries.data}
diff --git a/packages/svelte-query/tests/createQueries/createQueries.test-d.ts b/packages/svelte-query/tests/createQueries/createQueries.test-d.ts index fd7087dace..54185b0bc8 100644 --- a/packages/svelte-query/tests/createQueries/createQueries.test-d.ts +++ b/packages/svelte-query/tests/createQueries/createQueries.test-d.ts @@ -17,7 +17,7 @@ describe('createQueries', () => { wow: true, }, }) - const queryResults = createQueries({ queries: [options] }) + const queryResults = createQueries({ queries: () => [options] }) const data = queryResults[0].data @@ -29,7 +29,7 @@ describe('createQueries', () => { const useCustomQueries = (options?: CreateQueryOptions) => { return createQueries({ - queries: [ + queries: () => [ { ...options, queryKey: ['todos-key'], @@ -47,7 +47,7 @@ describe('createQueries', () => { test('TData should have correct type when conditional skipToken is passed', () => { const queryResults = createQueries({ - queries: [ + queries: () => [ { queryKey: ['withSkipToken'], queryFn: Math.random() > 0.5 ? skipToken : () => Promise.resolve(5), diff --git a/packages/svelte-query/tests/createQueries/createQueries.test.ts b/packages/svelte-query/tests/createQueries/createQueries.test.ts index 5f1ffa21dd..e1556a3943 100644 --- a/packages/svelte-query/tests/createQueries/createQueries.test.ts +++ b/packages/svelte-query/tests/createQueries/createQueries.test.ts @@ -10,7 +10,7 @@ describe('createQueries', () => { const rendered = render(BaseExample, { props: { options: { - queries: [ + queries: () => [ { queryKey: ['key-1'], queryFn: async () => { diff --git a/packages/svelte-query/tests/createQuery/BaseExample.svelte b/packages/svelte-query/tests/createQuery/BaseExample.svelte index 6acd5c2599..e4acf73f0c 100644 --- a/packages/svelte-query/tests/createQuery/BaseExample.svelte +++ b/packages/svelte-query/tests/createQuery/BaseExample.svelte @@ -2,14 +2,14 @@ import { untrack } from 'svelte' import { createQuery } from '../../src' import type { QueryClient, QueryObserverResult } from '@tanstack/query-core' - import type { CreateQueryOptions } from '../../src/types' + import type { CreateQueryOptions, FunctionedParams } from '../../src/types' let { options, queryClient, states, }: { - options: CreateQueryOptions + options: FunctionedParams> queryClient: QueryClient states: { value: Array } } = $props() diff --git a/packages/svelte-query/tests/createQuery/DisabledExample.svelte b/packages/svelte-query/tests/createQuery/DisabledExample.svelte index 1a5f804995..ac4e2f88d5 100644 --- a/packages/svelte-query/tests/createQuery/DisabledExample.svelte +++ b/packages/svelte-query/tests/createQuery/DisabledExample.svelte @@ -14,16 +14,17 @@ const queryClient = new QueryClient() let count = $state(0) - const options = $derived({ - queryKey: () => ['test', count], - queryFn: async () => { - await sleep(5) - return count - }, - enabled: () => count === 0, - }) - - const query = createQuery(options, queryClient) + const query = createQuery( + () => ({ + queryKey: ['test', count], + queryFn: async () => { + await sleep(5) + return count + }, + enabled: count === 0, + }), + queryClient, + ) $effect(() => { states.value = [ diff --git a/packages/svelte-query/tests/createQuery/PlaceholderData.svelte b/packages/svelte-query/tests/createQuery/PlaceholderData.svelte index e119195841..3303629c98 100644 --- a/packages/svelte-query/tests/createQuery/PlaceholderData.svelte +++ b/packages/svelte-query/tests/createQuery/PlaceholderData.svelte @@ -14,16 +14,17 @@ let count = $state(0) - const options = $derived(() => ({ - queryKey: ['test', count], - queryFn: async () => { - await sleep(5) - return count - }, - placeholderData: keepPreviousData, - })) - - const query = createQuery(options, queryClient) + const query = createQuery( + () => ({ + queryKey: ['test', count], + queryFn: async () => { + await sleep(5) + return count + }, + placeholderData: keepPreviousData, + }), + queryClient, + ) $effect(() => { states.value = [...untrack(() => states.value), $state.snapshot(query)] diff --git a/packages/svelte-query/tests/createQuery/createQuery.svelte.test.ts b/packages/svelte-query/tests/createQuery/createQuery.svelte.test.ts index b1e38f2b2a..94bbe44026 100644 --- a/packages/svelte-query/tests/createQuery/createQuery.svelte.test.ts +++ b/packages/svelte-query/tests/createQuery/createQuery.svelte.test.ts @@ -22,7 +22,7 @@ describe('createQuery', () => { const rendered = render(BaseExample, { props: { - options, + options: () => options, queryClient: new QueryClient(), states, }, @@ -101,7 +101,7 @@ describe('createQuery', () => { const rendered = render(BaseExample, { props: { - options, + options: () => options, queryClient: new QueryClient(), states, }, @@ -196,13 +196,13 @@ describe('createQuery', () => { test('Accept a writable store for options', async () => { let states = ref>([]) - const optionsStore = $state({ + const optionsStore = $state(() => ({ queryKey: ['test'], queryFn: async () => { await sleep(5) return 'Success' }, - }) + })) const rendered = render(BaseExample, { props: { @@ -248,13 +248,13 @@ describe('createQuery', () => { let writableStore = $state(1) - const derivedStore = $derived({ - queryKey: () => [writableStore], + const derivedStore = $derived(() => ({ + queryKey: [writableStore], queryFn: async () => { await sleep(5) return writableStore }, - }) + })) const rendered = render(BaseExample, { props: { diff --git a/packages/svelte-query/tests/createQuery/createQuery.test-d.ts b/packages/svelte-query/tests/createQuery/createQuery.test-d.ts index 578bf99c9b..8b29b59d2b 100644 --- a/packages/svelte-query/tests/createQuery/createQuery.test-d.ts +++ b/packages/svelte-query/tests/createQuery/createQuery.test-d.ts @@ -4,11 +4,11 @@ import type { CreateQueryOptions } from '../../src/index' describe('createQuery', () => { test('TData should always be defined when initialData is provided as an object', () => { - const query = createQuery({ + const query = createQuery(() => ({ queryKey: ['key'], queryFn: () => ({ wow: true }), initialData: { wow: true }, - }) + })) expectTypeOf(query.data).toEqualTypeOf<{ wow: boolean }>() }) @@ -25,20 +25,20 @@ describe('createQuery', () => { wow: true, }, }) - const query = createQuery(options) + const query = createQuery(() => options) expectTypeOf(query.data).toEqualTypeOf<{ wow: boolean }>() }) test('TData should have undefined in the union when initialData is NOT provided', () => { - const query = createQuery({ + const query = createQuery(() => ({ queryKey: ['key'], queryFn: () => { return { wow: true, } }, - }) + })) expectTypeOf(query.data).toEqualTypeOf<{ wow: boolean } | undefined>() }) @@ -47,11 +47,11 @@ describe('createQuery', () => { type Data = string const useCustomQuery = (options?: CreateQueryOptions) => { - return createQuery({ + return createQuery(() => ({ ...options, queryKey: ['todos-key'], queryFn: () => Promise.resolve('data'), - }) + })) } const query = useCustomQuery() diff --git a/packages/svelte-query/tests/infiniteQueryOptions/infiniteQueryOptions.test-d.ts b/packages/svelte-query/tests/infiniteQueryOptions/infiniteQueryOptions.test-d.ts index 1621d1539a..8cec61e6ea 100644 --- a/packages/svelte-query/tests/infiniteQueryOptions/infiniteQueryOptions.test-d.ts +++ b/packages/svelte-query/tests/infiniteQueryOptions/infiniteQueryOptions.test-d.ts @@ -36,7 +36,7 @@ describe('queryOptions', () => { initialPageParam: 1, }) - const query = createInfiniteQuery(options) + const query = createInfiniteQuery(() => options) // known issue: type of pageParams is unknown when returned from useInfiniteQuery expectTypeOf(query.data).toEqualTypeOf< diff --git a/packages/svelte-query/tests/queryOptions/queryOptions.test-d.ts b/packages/svelte-query/tests/queryOptions/queryOptions.test-d.ts index 02a46c7d10..01c9a39ecd 100644 --- a/packages/svelte-query/tests/queryOptions/queryOptions.test-d.ts +++ b/packages/svelte-query/tests/queryOptions/queryOptions.test-d.ts @@ -46,7 +46,7 @@ describe('queryOptions', () => { }) const queries = createQueries({ - queries: [options], + queries: () => [options], }) expectTypeOf(queries[0].data).toEqualTypeOf() diff --git a/packages/svelte-query/tests/useIsFetching/BaseExample.svelte b/packages/svelte-query/tests/useIsFetching/BaseExample.svelte index 6847e54c0f..63d67cab86 100644 --- a/packages/svelte-query/tests/useIsFetching/BaseExample.svelte +++ b/packages/svelte-query/tests/useIsFetching/BaseExample.svelte @@ -9,16 +9,17 @@ const isFetching = useIsFetching(undefined, queryClient) - const options = $derived({ - queryKey: ['test'], - queryFn: async () => { - await sleep(5) - return 'test' - }, - enabled: ready, - }) - - const query = createQuery(options, queryClient) + const query = createQuery( + () => ({ + queryKey: ['test'], + queryFn: async () => { + await sleep(5) + return 'test' + }, + enabled: ready, + }), + queryClient, + ) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a23a526418..35bea570b8 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1522,43 +1522,6 @@ importers: specifier: ^5.3.5 version: 5.3.5(@types/node@20.14.13)(less@4.2.0)(sass@1.77.8)(terser@5.31.3) - examples/svelte/svelte-melt: - dependencies: - '@tanstack/query-sync-storage-persister': - specifier: ^5.51.1 - version: link:../../../packages/query-sync-storage-persister - '@tanstack/svelte-query': - specifier: ^5.51.1 - version: link:../../../packages/svelte-query - '@tanstack/svelte-query-devtools': - specifier: ^5.51.1 - version: link:../../../packages/svelte-query-devtools - '@tanstack/svelte-query-persist-client': - specifier: ^5.51.1 - version: link:../../../packages/svelte-query-persist-client - devDependencies: - '@sveltejs/adapter-auto': - specifier: ^3.2.2 - version: 3.2.2(@sveltejs/kit@2.5.18(@sveltejs/vite-plugin-svelte@4.0.0-next.5(svelte@5.0.0-next.192)(vite@5.3.5(@types/node@20.14.13)(less@4.2.0)(sass@1.77.8)(terser@5.31.3)))(svelte@5.0.0-next.192)(vite@5.3.5(@types/node@20.14.13)(less@4.2.0)(sass@1.77.8)(terser@5.31.3))) - '@sveltejs/kit': - specifier: ^2.5.18 - version: 2.5.18(@sveltejs/vite-plugin-svelte@4.0.0-next.5(svelte@5.0.0-next.192)(vite@5.3.5(@types/node@20.14.13)(less@4.2.0)(sass@1.77.8)(terser@5.31.3)))(svelte@5.0.0-next.192)(vite@5.3.5(@types/node@20.14.13)(less@4.2.0)(sass@1.77.8)(terser@5.31.3)) - '@sveltejs/vite-plugin-svelte': - specifier: ^4.0.0-next.4 - version: 4.0.0-next.5(svelte@5.0.0-next.192)(vite@5.3.5(@types/node@20.14.13)(less@4.2.0)(sass@1.77.8)(terser@5.31.3)) - svelte: - specifier: 5.0.0-next.192 - version: 5.0.0-next.192 - svelte-check: - specifier: ^3.8.4 - version: 3.8.4(@babel/core@7.24.9)(less@4.2.0)(postcss-load-config@4.0.2(postcss@8.4.40))(postcss@8.4.40)(sass@1.77.8)(svelte@5.0.0-next.192) - typescript: - specifier: 5.3.3 - version: 5.3.3 - vite: - specifier: ^5.3.3 - version: 5.3.5(@types/node@20.14.13)(less@4.2.0)(sass@1.77.8)(terser@5.31.3) - examples/vue/basic: dependencies: '@tanstack/vue-query':