query and mutate promise on next

I've followed the guide "Usage with Next.js" and now I only have the useQuery and use useMutation hooks exposed when I want to call a route. How do I also expose the regular query and mutate promises on these routes? Edit: Solution:
const utils = trpc.useContext();

// use it (for example in an event handler)
const someResult = await utils.client.someRouter.someProcedure.query(/* args maybe */);
const utils = trpc.useContext();

// use it (for example in an event handler)
const someResult = await utils.client.someRouter.someProcedure.query(/* args maybe */);
UU
Unknown User513d ago
T
Tuxer512d ago
First instantiating mutate from useMutation every time seems to be quite inconvenient. I'm refering to this part of the docs https://trpc.io/docs/quickstart#querying--mutating. I'd like to call query and mutate like described:
const user = await trpc.userById.query('1');
const createdUser = await trpc.userCreate.mutate({ name: 'sachinraja' });
const user = await trpc.userById.query('1');
const createdUser = await trpc.userCreate.mutate({ name: 'sachinraja' });
J
julius512d ago
The context has the proxy client if that’s what you’re looking for, not sure if that’s better than using the hook though
J
julius512d ago
Below the table is an example https://trpc.io/docs/useContext#helpers
useContext | tRPC
useContext is a hook that gives you access to helpers that let you manage the cached data of the queries you execute via @trpc/react-query. These helpers are actually thin wrappers around @tanstack/react-query's queryClient methods. If you want more in-depth information about options and usage patterns for useContext helpers than what we provide...
J
julius512d ago
This is the vanilla client, react uses hooks
T
Tuxer512d ago
This looks very promising and exactly what I need. I'll try that. In some cases I think it's more convenient to use the vanilla client instead of hooks, because hooks can not be used everywhere. Okay, it worked as I needed it to. useContext must still be instantiated, direct access via the vanilla client would be even better, but it works via useContext(). Here is how to use it according to the docs:
const utils = trpc.useContext();

// use it (for example in an event handler)
const someResult = await utils.client.someRouter.someProcedure.query(/* args maybe */);
const utils = trpc.useContext();

// use it (for example in an event handler)
const someResult = await utils.client.someRouter.someProcedure.query(/* args maybe */);
Thanks @julius and @cje
More Posts
testing a trpc hooki'm brand new to testing and need some help with writing a test for a hook that is returning an objeCAS AuthenticationSo long story short. My University is using CAS as authentication provider. I was thinking that I coDifference in type inference for vanilla client?Hello, querying an endpoint with the vanilla tRPC client but at runtime the actual result isn't the Zod Error MiddlewareHey lovely people. At Cal.com we make heavy use of `zod` for data validation. I was wondering if theclear cookie onErrorI'd like to clear a cookie (in nextjs) when a 403 error happens. I've been looking at the global errRequest context from getServerSidePropsThe docs of tRPC context https://trpc.io/docs/v10/context ``` export async function createContext(oAuth with passport.jsEvening all, Has anyone successfully setup trpc with passport.js for auth?Object keeps getting overwrittenI feel like i'm missing something fundamental here. when I add a new entry into object ``b`` it resAccessToken for API callsWhat would be the best approach to pass the AccessToken from NextAuth Session to the Http Client whiRequest or Response Specification Definition DocumentI am developing a backend service using trpc, but I need to dispatch trpc in another programming lanabortOnUnmount config errorI'm encountering an error when passing abortOnUnmount saying that it does not exist as a possible pazustand + trpc (basic data fetching)im trying to use zustand with trpc, but having trouble setting some data to global state. What am i TypeError Cannot destructure property 'abortOnUnmount' of 'useContext(...)' as it is null.Zero Clue what is error mean exactly....First time learning trpc really good tool. help with setting cookies on front end.Hello how do you use tRPC to make a cookie and send it to the front end. or is there any other methoHow do we add settings in each query like before?Since the new update, bee super confused. I used to do this, and can't recreate it now. ``` const Handling error globallyAccording to the docs on errors https://trpc.io/docs/v10/error-handling I should get such error objecant access trpc endpoints via the browseri'm converting some express endpoints to trpc, and I cant figure out how to access my endpoints via tRPC without SSRWhen using tRPC with ssr it uses `getInitialProps`, which has kinda of a cool effect in terms how a trpc + expo react native issueDoes anyone know how to solve this? Im not familiar with webpack at all. I’m a junior frontend.Can you chain middlewares in v10?Would I be able to make a rate limit and isAuthed middleware, then put queries behind both middlewar