vishalbalaji / trpc-svelte-query-adapter Goto Github PK

export const load: PageLoad = async (event) => {
  const { queryClient } = await event.parent();
  const api = trpc(event, queryClient);
  return {
    queries: await api.createServerQueries((t) => [
      t.public.todos.list(),
      t.public.hello.get()
    ])
  };
};

export const load: PageLoad = async (event) => {
  const { queryClient } = await event.parent();
  const api = trpc(event, queryClient);
  return {
    queries: await api.createServerQueries((t) => [
      {
        listTodos: t.public.todos.list(),
        getHello: t.public.hello.get()
      }
    ])
  };
};

<script lang="ts">
  import { page } from '$app/stores';
  import { trpc } from '$lib/trpc/client';
  import type { PageData } from './$types';

  export let data: PageData;

  const queries = data.queries();

  $: listTodos = $queries[0];
  $: getHello = $queries[1];

  const api = trpc($page);
  const addTodo = api.public.todos.add.createMutation();
  const deleteTodo = api.public.todos.delete.createMutation();
</script>

$queries.listTodos

$queries.getHello

// +page.ts
import type { PageLoad } from './$types';
import { trpc } from '$lib/trpc/client';

export const load: PageLoad = async (event) => {
  const { queryClient } = await event.parent();
  const client = trpc(event, queryClient);

  return {
    users: await client.user.all.createServerQuery(),
  };
};

// page.ts->load()
return {
    foo: await client.greeting.createServerQuery('foo')
}

  export let data: PageData;

  const foo = data.foo();

client.greeting.createQuery('foo')

refetchOnMount: false,
refetchOnReconnect: false,
refetchOnWindowFocus: false,
staleTime: Infinity,
enabled: false,

// lib/trpc/trpc.ts

import { svelteQueryWrapper } from '$lib/trpc-svelte-query';
import type { QueryClient } from '@tanstack/svelte-query';
import type { Router } from '$lib/trpc/router';
import  {createTRPCClient, type TRPCClientInit } from 'trpc-sveltekit';

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;
}

// +layout.ts
import { QueryClient } from "@tanstack/svelte-query";
import type { LayoutLoad } from "./$types";
import type { LoadEvent } from "@sveltejs/kit";
import { trpc } from "$lib/trpc/client";

export const load: LayoutLoad = async (event: LoadEvent) => {
    const queryClient = new QueryClient()
    const client = trpc(event, queryClient)
    return {queryClient, grettingData: client.greeting.createServerQuery()}
}

// +layout.svelte
<script lang="ts">
	import type { LayoutData } from "./$types";
    import {QueryClientProvider, useQueryClient} from "@tanstack/svelte-query"
    export let data: LayoutData;
    
    const greetingData = data.grettingData()
    
    console.log($greetingData.data)
</script>

<QueryClientProvider client={data.queryClient}>
    
    <slot />
    
</QueryClientProvider>

const search = trpc($page).search.text.createQuery({ text: input.trim() })

// Property 'queryKey' is missing in type '{ enabled: boolean; }' but required in type ...
const search = trpc($page).search.text.createQuery({ text: input.trim() }, { enabled: input.trim().length > 0 })

// +page.ts
import { trpc } from '$lib/trpc/client';
import type { PageLoad } from './$types';

export const load: PageLoad = async (event) => {
  const { queryClient } = await event.parent();
  const api = trpc(event, queryClient);
  return {
    queries: await api.createServerQueries((t) => [
      t.authed.todos.all(),
      t.public.hello.get()
    ])
  };
};

