T
tRPC

Load data client-side via react-query while using tRPC with SSR

Load data client-side via react-query while using tRPC with SSR

Nnehalist11/1/2022
Is there any way to load data client-side when using tRPC? I want my page to be rendered and load data dynamically, since this data is not SEO-relevant. As far as I'm understanding as soon as I turn on SSR in tRPC queries must be done before the page is rendered.
Jjulius11/5/2022
Seems like a use case for ssg where you can put some queries on the server and some on the client https://trpc.io/docs/v10/ssg-helpers
Nnehalist11/5/2022
which means I'd have to disable ssr right?
Jjulius11/5/2022
yes
Nnehalist11/5/2022
I don't know why but it kinda feels weird to disable it. all examples have it on and not having getServerSideProps (or similar) really makes code a lot easier to follow
Jjulius11/5/2022
wait hold on you can disable ssr on a procedure level too if most stuff are ssr
const clientQuery = trpc.post.byId({ id: 1 }, {
trpc: { ssr: false }
});
const clientQuery = trpc.post.byId({ id: 1 }, {
trpc: { ssr: false }
});
https://trpc.io/docs/v10/react-queries
Nnehalist11/5/2022
oh, that's interesting. thanks!

Looking for more? Join the community!

T
tRPC

Load data client-side via react-query while using tRPC with SSR

Join Server
Recommended Posts
Serving clients in another repository?Would it be possible for tRPC to act as a server for clients in another repository and if so how wouWhen not to use tRPC?Is there any scenario when building a mobile and/or a web app with backend that you would not recommBi directional infinite query example with prismaI'm working on a project that is using this pattern, but my `hasPreviousPages` gets blown away when Websockets not sending dataHi, I have a websocket route that doesn't seem to be sending any data I added a setInterval to tesQuery keysHi! I'm super new to TRPC and based on my understanding, TRPC has a thin wrapper around react query.Possible to use tRPC proxy client inside Edge Runtime?Hi, im trying to fetch a route from trpc inside a Vercel Edge Runtime function. Therefore im tryinv10 migration using codemodSo I've been looking at the codemod that helps with transition towards v10 and I haven't been able tSSR and loading indicators - I don't get itGuess I'm missing something here, but unfortunately I'm having a hard time with the docs: in https:/Prefetch forEachHello, I'm trying to prefetch a list of procedures like this ```ts type QueryKeys = { // how to tNextJs middleware broken by tRPCHi, I have a NextJs middleware that is redirecting to the login page. Basically an Auth guard over mCannot read properties of undefined (reading 'query')Hey folks, Updating from v9 to v10. I thought I'm done, no type errors. Launching the app in dev modUpdating from v9 to v10 - how to access react hooks?Hey folks, I'm updating to v10. I replaced @trpc/react@9.27.4 with @trpc/react-query@10.0.0-proxy-beHow to infer the output of a mutation? The current methods appear to be depreciated.I am attempting to export the bellow utility function to use client side to infer an output type thaTrouble inferring the type of a very simple structure of nested routersA very simple router results in an inference error, causing the client to not be able to infer the rcalling trpc endpoints from vanilla nextJs api routesI'm struggling to find what's the best way to call a trpc endpoint directly from the server. BasicalMutation type issueI'm trying to mutate something like this with tRPC and Prisma ```const updateColumn = trpc.project.uCan I redirect the user from inside my router?I have a query protectedProcedure, which returns an object from my prisma planetscale db What's theInfer the type of ctx for a specific procedureLet's say I had a helper function that I wanted to pass the context to, I can't use the default ContCORS in standalone serverHi, I'm trying to get CORS working in standalone server. Attempted this solution but unfortunatelyQueries break when in production on Vercel; work on localhostThe query is called like this: ```javascript const { data } = api.useQuery(["user.!getCount"], {