Theo's Typesafe Cult•3y ago

How do I access onSuccess with TRPC client side?

We can do it with react query quite simply, but i don't see a documentation on it with trpc. if the request is succesful i want to save the data to global state via zustand. I need the onSuccess to do it i believe.

  const tickets = trpc.ticketService.getByTenantId.useQuery()

  const tickets = trpc.ticketService.getByTenantId.useQuery()

this does not work

  React.useEffect(() => {
   if (tickets.data) {
    setTickets(tickets.data);
   }
     console.log('all tickets', allTickets);
   }, [tickets.data]);

  React.useEffect(() => {
   if (tickets.data) {
    setTickets(tickets.data);
   }
     console.log('all tickets', allTickets);
   }, [tickets.data]);

13 Replies

Neto•3y ago

  const { data } = trpc.company.userCompany.useQuery(undefined, {
    onSuccess: (data) => {

  const { data } = trpc.company.userCompany.useQuery(undefined, {
    onSuccess: (data) => {

you can switch the undefined by the query props

SonOP•3y ago

thank you so much!!! ive been stuck on this for hours. where is information like this in the docs?

Neto•3y ago

trpc client works on top of react query

SonOP•3y ago

i'm not that familiar with react query, thats my problem. thank you again, i got work to do. 🙏🏾 🙏🏾 🙏🏾

Neto•3y ago

SonOP•3y ago

one more question. why do we have the undefined as a first param

Neto•3y ago

the first param is the query input and you if use null it warns you Argument of type 'null' is not assignable to parameter of type 'void | undefined'.ts(2345)

SonOP•3y ago

since we cant use devtools, thats why we pass undefined?

Neto•3y ago

you pass undefined because the query doesnt need any input specifically why its undefined idk and you can use devtools

Neto•3y ago

https://tanstack.com/query/v4/docs/devtools

Devtools | TanStack Query Docs

Wave your hands in the air and shout hooray because React Query comes with dedicated devtools! ðŸ¥³ When you begin your React Query journey, you'll want these devtools by your side. They help visualize all of the inner workings of React Query and will likely save you hours of debugging if you find yourself in a pinch!

Neto•3y ago

https://github.com/STNeto1/jobs/blob/main/src/pages/_app.tsx#L18

GitHub

jobs/_app.tsx at main · STNeto1/jobs

Contribute to STNeto1/jobs development by creating an account on GitHub.

SonOP•3y ago

okay i got read up on react query, thanks for the resources.

Neto•3y ago

Gaming

Programming

How do I access onSuccess with TRPC client side?