michaelschufi
michaelschufi
TtRPC
Created by michaelschufi on 6/12/2024 in #❓-help
Can I use the "Streaming with Server Components" strategy with tRPC?
https://tanstack.com/query/latest/docs/framework/react/guides/advanced-ssr#streaming-with-server-components has a neat example on how to prefetch queries without having to await them. Is this something we can use with tRPC?
8 replies
TtRPC
Created by michaelschufi on 5/28/2024 in #❓-help
How to access the request body in the onError callback?
Hi 👋 I'm having trouble getting the request's body (probably plain text) when the following error occurs in the fetchRequestHandler:
TRPCError: "input" needs to be an object when doing a batch call
TRPCError: "input" needs to be an object when doing a batch call
I've tried to get it with req.text() but as it is already consumed, I cannot access it. The code in question:
fetchRequestHandler({
endpoint: '/api/trpc',
req,
router: appRouter,
createContext: () => ({}),
onError: async ({ error, req, input }) => {
console.log('TRPC route error', error);

let body = null;

try {
if (req.method === 'POST') {
const isJsonContentType =
!!req.headers.get('Content-Type')?.includes('application/json') ??
false;

body = isJsonContentType ? await req.json() : await req.text();
}
} catch () {
// here it would throw that the body is unusable
}

console.log(
req.method,
req.headers.get('Content-Type'),
{ body, input },
// here: both, body and input are empty
);

// ...
}
}
fetchRequestHandler({
endpoint: '/api/trpc',
req,
router: appRouter,
createContext: () => ({}),
onError: async ({ error, req, input }) => {
console.log('TRPC route error', error);

let body = null;

try {
if (req.method === 'POST') {
const isJsonContentType =
!!req.headers.get('Content-Type')?.includes('application/json') ??
false;

body = isJsonContentType ? await req.json() : await req.text();
}
} catch () {
// here it would throw that the body is unusable
}

console.log(
req.method,
req.headers.get('Content-Type'),
{ body, input },
// here: both, body and input are empty
);

// ...
}
}
I would very much like to know what was sent in order to debug - in any case. The body has to be forwarded to the callback by tRPC, correct? Or is there another way?
2 replies
TtRPC
Created by michaelschufi on 7/21/2023 in #❓-help
Example for tRPC, stable version, with RSC
Hi This may be a stupid question... The readme of the experimental example mentions
Note You can already use tRPC with app directory, by: using @trpc/client directly in components (both RSC and non-RSC) use @trpc/next for client components
What do you mean by this? Do you have an example for that using the current stable version of tRPC? Especially the part for the RSC components. I currently wouldn't mind to use tRPC in a non-optimal RSC way. But I would like to use Next's app directory to colocate files (and not having to have code in a completely different pages directory).
6 replies
TtRPC
Created by michaelschufi on 6/13/2023 in #❓-help
What's the benefit of using the context instead of a direct import for the database connection?
I've wondered why I should use the tRPC context instead of just importing my database singleton from a module. Is there any benefit to it? Because of TS performance issues, I'm creating multiple functions for bigger procedures. And passing the db connection around may be an unnecessary overhead.
12 replies
TtRPC
Created by michaelschufi on 5/25/2023 in #❓-help
Best Practice to Fetch a Query OnDemand
What's the best practice to fetch a query on demand? I don't have the context for the query's input in the scope of my component. (Using react-hook-form with a zodResolver that has a dynamic refinement based on the fields submitted and a components prop)
4 replies
TtRPC
Created by michaelschufi on 5/7/2023 in #❓-help
How can I access the trpc context in zod's refine function?
To do something like
create: myProcedure
.input(myInputSchema.refine(async ({ slug }, ctx) =>
slugDoesNotAlreadyExist(ctx.db, slug),
{
message: 'Slug already exists',
path: ['slug'],
}))
.mutation(async ({ ctx, input }) => {
return ctx.db.insert(...)
}),
create: myProcedure
.input(myInputSchema.refine(async ({ slug }, ctx) =>
slugDoesNotAlreadyExist(ctx.db, slug),
{
message: 'Slug already exists',
path: ['slug'],
}))
.mutation(async ({ ctx, input }) => {
return ctx.db.insert(...)
}),
Edit: It would allow for easier UX because I can use the existing validation code in the frontend to show the user the errors at the correct field.
5 replies