### Installing trpc-svelte-query and svelte-query

Source: https://github.com/ottomated/trpc-svelte-query/blob/main/README.md

Installs the necessary packages for integrating tRPC with Svelte and Svelte Query using the pnpm package manager.

```bash
pnpm i trpc-svelte-query @tanstack/svelte-query
```

--------------------------------

### Setting up tRPC Client in SvelteKit

Source: https://github.com/ottomated/trpc-svelte-query/blob/main/README.md

Configures the tRPC client instance using createTRPCSvelte, linking it to the server endpoint '/api/trpc' via httpBatchLink. Requires importing the AppRouter type from the server.

```typescript
// Import the router type from your server file
import type { AppRouter } from '$lib/server/routes/_app';
import { createTRPCSvelte, httpBatchLink } from 'trpc-svelte-query';

export const trpc = createTRPCSvelte<AppRouter>({
	links: [
		httpBatchLink({
			url: '/api/trpc',
		}),
	],
});
```

--------------------------------

### Setting up tRPC Server API Handler in SvelteKit

Source: https://github.com/ottomated/trpc-svelte-query/blob/main/README.md

Creates the tRPC server instance using createTRPCSvelteServer, specifying the endpoint and the application router. Exports the handler function for both GET and POST requests to be used by SvelteKit's +server.ts file.

```typescript
import { appRouter } from '$lib/server/routes/_app';
import { createTRPCSvelteServer } from 'trpc-svelte-query/server';

const trpcServer = createTRPCSvelteServer({
	endpoint: '/api/trpc',
	router: appRouter,
});

export const GET = trpcServer.handler;
export const POST = trpcServer.handler;
```

--------------------------------

### Setting up Svelte Query Provider in Root Layout

Source: https://github.com/ottomated/trpc-svelte-query/blob/main/README.md

Wraps the application's children with the QueryClientProvider from @tanstack/svelte-query, providing the tRPC client's queryClient instance. This is necessary for the client-side query hooks to function.

```svelte
<script lang="ts">
  import { QueryClientProvider } from '@tanstack/svelte-query';
  import { trpc } from '$lib/trpc/client';

	const { children } = $props();
</script>

<QueryClientProvider client={trpc.queryClient}>
  {@render children?.()}
</QueryClientProvider>
```

--------------------------------

### Migrating from v2: Remove QueryClientProvider

Source: https://github.com/ottomated/trpc-svelte-query/blob/main/README.md

Shows the diff for removing the explicit QueryClientProvider wrapper in the root layout when migrating from v2, as SSR handles hydration differently.

```svelte
+layout.svelte:

<script lang="ts">
-  import { QueryClientProvider } from '@tanstack/svelte-query';

  import { trpc } from '$lib/trpc/client';

  const { data, children } = $props();

-  const queryClient = trpc.hydrateFromServer(data.trpc);
+  trpc.hydrateFromServer(() => data.trpc);
</script>

- <QueryClientProvider client={queryClient}>
{@render children?.()}
- </QueryClientProvider>
```

--------------------------------

### Extracting tRPC Server Instance for SSR

Source: https://github.com/ottomated/trpc-svelte-query/blob/main/README.md

Moves the tRPC server instance creation into a separate file ($lib/server/server.ts) so it can be reused for both the API handler and SSR data hydration in SvelteKit's server load functions.

```typescript
import { appRouter } from '$lib/server/routes/_app';
import { createTRPCSvelteServer } from 'trpc-svelte-query/server';

export const trpcServer = createTRPCSvelteServer({
	endpoint: '/api/trpc',
	router: appRouter,
});
```

--------------------------------

### Passing SSR Data from Server Layout

Source: https://github.com/ottomated/trpc-svelte-query/blob/main/README.md

Adds a +layout.server.ts file to the root layout to fetch SSR data using trpcServer.hydrateToClient, which prepares the data to be passed from the server load function to the client-side layout.

```typescript
import { trpcServer } from '$lib/server/server';

export const load = async (event) => {
	return {
		trpc: trpcServer.hydrateToClient(event),
	};
};
```

--------------------------------

### Using tRPC Client Query in a Svelte Component

Source: https://github.com/ottomated/trpc-svelte-query/blob/main/README.md

Demonstrates how to use the tRPC client instance to call a server query ('greeting.query') with parameters. Shows how to access the query state ($query) to display data, error messages, or a loading indicator.

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

  const query = trpc.greeting.query({ name: 'tRPC' });
</script>

{#if $query.isSuccess}
  <p>{$query.data.greeting}</p>
{:else if $query.isError}
  <p>{$query.error.message}</p>
{:else}
  <p>Loading...</p>
{/if}
```

--------------------------------

### Migrating from v2: Remove Event from SSR Call

Source: https://github.com/ottomated/trpc-svelte-query/blob/main/README.md

Shows the diff for removing the 'event' parameter from the server instance's ssr method call in a server load function when migrating from v2.

```typescript
import { trpc } from '$lib/server/server';

export const load = async () => {
-  await trpcServer.greeting.ssr({ name: 'tRPC' }, event);
+  await trpcServer.greeting.ssr({ name: 'tRPC' });
};
```

--------------------------------

### Preloading Queries in Server Page Load

Source: https://github.com/ottomated/trpc-svelte-query/blob/main/README.md

Adds a +page.server.ts file to a specific page to preload data for a query ('greeting.ssr') using the server instance's ssr method. This ensures the data is available for hydration when the page loads.

```typescript
import { trpcServer } from '$lib/server/server';

export const load = async () => {
	await trpcServer.greeting.ssr({ name: 'tRPC' });
};
```

--------------------------------

### Using Extracted Server Instance in API Endpoint

Source: https://github.com/ottomated/trpc-svelte-query/blob/main/README.md

Updates the API endpoint file (routes/api/trpc/[...trpc]/+server.ts) to import and use the trpcServer instance extracted into a shared file, maintaining the same handler logic.

```typescript
import { trpcServer } from '$lib/server/server';

export const GET = trpcServer.handler;
export const POST = trpcServer.handler;
```

--------------------------------

### Hydrating SSR Data in Root Layout

Source: https://github.com/ottomated/trpc-svelte-query/blob/main/README.md

Modifies the root +layout.svelte file to receive the SSR data passed from the server load function and hydrate the tRPC client using trpc.hydrateFromServer, ensuring queries are pre-filled on the client.

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

	const { data, children } = $props();

  trpc.hydrateFromServer(() => data.trpc);
</script>

{@render children?.()}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.