Michael Schaufelberger Comments - tRPC

Michael Schaufelberger

•Created by Michael Schaufelberger on 11/27/2024 in #❓-help

Hydration error when using useQuery instead of useSuspenseQuery when prefetching

Nope, not yet unfortunately. Some findings: - If I delay the SSR after prefetching significantly (e.g. sleeping right after the prefetch for 4s so the prefetch can complete), the error goes away. This basically means, that if the promise is resolved already, it works. - If I delay the query's output significantly, so the prefetch cannot be done in time, the error goes away. - Everything else, is very prone to the hydration mismatch. I.e. it happens close to 100% of the time. Upgrading to the latest for the trpc and react-query packages did not work. As of now, that is:

    "@tanstack/react-query": "^5.66.11",
    "@tanstack/react-query-devtools": "^5.66.11",
    "@trpc/client": "11.0.0-rc.819",
    "@trpc/react-query": "11.0.0-rc.819",
    "@trpc/server": "11.0.0-rc.819",

    "@tanstack/react-query": "^5.66.11",
    "@tanstack/react-query-devtools": "^5.66.11",
    "@trpc/client": "11.0.0-rc.819",
    "@trpc/react-query": "11.0.0-rc.819",
    "@trpc/server": "11.0.0-rc.819",

Edit: This is the case if I use query.isFetching btw. I just need to use this, because I also want to change the table's behavior in case of a refetch. But this shouldn't matter for the initial render afaik.

5 replies

•Created by Michael Schaufelberger on 1/15/2025 in #❓-help

How do *you* structure the tRPC router when dealing with isolated components?

Thank you for the insight. I think splitting the namespace or even the router is a good idea. So I can better know which procedures are from isolated/deeply nested components.

5 replies

•Created by sh03 on 12/12/2024 in #❓-help

Simplifying SSR (e.g. in Next.JS)

Hi @sh03 Have you found a solution to this?

5 replies

•Created by Rule on 11/27/2024 in #❓-help

tRPC 404 in Next.js API Routes

That's fine. Glad I could help!

10 replies

•Created by Rule on 11/27/2024 in #❓-help

tRPC 404 in Next.js API Routes

and remove the createContext from mine. i think that's optional

10 replies

•Created by Rule on 11/27/2024 in #❓-help

tRPC 404 in Next.js API Routes

import { fetchRequestHandler } from '@trpc/server/adapters/fetch';

import { createContext } from '../server/context';
import { appRouter } from '../server/router';

export const maxDuration = 60; // seconds
export const dynamic = 'force-dynamic';

const handler = (req: Request) =>
  fetchRequestHandler({
    endpoint: '/api/trpc',
    req,
    router: appRouter,
    createContext,
  });

export { handler as GET, handler as POST };

import { fetchRequestHandler } from '@trpc/server/adapters/fetch';

import { createContext } from '../server/context';
import { appRouter } from '../server/router';

export const maxDuration = 60; // seconds
export const dynamic = 'force-dynamic';

const handler = (req: Request) =>
  fetchRequestHandler({
    endpoint: '/api/trpc',
    req,
    router: appRouter,
    createContext,
  });

export { handler as GET, handler as POST };

that's my working file. Could you try to alter it to use your imports/naming but keep the exports and other function definitions? Maybe something strange regarding the handler refs, etc. is happening? I feel like I'm missing something obvious... 😅

10 replies

•Created by Rule on 11/27/2024 in #❓-help

tRPC 404 in Next.js API Routes

If you console.log at the line above awaiting the fetchRequestHandler, does it log anything? Also, I have a createContext for the fetchRequestHandler - maybe that's needed?

10 replies

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

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

Okay, this is not true. It only works if there's a prefetch going on. Probably related to https://github.com/vercel/next.js/discussions/60640

24 replies

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

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

Note: This has fixed itself after upgrading to a new @tanstack/react-query version. Only updating the rc version of tRPC was somehow insufficient 🤷‍♂️

    "@tanstack/react-query": "^5.60.6",
    "@tanstack/react-query-devtools": "^5.60.6",
    "@trpc/client": "11.0.0-rc.638",
    "@trpc/react-query": "11.0.0-rc.638",
    "@trpc/server": "11.0.0-rc.638",

    "@tanstack/react-query": "^5.60.6",
    "@tanstack/react-query-devtools": "^5.60.6",
    "@trpc/client": "11.0.0-rc.638",
    "@trpc/react-query": "11.0.0-rc.638",
    "@trpc/server": "11.0.0-rc.638",

24 replies

•Created by kinsyu on 6/22/2024 in #❓-help

createTRPCReact cannot be named without a reference to x

What's your tsconfig? Do you have something regarding declaration enabled? I think I had similar issues with declaration or declarationMap enabled...

9 replies

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

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

i'll try upgrading soon to the newest rc anyways. because of #Can I use the "Streaming with Server Components" strategy with tRPC? seems to be working.

24 replies

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

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

Thank you! This helps a lot. Now I know that this is the issue 🙏

24 replies

•Created by Michael Schaufelberger on 6/12/2024 in #❓-help

Can I use the "Streaming with Server Components" strategy with tRPC?

This is sooo awesome!

68 replies

•Created by Michael Schaufelberger on 6/12/2024 in #❓-help

Can I use the "Streaming with Server Components" strategy with tRPC?

Yep, looks good. It's working now 🎉 😀

68 replies

•Created by Michael Schaufelberger on 6/12/2024 in #❓-help

Can I use the "Streaming with Server Components" strategy with tRPC?

Ah, ok, yeah, this was breaking before with iirc _def errors. I'll try

68 replies

•Created by Michael Schaufelberger on 6/12/2024 in #❓-help

Can I use the "Streaming with Server Components" strategy with tRPC?

something maybe offtopic: the trpc example now produces a hydration error because of toLocaleString on my machine. which makes sense, since the browser has a different locale configured. not sure if that's intended for such an example

68 replies

•Created by Michael Schaufelberger on 6/12/2024 in #❓-help

Can I use the "Streaming with Server Components" strategy with tRPC?

I mean that there's an additional fetch request in the network tab.

68 replies

•Created by Michael Schaufelberger on 6/12/2024 in #❓-help

Can I use the "Streaming with Server Components" strategy with tRPC?

Huh, interestingly, it still doesn't work with rc.441 (same code as before) However, as soon as the page is exported as an async function (export default function Home vs export default async function Home) it works. This happens in dev and prod mode.

68 replies

•Created by Michael Schaufelberger on 6/12/2024 in #❓-help

Can I use the "Streaming with Server Components" strategy with tRPC?

This sounds great, thank you! I'll gladly test it.

68 replies

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

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

What version of tanstack react-query do you use? Maybe that's the issue and not trpc itself... Since, I don't think trpc is deciding if it should run during SSR or not... If you do something like this

headers: {
    'x-trpc-source':
       typeof window !== 'undefined' ? 'react-query' : 'react-query-ssr',
    },

headers: {
    'x-trpc-source':
       typeof window !== 'undefined' ? 'react-query' : 'react-query-ssr',
    },

in the httpBatchStream, and also log the headers in the protected procedure middleware - does it get logged? Because I think my setup is wrongfully calling the useSuspense query on the server during SSR and, since the server during rendering is somehow not authed, it fails...

24 replies