diff --git a/README.md b/README.md index 26394f2..106feb3 100644 --- a/README.md +++ b/README.md @@ -139,7 +139,7 @@ export function trpc(queryClient?: QueryClient) { Which can then be used in a component as such: ```svelte - + + +{#if $foo.isPending} + Loading... +{:else if $foo.isError} + {$foo.error} +{:else if $foo.data} + {$foo.data} +{/if} + +
+ + +

+ +{#each $queries as query} + {#if query.isPending} + Loading... + {:else if query.isError} + {query.error.message} + {:else if query.data} + {query.data} + {/if} +
+{/each} + +
{ + const data = new FormData(e.currentTarget).get('name'); + if (typeof data === 'string') newNames.push(data); + newNames = newNames; +}}> + + +
+``` + [npm-url]: https://npmjs.org/package/trpc-svelte-query-adapter [npm-image]: https://img.shields.io/npm/v/trpc-svelte-query-adapter.svg [license-url]: LICENSE diff --git a/package.json b/package.json index 764fb85..f8913f1 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "trpc-svelte-query-adapter", - "version": "2.2.7", + "version": "2.3.0", "description": "A simple adapter to use `@tanstack/svelte-query` with trpc, similar to `@trpc/react-query`.", "keywords": [ "trpc", @@ -30,7 +30,8 @@ "main": "dist/index.js", "types": "dist/index.d.ts", "scripts": { - "build": "tsc" + "build": "tsc", + "lint": "eslint src/**/* --ext .js --ext .ts" }, "dependencies": { "proxy-deep": "^3.1.1" diff --git a/src/index.ts b/src/index.ts index 54385c4..02052d6 100644 --- a/src/index.ts +++ b/src/index.ts @@ -172,7 +172,7 @@ type CreateServerQueriesRecord = { [K in keyof TClient]: type CreateServerQueries = []>( queriesCallback: (t: CreateServerQueriesRecord, TError>) => readonly [...TOpts] -) => Promise<() => CreateQueriesResult> +) => Promise<(queriesCallback?: (t: CreateQueriesRecord, TError>, old: readonly [...TOpts]) => readonly [...TOpts]) => CreateQueriesResult> // Procedures const ProcedureNames = { @@ -204,7 +204,7 @@ type CreateQueryProcedure = { [ProcedureNames.query]: (input: TInput, opts?: CreateTRPCQueryOptions & TRPCQueryOpts) => CreateQueryResult, [ProcedureNames.serverQuery]: (input: TInput, opts?: CreateTRPCServerQueryOptions & TRPCQueryOpts) - => Promise<() => CreateQueryResult>, + => Promise<(input?: TInput | ((old: TInput) => TInput)) => CreateQueryResult>, } & {} type CreateTRPCInfiniteQueryOptions = Omit, 'queryKey' | 'queryFn'>; @@ -225,7 +225,7 @@ type CreateInfiniteQueryProcedure = (TInput extends { c [ProcedureNames.infiniteQuery]: (input: Omit, opts?: CreateTRPCInfiniteQueryOptions & InfiniteQueryOpts & TRPCQueryOpts) => CreateInfiniteQueryResult, TError>, [ProcedureNames.serverInfiniteQuery]: (input: Omit, opts?: CreateTRPCServerInfiniteQueryOptions & InfiniteQueryOpts & TRPCQueryOpts) - => Promise<() => CreateInfiniteQueryResult, TError>>, + => Promise<(input?: TInput | ((old: TInput) => TInput)) => CreateInfiniteQueryResult, TError>>, } : {}) & {} @@ -458,13 +458,28 @@ const procedures: Record createQuery({ - ...opts, - ...query, - ...(cacheNotFound ? - { refetchOnMount: opts?.refetchOnMount ?? false } : {} - ), - }); + return (newInput?: any) => { + let newQuery = query; + + if (newInput) { + let i = newInput; + if (typeof newInput === 'function') i = newInput(input); + newQuery = { + queryKey: getArrayQueryKey(path, i, 'query'), + queryFn: ({ signal }) => targetFn(i, { + ...(shouldAbortOnUnmount && { signal }), + }), + }; + } + + return createQuery({ + ...opts, + ...newQuery, + ...(cacheNotFound ? + { refetchOnMount: opts?.refetchOnMount ?? false } : {} + ), + }); + }; }; }, [ProcedureNames.infiniteQuery]: ({ path, target, abortOnUnmount }) => { @@ -502,13 +517,30 @@ const procedures: Record createInfiniteQuery({ - ...opts, - ...query, - ...(cacheNotFound ? - { refetchOnMount: opts?.refetchOnMount ?? false } : {} - ), - }); + return (newInput?: any) => { + let newQuery = query; + + if (newInput) { + let i = newInput; + if (typeof newInput === 'function') i = newInput(input); + newQuery = { + queryKey: getArrayQueryKey(path, i, 'infinite'), + queryFn: ({ pageParam, signal }) => targetFn({ + ...i, + cursor: pageParam ?? opts?.initialCursor, + ...(shouldAbortOnUnmount && { signal }), + }), + }; + } + + return createInfiniteQuery({ + ...opts, + ...newQuery, + ...(cacheNotFound ? + { refetchOnMount: opts?.refetchOnMount ?? false } : {} + ), + }); + }; }; }, [ProcedureNames.mutate]: ({ path, target }) => { @@ -556,7 +588,7 @@ const procedures: Record any) => { - const queryKeys = await Promise.all( + const queries = await Promise.all( input(proxy).map(async (query: any) => { const cache = queryClient.getQueryCache().find(query.queryKey); const cacheNotFound = !cache?.state?.data; @@ -573,7 +605,12 @@ const procedures: Record createQueries({ queries: queryKeys }); + + return (newInput?: (...args: any[]) => any) => { + let newQueries = queries; + if (newInput) newQueries = newInput(proxy, queries); + return createQueries({ queries: newQueries }); + }; }; }, [ProcedureNames.utils]: ({ path, utilsProxy }) => { @@ -674,6 +711,7 @@ export function svelteQueryWrapper({ } return this.nest(() => { }); }, - } - ); + }); } + +