Custom hooks for svelte-query
#38
Replies: 6 comments
-
I think this is fantastic! |
Beta Was this translation helpful? Give feedback.
-
That's great to hear! This library is great and I'm really looking forward to your rewrite. I am already working on improving this implementation, especially the outer |
Beta Was this translation helpful? Give feedback.
-
There's a tRPC adapter for Solid which provides the same proxy mechanism as the native React version, making it more in line with tRPC v10 and it's much more ergonomic imo. I assume it will be possible to adapt it for Svelte as well. Here's the source file. I might take a look at it once I have the time and try to come up with a working snippet. Also, |
Beta Was this translation helpful? Give feedback.
-
Or, it might be a better bet to adapt from the source itself: trpc/packages/react-query, the only issue being that a lot of it closely depends on Next.js. Both of these repos are far beyond my understanding, but I'm still trying to make sense of it. I don't think that Until that happens, though, an extremely hacky way to achieve this might be something like this: // $lib/trpcClient.ts
import { createTRPCProxyClient, httpBatchLink } from '@trpc/client';
import type { AnyMutationProcedure, AnyQueryProcedure } from '@trpc/server';
import type { AppRouter } from './server';
const trpc = createTRPCProxyClient<AppRouter>({
links: [
httpBatchLink({
url: 'http://localhost:5173/trpc',
}),
],
});
// CREDIT: https://stackoverflow.com/a/68284607
type Keys<T> = { [P in keyof T]: T[P] }[keyof T];
type KeyOfType<T, U = Keys<T>> = { [P in keyof T]: T[P] extends U ? P : never }[keyof T];
type RouterQuery = KeyOfType<AppRouter['_def']['procedures'], AnyQueryProcedure>
type RouterMutation = KeyOfType<AppRouter['_def']['procedures'], AnyMutationProcedure>
type Procedure = keyof AppRouter['_def']['procedures']
type DecorateProcedure = {
[key in Procedure]:
key extends RouterQuery
? { query: unknown, useQuery: unknown }
: key extends RouterMutation
? { mutate: unknown, useMutation: unknown }
: never
}
const clientWithQuery = Object.entries(trpc).reduce<DecorateProcedure>((
client,
[key, procedure]
) => {
if ("query" in procedure) {
test[key as RouterQuery] = {
query: procedure.query,
useQuery: procedure.query
}
} else if ("mutate" in procedure) {
test[key as RouterMutation] = {
mutate: procedure.mutate,
useMutation: procedure.mutate
}
}
return client
}, {} as DecorateProcedure)
export default trpc Obviously, EDITNever mind, the above solution does not work. The |
Beta Was this translation helpful? Give feedback.
-
Hello, it's been a while. I had a little free time recently and was looking into this a bit more. I wanted to share here that I started writing an adapter of my own that more or less works with I am sort of making it up as I go along and haven't tested it thoroughly, but I would love any feedback on it. If you would like to check it out, you can do so here. |
Beta Was this translation helpful? Give feedback.
-
Hi there! I had previously mentioned in #53 that I would update this discussion when I released my adapter on |
Beta Was this translation helpful? Give feedback.
-
I have been doodling around with some custom tRPC hooks and I have arrived upon a sort of solution to use this in conjunction with
svelte-query
. This does address #22, but I feel that its not quite relevant enough as this solution is written to work with tRPC v10 and is meant to be a potential solution to use in the future. Personally, I feel that the Discussions tab would be a more fitting place for something like this. This solution uses the sproot/trpc-sveltekit fork, which is updated to use tRPC v10.Anyway, here's the code I came up with:
This is super hacky, but it does provide the proper type definitions for both inputs and outputs. I'm still fairly new to Typescript and still learning, so I would really appreciate any feedback regarding how this could be improved.
Usage:
Do let me know if this issue does not belong here so that I can remove it.
Beta Was this translation helpful? Give feedback.
All reactions