How to use react toastify to show a promise toast when using a mutation in trpc?

I'm trying to show a promise toast but cant figure out how to do it. Can someone please help. Thanks

16 Replies

Neto•2y ago

Use the onSuccess to trigger the toast

@Neto there is no onSuccess, but there is isSuccess. But if I have understood it correctly, I need a Promise to be returned to trigger a promise toast. but isSuccess is boolean

Neto•2y ago

https://tanstack.com/query/v4/docs/react/reference/useQuery

useQuery | TanStack Query Docs

const { data,

Neto•2y ago

onSuccess: (data: TData) => void
Optional
This function will fire any time the query successfully fetches new data.

useMutation(params, {
  onSuccess: (data) => {
    // data is the value returned from the mutation
}})

useMutation(params, {
  onSuccess: (data) => {
    // data is the value returned from the mutation
}})

Neto•2y ago

https://trpc.io/docs/useContext#example-code

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...

Neto•2y ago

like this

jeromemarshall•2y ago

thanks man

Neto•2y ago

just that you wont use the context part, only using it to trigger the toast

jeromemarshall•2y ago

but im still confused how you do this inside that function.

const resolveAfter3Sec = new Promise(resolve => setTimeout(resolve, 3000));
toast.promise(
    resolveAfter3Sec,
    {
      pending: 'Promise is pending',
      success: 'Promise resolved 👌',
      error: 'Promise rejected 🤯'
    }
)

const resolveAfter3Sec = new Promise(resolve => setTimeout(resolve, 3000));
toast.promise(
    resolveAfter3Sec,
    {
      pending: 'Promise is pending',
      success: 'Promise resolved 👌',
      error: 'Promise rejected 🤯'
    }
)

Neto•2y ago

what toast lib are you using?

jeromemarshall•2y ago

react-toastify

jeromemarshall•2y ago

https://fkhadra.github.io/react-toastify/introduction

React-toastify | React-Toastify

!Financial Contributors on Open Collective !Travis (.org)

Neto•2y ago

you can ignore the promise part

const mutation = trpc.post.edit.useMutation({
    onSuccess(_input) {
      toast("My message from a success mutation!");
    },
  });

const mutation = trpc.post.edit.useMutation({
    onSuccess(_input) {
      toast("My message from a success mutation!");
    },
  });

if you really want to add a delay on the toast you can just paste the code inside the onSuccess same effect

jeromemarshall•2y ago

to be more elaborate, I'm fetching data from another API using this mutation. So I would need the loading toast till the data is sent to the client. i guess I can do this like this,

toast.loading
If you want to take care of each step yourself you can use toast.loading and update the notification yourself.

const id = toast.loading("Please wait...")
//do something else
toast.update(id, { render: "All is good", type: "success", isLoading: false });

toast.loading
If you want to take care of each step yourself you can use toast.loading and update the notification yourself.

const id = toast.loading("Please wait...")
//do something else
toast.update(id, { render: "All is good", type: "success", isLoading: false });

Neto•2y ago

you have another callback on the mutation

onMutate: (variables: TVariables) => Promise<TContext | void> | TContext | void
  Optional
  This function will fire before the mutation function is fired and is passed the    same variables the mutation function would receive
Useful to perform optimistic updates to a resource in hopes that the mutation succeeds
  The value returned from this function will be passed to both the onError and onSettled functions in the event of a mutation failure and can be useful for rolling back optimistic updates.

onMutate: (variables: TVariables) => Promise<TContext | void> | TContext | void
  Optional
  This function will fire before the mutation function is fired and is passed the    same variables the mutation function would receive
Useful to perform optimistic updates to a resource in hopes that the mutation succeeds
  The value returned from this function will be passed to both the onError and onSettled functions in the event of a mutation failure and can be useful for rolling back optimistic updates.

jeromemarshall•2y ago

woah cool man... lemme check it out

Gaming

Programming

How to use react toastify to show a promise toast when using a mutation in trpc?