michaelschufi Posts

michaelschufi

•Created by michaelschufi on 6/21/2024 in #❓-help

How do I use the rsc-rq-prefetch example with a protected procedure?

Thank you for this implementation! It looks sooo promising 😀 However, I ran into an issue when trying it out: https://github.com/trpc/trpc/blob/next/examples/.experimental/next-app-dir/src/app/rsc-rq-prefetch/page.tsx If we have a protected procedure instead of a public one, the server is not authenticated during SSR and an error is thrown. How can we solve this? Can we just ignore the error and will it still work?

22 replies

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?

68 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