T
tRPC

Has anyone ever used tRPC (with SSR) and i18n?

Has anyone ever used tRPC (with SSR) and i18n?

Nnehalist4/14/2023
No matter the lib (next-intl, next-i18n, next-translate), I simply stumble from one problem to another - most of them simply solved by disabling SSR. Unfortunately, I need SSR and i18n. I know the GitHub issue that the problem here is on next.js, but anyone ever solved this? Hard to believe no one has ever used tRPC with i18n
Nnlucas4/14/2023
I doubt tRPC has anything to do with this honestly Best to ask in the packages you’re trying to use
Nnlucas4/14/2023
Ah I see Probably a good idea to open a bug report with us then. I’m not experienced with SSR but having a GitHub issue will get the right people to see it
Nnehalist4/14/2023
I often see SSR simply being turned off - but what's the point of using next.js then? It's just an spa then, or do I miss something? Additionally, there's already an issue at your side - seems like you guys can't fix that: https://github.com/trpc/trpc/issues/596
Ttrash_dev4/14/2023
cc @Tom - QuiiBz i know you have a next i18n lib so maybe you have some pointers
UUUnknown User4/14/2023
2 Messages Not Public
Sign In & Join Server To View
Nnehalist4/15/2023
Will try asap, thanks while it seems to work, there's this weird behavior of as soon as I wrap my app in the I18nProvider my dom (ctrl+u) is suddenly empty and it seems SSR becomes completely broken. without the wrapping container all my data is inside the dom
UUUnknown User4/15/2023
Message Not Public
Sign In & Join Server To View
Nnehalist4/15/2023
Unfortunately no, but I'll setup a minimal reproduction repo well, I don't understand anything at all anymore: as soon as I wrap my app in an I18nProvider the dom becomes "Loading..." which comes from tRPC
const hello = trpc.hello.useQuery({text: 'client'});
const t = useI18n();
if (!hello.data) {
return <div>Loading...</div>;
}
return (
<div>
<p>inside i18n provider</p>
<p>trpc: {hello.data.greeting}</p>
<p>i18n: {t('hello')}</p>
</div>
);
const hello = trpc.hello.useQuery({text: 'client'});
const t = useI18n();
if (!hello.data) {
return <div>Loading...</div>;
}
return (
<div>
<p>inside i18n provider</p>
<p>trpc: {hello.data.greeting}</p>
<p>i18n: {t('hello')}</p>
</div>
);
but without the i18n provider everything is fine. hopefully this repo can help: https://github.com/nehalist/trpc-i18n
UUUnknown User4/15/2023
Message Not Public
Sign In & Join Server To View
Nnehalist4/15/2023
if you inspect the source code of this page it only shows the "loading..." dev. if you remove the i18n provider it shows the actual content btw thanks for your time helping me
UUUnknown User4/15/2023
2 Messages Not Public
Sign In & Join Server To View
Nnehalist4/15/2023
but this would hurt seo, or do I miss something? I'm seriously considering switching to using tRPC only within getServerSideProps so that I can disable SSR, but dx suffers a lot imo with this approach
UUUnknown User4/15/2023
Message Not Public
Sign In & Join Server To View
Nnehalist4/15/2023
it's kinda weird that having i18n with tRPC causes such a chain of problems. feels like I'm the only one that wants a multi-language tRPC app? πŸ˜„
UUUnknown User4/15/2023
2 Messages Not Public
Sign In & Join Server To View
Nnehalist4/15/2023
as far as I understand that should certainly fix this, ya, but also means that I cannot use tRPC queries directly within my components anymore and requires some major refactoring on my existing app
UUUnknown User4/15/2023
3 Messages Not Public
Sign In & Join Server To View
Nnehalist4/15/2023
that's the big disadvantage of doing it this way, but it seems like it's the only thing that works all of this feels like a "choose 2: i18n, trpc, seo" situation πŸ˜„
KKulimantang5/10/2023
Hey guys, I just ran into the ssr problem yesterday myself and I'm also looking into using i18n πŸ™ˆ. Did you have success in using ServerSideHelpers and have i18n, trpc and seo and the only drawback is bad dx? Would appreciate to know how it turned out for you

Looking for more? Join the community!

T
tRPC

Has anyone ever used tRPC (with SSR) and i18n?

Join Server
Recommended Posts
New to tRPC and Need Help with BasicsI made a new T3 app, but I don't quite understand how tRPC works, and I would love to get some help web socket keeps on disconnecting and connectingHi! Its my first time using web sockets. The first code snippet is my socket code. The second code sPagination QueryHi, I'm new for web dev and I'm moved to tRPC not so long I'm looking for example of pagination quEnrich the response object for TRPC endpointCurrently when I hit a trpc endpoint I get something like: ```typescript { result: { data:Can i fetch tRPC in different project@coco- : I Make a tRPC in my project. Can I use the enpoint api in different project ?Importing AppRouter types from an external repoI've got a production T3 app already in production. I've created a fresh expo app to start building TypeScript type for request object for route handlersSo far I've been writing my routes like: ```typescript export const router = t.router({ helloWorlTyped wrappers for proceduresI have a TRPC client with working queries and mutations. I wanted to create wrapper functions for alAre TRPC server procedures actual endpoints? Meaning can you directly do a `post` request to them?Lets say you have a public procedure called `getHelloWorld`, can you hit it by doing `localhost:3000TRPCClientError - No "query"-procedure on path "user.all"Im using react native expo, prisma, trpc and the postgres database is on railway I have run the follAm I the only one struggling with pnpm + TypeScript monorepo + trpc?Hello all, When using pnpm in a TypeScript monorepo without `node-linker`, I hit those errors: ```tRPC standalone server in monorepoHi, I'm using t3-stack monorepo as my base and I've swapped out NextJS backend for standalone HTTP Codemod to v10 is not modifying any fileHello πŸ‘‹, I must be super dumb but running `pnpm dlx trpc-v10-migrate-codemod ` in my project isn't No overload matches this call when outputting unionsHello there πŸ‘‹, I have this simple procedure (we're not fully migrated on v10 yet, using interop): [help] Uncaught (in promise) TRPCClientError: Property description must be an object: uAfter building on linux, I visit the site. And Chrome console shows this error. But if I build on myHow can I make tRPC+NextJs APIs faster? (db and functions region is already same)Hi, I have migrated my website backend (https://clubofcoders.com) from NestJs + Prisma + Cloud Run tThrowing fastify errors when using fastify adapterHello, I'm using `fastifyTRPCPlugin` from `@trpc/server/adapters/fastify` and trying to throw errorsConfused about createProxySSGHelpersIf you can use this helper inside of `getServerSideProps` without having `ssr: true` what is the difHow to check if data is being prefetched?What is a method to check if ssg prefetching actually occurs? Through the network tab?How can I access ctx from inside of a procedure?``` const appRouter = t.router({ helloTab: t.procedure.input(z.object({ url: z.string().url() })).