Comments (4)
Hi @Schmell, could you please provide a small snippet of how you're setting up your tRPC client or preferably a reproduction of this issue that I can use as a reference while I look into this?
from trpc-svelte-query-adapter.
I cannot get a working example on stackblitz. (what a surprise)
Any way I am really just using the getting started files provided, by icflorescu (which works) and then modify the files according to your docs.
After playing for a bit I discovered that I do in fact need an endpoint at the url that is added in the httpBatchLink
, but then i get a transform error.
I am just confused about why i need another endpoint. I thought that the function in the routes (i.e.: greeting) is the endpoint. And if I just need and endpoint what is supposed to be there (because a GET
endpoint does not work)
I think it might be helpful if you could provide a working example, but any help would be appreciated.
Anyway. Here are the files I am using.
lib/trpc/router.ts
// lib/trpc/router.ts
export const router = t.router({
greeting: t.procedure
.input((name: unknown) => {
if (typeof name === 'string') return name;
throw new Error(`Invalid input: ${typeof name}`);
})
.query(async ({ input }) => {
return `Hello, ${input} from tRPC v10 @ ${new Date().toLocaleTimeString()}`;
})
});
export type Router = typeof router;
lib/trpc/context.ts
// lib/trpc/context.ts
import type { RequestEvent } from '@sveltejs/kit'
import type { inferAsyncReturnType } from '@trpc/server'
// we're not using the event parameter is this example,
// hence the eslint-disable rule
// eslint-disable-next-line @typescript-eslint/no-unused-vars
export async function createContext(event: RequestEvent) {
return {
// context information
}
}
export type Context = inferAsyncReturnType<typeof createContext>
hooks.server.ts
// This is the only file that is different from the docs
// hooks.server.ts
import { auth } from '$lib/server/lucia'
import type { Handle } from '@sveltejs/kit'
import { sequence } from '@sveltejs/kit/hooks'
import { createContext } from '$lib/trpc/context'
import { router } from '$lib/trpc/router'
import { createTRPCHandle } from 'trpc-sveltekit'
export const trpc: Handle = createTRPCHandle({ router, createContext })
export const luciaHandle: Handle = async ({ event, resolve }) => {
// we can pass `event` because we used the SvelteKit middleware
event.locals.auth = auth.handleRequest(event)
return await resolve(event)
}
export const themeHandle: Handle = async ({ resolve, event }) => {
let theme: string | null = null
const newTheme = event.url.searchParams.get('theme')
const cookieTheme = event.cookies.get('colorTheme')
if (cookieTheme) {
theme = cookieTheme
} else if (newTheme) {
theme = newTheme
}
if (theme) {
return await resolve(event, {
transformPageChunk: ({ html }) => html.replace('data-theme=""', `data-theme="${theme}"`)
})
}
return resolve(event)
}
export const handle: Handle = sequence(trpc, luciaHandle, themeHandle)
lib/trpc/client.ts
// lib/trpc/client.ts
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
}
lib/trpc/trpc.ts
// lib/trpc/trpc.ts
import type { QueryClient } from '@tanstack/svelte-query';
const client = createTRPCProxyClient<Router>({
links: [
httpBatchLink({
// Replace this URL with that of your tRPC server
// this currently points to a blank sveltekit GET endpoint
url: 'http://localhost:5000/api/greeting',
}),
],
});
export function trpc(queryClient?: QueryClient) {
return svelteQueryWrapper<Router>({
client,
queryClient
});
};
route/+page.svelte
<!-- routes/+page.ts -->
<script lang="ts">
import { trpc } from "$lib/trpc/client";
const client = trpc();
const foo = client.greeting.createQuery("foo", { retry: false });
</script>
<p>
{#if $foo.isPending}
Loading...
{:else if $foo.isError}
Error: {$foo.error.message}
{:else}
{$foo.data}
{/if}
</p>
Thanks again
from trpc-svelte-query-adapter.
Hi, it seems to me like you are already using trpc-sveltekit
, so I don't see the point of having the lib/trpc/trpc.ts
file. That example is for client-only Svelte.
I think that there's been some slight misunderstanding here. If you're using trpc-sveltekit
, you need to set it up first using this guide first: https://icflorescu.github.io/trpc-sveltekit/getting-started
Then modify the trpc
function in lib/trpc/client.ts
as directed in the README. The snippet for the client file in the README does not show the full contents of that file, just what needs to be modified. You shouldn't really have to worry about setting up httpBatchLinks
this way.
from trpc-svelte-query-adapter.
Ah. I see.
It is working, however i did have to pass the $page
store to the trpc function
const client = trpc($page)
from trpc-svelte-query-adapter.
Related Issues (20)
- createServerQuery not respecting staletime HOT 6
- using on server load/ api routes HOT 4
- CreateQuery in +layout.svelte HOT 2
- Library isn't compatible with @tanstack/svelte-query v5 HOT 2
- Support for cancelling queries? HOT 3
- The `trpc: { abortOnUnmount: boolean }` type is now (unintentionally?) required on every query HOT 1
- Allow for naming of queries with `createServerQueries` HOT 2
- How to stream queries to Pages/Components? HOT 9
- An error in documentation HOT 1
- Incorrect data types for createInfiniteQuery HOT 2
- Incorrect opts types on many functions HOT 4
- createUtils getData not returning data HOT 2
- Bug: `trpc` does not use `fetch` from `event`. HOT 1
- [Q/A] I realized I do not have to use the query fn returned from layout/page.ts for ssr? HOT 5
- `@typescript-eslint/eslint-plugin` and `@typescript-eslint/parser` peer dependency blocking upgrades in project HOT 1
- Variables/Data are not send on mutations HOT 2
- trpc.(some procedure).useMutation() arguments misplaced HOT 10
- Brilliant package! HOT 2
- Infinite queries? HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from trpc-svelte-query-adapter.