TRPC v11 support

[geoman2]

Hi, trpc v11 just landed, do you intend to upgrade trpc-sveltekit?

[targetlucked69]

Since tRPC v11 is rewritten in Fetch, you can implement it easily like this (without additional library):

1. Create a server hook and use the fetch adapter

// src/hooks.server.ts
import type { Handle } from '@sveltejs/kit';
import { fetchRequestHandler } from '@trpc/server/adapters/fetch';
import { appRouter } from '$lib/trpc/router';

const endpoint = '/api/trpc';
export const handle: Handle = async ({ event, resolve }) => {
	if (event.url.pathname.startsWith(endpoint)) {
		return fetchRequestHandler({
			endpoint,
			req: event.request,
			router: appRouter,
			createContext() {
				return {};
			}
		});
	}

	const response = await resolve(event);
	return response;
};

2. Create a tRPC client

// src/lib/trpc/client.svelte.ts
import { createTRPCClient, httpBatchLink } from '@trpc/client';
import { browser } from '$app/environment';
import { page } from '$app/state';
import type { AppRouter } from './router';

export function useTRPC() {
	return createTRPCClient<AppRouter>({
		links: [
			httpBatchLink({
				url: browser ? '/api/trpc' : `${page.url.origin}/api/trpc`
			})
		]
	});
}

3. Use it in your pages

<script lang="ts">
	import { useTRPC } from '$lib/trpc/client.svelte.js';

	const trpc = useTRPC();
	let greeting = $state('')

	// Runs on server and client
	trpc.greeting.query().then((data) => {
	   greeting = data;
	});
</script>

<h1>{greeting}</h1>

If you're using @tanstack/svelte-query, it's easy as

<script lang="ts">
  import { createQuery } from '@tanstack/svelte-query'
  import { useTRPC } from '$lib/trpc/client.svelte.js';

  const trpc = useTRPC();

  const query = createQuery({
    queryKey: ['greeting'],
    queryFn: () => trpc.greeting.query(),
  })
</script>

[zach-hopkins]

Since tRPC v11 is rewritten in Fetch, you can implement it easily like this (without additional library):

You're a god thank you for saving me tons of time.

[targetlucked69]

Yeah say goodbye to tRPC sveltejs/kit#13897

[mattbdc]

@targetlucked69 why does your server url need to contain the origin and not just a relative path, I thought server side it would use the fetch provided by sveltekit which would essentially skip the http call and just call the trpc handler

[mattbdc]

https://trpc.io/docs/client/links/localLink perhaps for !browser (couldn't find a way to thread a custom fetch through to each query/mutation - i.e. the svelte one from load params)