Michael Schaufelberger
Michael Schaufelberger
PostsComments
TtRPC
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
TtRPC
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
TtRPC
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
TtRPC
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
TtRPC
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
TtRPC
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
TtRPC
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
TtRPC
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
TtRPC
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
TtRPC
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
TtRPC
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
TtRPC
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
TtRPC
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
TtRPC
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
TtRPC
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
TtRPC
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
TtRPC
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
TtRPC
Created by Michael Schaufelberger on 6/21/2024 in #❓-help
How do I use the rsc-rq-prefetch example with a protected procedure?
Yes, I have 
"@tanstack/react-query": "^5.49.2",
"@tanstack/react-query-devtools": "^5.49.2",

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

"@trpc/client": "11.0.0-rc.403",
"@trpc/react-query": "11.0.0-rc.403",
"@trpc/server": "11.0.0-rc.403",
24 replies
TtRPC
Created by Michael Schaufelberger on 6/12/2024 in #❓-help
Can I use the "Streaming with Server Components" strategy with tRPC?
Hi Julius I've tried this and updated the TanStack query library. However, I'm still experiencing the same behaviour. The repro based on today's state of the trpc app dir example is here: https://github.com/michaelschufi/trpc-next-app-dir-2 The significant changes I made: https://github.com/michaelschufi/trpc-next-app-dir-2/commit/f7de44043d686b7fffad68ae23011edcc4fb1205
68 replies
TtRPC
Created by Michael Schaufelberger on 6/21/2024 in #❓-help
How do I use the rsc-rq-prefetch example with a protected procedure?
So what I would expect is: The trpc handler should be hit 1-2 times instead of 3 times. - Once for the void trpc.foo.prefetch(); in page.tsx ('x-trpc-source': 'rsc') - Maybe once for the trpc.foo.useSuspenseQuery(); in foo.tsx ('x-trpc-source': 'react-query') in case the server prefetch failed. But it should never be called during SSR with the trpc client component in rcc.tsx ('x-trpc-source': 'react-query-ssr'). Are those assumptions correct?
24 replies