Custom hooks for svelte-query

[vishalbalaji]

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:

// $lib/client/queryHooks.ts
import trpc from '$lib/client/trpc';
import type { AppRouter } from '$lib/server/trpcServer';
import {
	useMutation,
	useQuery,
	type QueryKey,
	type UseMutationOptions,
	type UseQueryOptions,
} from '@sveltestack/svelte-query';
import type { TRPCClientError } from '@trpc/client';
import type {
	AnyMutationProcedure,
	AnyQueryProcedure,
	inferRouterInputs,
	inferRouterOutputs,
	ProcedureOptions,
} from '@trpc/server';

const trpcClient = trpc();

type RouterError = TRPCClientError<AppRouter>;

type RouterQuery<T = AppRouter['_def']['procedures']> = {
	[K in keyof T]: T[K] extends AnyQueryProcedure ? K : never;
}[keyof T];
type RouterMutation<T = AppRouter['_def']['procedures']> = {
	[K in keyof T]: T[K] extends AnyMutationProcedure ? K : never;
}[keyof T];

type RouterInput = inferRouterInputs<AppRouter>;
type RouterOutput = inferRouterOutputs<AppRouter>;

export const queryHook = async <TQuery extends RouterQuery>(
	key: TQuery,
	input: RouterInput[TQuery],
	opts?: ProcedureOptions,
) => {
	const queryFunction = trpcClient[key].query as (
		input: RouterInput[TQuery],
		opts?: ProcedureOptions
	) => unknown;
	return (await queryFunction(input, opts)) as RouterOutput[TQuery];
};

export const mutateHook = async <TQuery extends RouterMutation>(
	key: TQuery,
	input: RouterInput[TQuery],
	opts?: ProcedureOptions,
) => {
	const queryFunction = trpcClient[key].mutate as (
		input: RouterInput[TQuery],
		opts?: ProcedureOptions
	) => unknown;
	return (await queryFunction(input, opts)) as RouterOutput[TQuery];
};

export const useTRPCQuery = <TQuery extends RouterQuery>(
	key: TQuery,
	input: RouterInput[TQuery],
	opts?: UseQueryOptions<RouterOutput[TQuery], RouterError, RouterOutput[TQuery], QueryKey>,
) => {
	return useQuery<RouterOutput[TQuery], RouterError>(key, () => queryHook(key, input), opts);
};

export const useTRPCMutation = <TMutation extends RouterMutation>(
	key: TMutation,
	input: RouterInput[TMutation],
	opts?: UseMutationOptions<RouterOutput[TMutation], RouterError, void, unknown>,
) => {
	return useMutation<RouterOutput[TMutation], RouterError>(key, () => mutateHook(key, input), opts);
};

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:

<script lang="ts">
import { useTRPCMutation, useTRPCQuery } from '$lib/client/queryHooks';

const userQuery = useTRPCQuery('getUser', 1);
const userMutation = useTRPCMutation('updateUser', { id: 1, name: 'foo' });
</script>

Do let me know if this issue does not belong here so that I can remove it.

[icflorescu]

I think this is fantastic!
As I mentioned before, I'm planning to do a full rewrite of tRPC-SvelteKit (and hopefully come up with a documentation website) as soon as I manage to clear a few days in my schedule.
This will definitely be in the new version.

[vishalbalaji]

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 svelte-query hook and was wondering whether it would be feasible to have it be separate thing like @trpc/react-query and extend existing trpc functionality like react query does, with separate useQuery and useMutation functions beign accessible directly through the trpc client. Let me know of you have any opinions on this.

[sproott]

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, svelte-query is to become an official Svelte version of TanStack Query, which might need some changes further down the line.

[vishalbalaji]

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 svelte-query getting merged in with tanstack-query would change much because svelte-query uses the core react-query lib that is used by the other query libraries like vue-query and solid-query as well. Although, seeing as how svelte-query seems to be the last one remaining to be supported, I would guess that the tRPC adapters won't be too far down the list.

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, query, useQuery and so on will need to be properly implemented and its missing a ton of stuff, but I guess this should work on a surface level as a temporary solution.

EDIT

Never mind, the above solution does not work. The trpc client is a nested Proxy which gets compiled out and doesn't really exist during runtime. So even though the type defs work perfectly fine, the object returned from the reduce is empty since the trpc client is empty.

[vishalbalaji]

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 trpc-sveltekit and @tanstack/svelte-query. It is nowhere near complete yet and has a long way to go, but for now, I have implemented some basic features like useQuery, useMutation and useInfiniteQuery.

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.

[vishalbalaji]

Hi there! I had previously mentioned in #53 that I would update this discussion when I released my adapter on npm, but it completely slipped my mind. So now that I just published v2.0.0, I thought that I would do so. Also to note, there is another similar adapter created by @ottomated, so... I think this discussion can be closed. @icflorescu, what do you think?