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

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.
J
julius530d ago
Seems like a use case for ssg where you can put some queries on the server and some on the client
J
julius530d ago
SSG Helpers | tRPC
createProxySSGHelpers provides you a set of helper functions that you can use to prefetch queries on the server.
N
nehalist530d ago
which means I'd have to disable ssr right?
J
julius530d ago
yes
N
nehalist530d ago
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
J
julius530d ago
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
N
nehalist530d ago
oh, that's interesting. thanks!
More 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 wouHow to execute mutation outside of react context?Hi! I'm slowly converting code over to v10 - looks great! However, I ran in to an issue when using tWhen 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 tryinIs inferRouterInputs & inferRouterOutputs exported from trpc-server?"@trpc/server": "10.0.0-proxy-beta.26",v10 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 mHow 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. BasicalMultiple React providersGood morning! Is there any workaround, how to use multiple trpc-client instances with react-query? IMutation 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 unfortunately