// +page.svelte.ts
{#await data.streamed.comments}
  Loading...
{:then value}
  {value}
{/await}

// route.ts
router({
  infinite: protectedProcedure
    .use(logger)
    .input(
      z.object({
        cursor: z.number(),
      })
    )
    .query(async ({ input, ctx }) => {
      console.log(input)
      const { cursor } = input
      const posts = await db.query.clubPosts.findMany({
        limit: limit + 1,
        offset: cursor,
        ...
        orderBy: (post, { desc }) => [desc(post.createdAt)],
      })

      let nextCursor: number | null = null
      if (posts.length > limit) {
        posts.pop()
        nextCursor = cursor + limit
      }
      return { posts, nextCursor }
    }),
})

// page.svelte
  const feed = trpc($page).explore.infinite.createInfiniteQuery(
    {},
    {
      initialPageParam: 0,
      getNextPageParam: ({ nextCursor }) => nextCursor,
    }
  )

// $lib/trpc.ts

import type { AppRouter } from '$lib/server/trpc/routes';
import { createTRPCProxyClient, httpBatchLink } from '@trpc/client';
import SuperJSON from 'superjson';
import { svelteQueryWrapper } from 'trpc-svelte-query-adapter';
import type { QueryClient } from '@tanstack/svelte-query';

const client = createTRPCProxyClient<AppRouter>({
	links: [
		httpBatchLink({
			url: 'http://localhost:5173/api/trpc'
		})
	],
	transformer: SuperJSON
});

export const trpc = (queryClient?: QueryClient) =>
	svelteQueryWrapper<AppRouter>({
		client,
		queryClient
	});

export const trpcOnServer = (fetch) =>
	createTRPCProxyClient<AppRouter>({
		links: [
			httpBatchLink({
				url: '/api/trpc',
				fetch
			})
		],
		transformer: SuperJSON
	});

export const userRouter = {
  all: publicProcedure
    .input(
      z
        .object({
          name: z.string(),
        })
        .optional(),
    )
    .query(async ({ input }) => {
      return 'something'
    }),
} satisfies TRPCRouterRecord;

type GetQueryKey<TInput = undefined> = TInput extends undefined
	? {
		[ProcedureNames.queryKey]: () => QueryKey
	}
	: {
		/**
		 * Method to extract the query key for a procedure
		 * @param type - defaults to `any`
		 */
		[ProcedureNames.queryKey]: (input: TInput, type?: QueryType) => QueryKey
	} & {}

type GetQueryKey<TInput = undefined> = [TInput] extends [undefined] | [void]
	? {
		[ProcedureNames.queryKey]: () => QueryKey
	}
	: {
		/**
		 * Method to extract the query key for a procedure
		 * @param type - defaults to `any`
		 */
		[ProcedureNames.queryKey]: (input: TInput, type?: QueryType) => QueryKey
	} & {}

export const load = (async (evt) => {
  const { queryClient } = await evt.parent();
  const client = trpcQuery(evt, queryClient);
  return {
    data: client.test.list.createServerQuery({}, { staleTime: 10 * 60 }),
  };
}) satisfies PageLoad;

// $lib/trpc.ts
import type { AppRouter } from '$lib/server/trpc/routes';
import { createTRPCProxyClient, httpBatchLink } from '@trpc/client';
import SuperJSON from 'superjson';
import { svelteQueryWrapper } from 'trpc-svelte-query-adapter';
import type { QueryClient } from '@tanstack/svelte-query';

const client = createTRPCProxyClient<AppRouter>({
	links: [
		httpBatchLink({
			url: 'http://localhost:5173/api/trpc'
		})
	],
	transformer: SuperJSON
});

export const trpc = (queryClient?: QueryClient) =>
	svelteQueryWrapper<AppRouter>({
		client,
		queryClient
	});

// $lib/server/trpc/index.tsimport { initTRPC } from '@trpc/server';
import type { Context } from '$lib/server/trpc/context';
import superjson from 'superjson';
import { ZodError } from 'zod';

const t = initTRPC.context<Context>().create({
	transformer: superjson
});
export const { procedure, router, middleware, createCallerFactory } = t;

// $lib/server/trpc/context.ts
import type { RequestEvent } from '@sveltejs/kit';
import type { inferAsyncReturnType } from '@trpc/server';

export const createContext = async (event: RequestEvent) => ({ event });
export type Context = inferAsyncReturnType<typeof createContext>;

// $lib/server/trpc/caller.ts
import { createCallerFactory } from '$lib/server/trpc';
import { appRouter } from '$lib/server/trpc/routes';

export const createCaller = createCallerFactory(appRouter);

// $lib/server/trpc/routes/index.ts
import { clients } from './clients';
import { files } from './files';
import { projects } from './projects';
import { users } from './users';
import { router } from '$lib/server/trpc';

export const appRouter = router({
	users
});

export type AppRouter = typeof appRouter;

// $lib/server/trpc/routes/users.ts
import { isLogged } from '$lib/server/trpc/middlewares/auth';
import { router, procedure } from '$lib/server/trpc';
import { db } from '$lib/server/database/index';
import { client } from '$lib/server/database/schema';
import { eq } from 'drizzle-orm';
import { clientSchema } from '$lib/zod';

export const users = router({
	list: procedure
		// use query for GET
		.query(async () => db.select().from(client)),
	delete: procedure
		.use(isLogged)
		.input(userSchema.pick({ id: true }))
		// use mutation for POST
		.mutation(async ({ input: { id } }) => {
			db.delete(user).where(eq(user.id, id));
		})
});

// routes/api/trpc/[...path]/+server.ts
import { createContext } from '$lib/server/trpc/context';
import { appRouter } from '$lib/server/trpc/routes';
import type { RequestHandler } from '@sveltejs/kit';
import { fetchRequestHandler } from '@trpc/server/adapters/fetch';

const requestHandler: RequestHandler = (event) =>
	fetchRequestHandler({
		req: event.request,
		router: appRouter,
		endpoint: '/api/trpc',
		createContext: () => createContext(event)
	});

export const GET = requestHandler;
export const POST = requestHandler;

// routes/+layout.ts
import { browser } from '$app/environment';
import { QueryClient } from '@tanstack/svelte-query';
import type { LayoutLoad } from './$types';

export const load: LayoutLoad = async () => {
	const queryClient = new QueryClient({
		defaultOptions: {
			queries: {
				enabled: browser,
				staleTime: 60 * 1000
			}
		}
	});

	return { queryClient };
};

// routes/+layout.svelte
<script lang="ts">
	import { QueryClientProvider } from '@tanstack/svelte-query';
	import type { PageData } from './$types';

	export let data: PageData;
</script>

<QueryClientProvider client={data.queryClient}>
	<main>
		<slot />
	</main>
</QueryClientProvider>

// $lib/server/trpc/middlewares/auth.ts
import { middleware } from '$lib/server/trpc';
import { TRPCError } from '@trpc/server';

export const isLogged = middleware(async ({ next, ctx }) => {
	if (!ctx.event.locals.user && !ctx.event.locals.session)
		throw new TRPCError({ code: 'UNAUTHORIZED', message: 'Not authorized!' });
	return next();
});

// $lib/zod.ts
import { z } from 'zod';
import validator from 'validator';

export const roles = ['admin', 'user'] as const;
export const roleEnumSchema = z.enum(roles);
export const userSchema = z.object({
	id: z.string()
	role: roleEnumSchema,
	username: z
		.string()
		.min(3)
		.max(31)
		.refine((val) => validator.isAlphanumeric(val), {
			message: 'Username can only contain letters and numbers.'
		}),
	password: z.string().min(3).max(31)
});
export type User = z.infer<typeof userSchema>;