Not getting the input value ( undefined instead)

[LargatSeif]

First of all thanks for the great work 🙏🏻.

i've used the example guide but i'm getting stuck because i'm getting undefined instead of the input that i'm passing on the +page.svelte

here are my config files :

client.ts

import type { QueryClient } from '@tanstack/svelte-query';
import { svelteQueryWrapper } from 'trpc-svelte-query-adapter';
import { createTRPCClient, type TRPCClientInit } from 'trpc-sveltekit';
import type { Router } from './router';
let browserClient: ReturnType<typeof svelteQueryWrapper<Router>>;

export function trpc(init?: TRPCClientInit, queryClient?: QueryClient) {
	const isBrowser = typeof window !== 'undefined';
	if (isBrowser && browserClient) return browserClient;
	const client = () =>
		svelteQueryWrapper<Router>({
			client: createTRPCClient<Router>({ init }),
			queryClient
		});
	if (isBrowser) browserClient = client();
	return client();
}

context.ts

import { db } from '$lib/server/db';
import type { RequestEvent } from '@sveltejs/kit';

/**
 * Create a context for the tRPC server.
 * This will pass the event object to all your request handlers.
 */
export async function createContext(event: RequestEvent) {
	return {
		event,
		db
	};
}

export type Context = Awaited<ReturnType<typeof createContext>>;

t.ts:

import { initTRPC } from '@trpc/server';
// import { SuperJSON } from 'superjson';
import { dev } from '$app/environment';
import transformer from 'trpc-transformer';
import type { Context } from './context';
/*
 * This is a helper function to create a tRPC instance.
 * It is used as a singleton to avoid creating a new instance on every request.
 */
export const t = initTRPC.context<Context>().create({
	isDev: dev,
	errorFormatter({ input, shape }) {
		console.log({ input });
		return shape;
	},
	transformer
});

router.ts

export const router = t.router({
	pages: t.router({
		getGroup: t.procedure.input(z.string()).query(async ({ ctx:{db}, input: pageID }) => {
			const pages = await db.query.pages.findMany({
				where: (pages, { eq }) => eq(pages.id, pageID)
			});

			if (!pages) {
				return [];
			}

			return pages;
		})
	})
});

hooks.server.ts

export const handleTRPC: Handle = createTRPCHandle({
	router,
	createContext,
	url: '/trpc',
	onError({ type, path, error, input, req }) {
		console.error(`>>> tRPC failed on ${path} with error: ${error}`);
		console.error({ input });
		console.error({ req });
		console.error(type);
	}
});

export const handle = sequence(handleBetterAuth, handleAuth, handleTRPC);

+page.svelte:

<script lang="ts>
import {page} from '$app/state';
const api = trpc(page);
const pages = api.pages.getGroup.createQuery(page.params.pageID);

</script>
{#if $pages.isLoading}
	<div class="flex h-full flex-col items-center justify-center">
		<div class="spinner"></div>
	</div>
{:else if $pages.isError}	
    <div class="text-red-500">
        Error loading pages
    </div>
{:else if $pages.isSuccess}
    <div class="flex h-full overflow-hidden">
        <div class="flex flex-col w-1/3 border-r">
            <div class="flex h-16 items-center border-b px-4 py-2">
                <div class="float-start w-fit text-nowrap">
                    <span class="text-sm">
                        Pages
                    </span>
                </div>
            </div>
            <div class="flex flex-col overflow-y-auto"> 
                {#each $pages.data as page}
                    <div class="flex h-16 items-center border-b px-4 py-2">
                        <div class="float-start w-fit text-nowrap">
                            <span class="text-sm">
                                {page.name}
                            </span>
                        </div>
                    </div>
                {/each}
            </div>
        </div>
        <div class="flex flex-col w-2/3">
            <div class="flex h-16 items-center border-b px-4 py-2">
                <div class="float-start w-fit text-nowrap">
                    <span class="text-sm">
                        Page Preview
                    </span>
                </div>
            </div>
            <div class="flex flex-col overflow-y-auto">
                <SurveyPreview />
            </div>
        </div>
    </div>
{/if}

[LargatSeif]

i've managed to get it to work sorry it was my mistake when configuring the client.
Thanks anyway 🙏🏻