Theo's Typesafe Cult•2y ago

Optimistic Updates with TRPC (react-query)?

I am not sure how I would do optimistic updates with trpc? Is this "built-in" or do I have to use react-query's useQuery hook? So far, I am trying it like so, but it's not working:

 const queryClient = useQueryClient();

    const updateWord = trpc.word.update.useMutation({
        onMutate: async newTodo => {
            // Cancel any outgoing refetches (so they don't overwrite our optimistic update)
            await queryClient.cancelQueries({ queryKey: ['text', 'getOne'] })

            // Snapshot the previous value
            const previousText = queryClient.getQueryData(['text', 'getOne'])

            // Optimistically update to the new value
            queryClient.setQueryData(['text', 'getOne'], old => old ? {...old, { title: "Hello" }} : undefined)

            // Return a context object with the snapshotted value
            return { previousText }
        },
//...

 const queryClient = useQueryClient();

    const updateWord = trpc.word.update.useMutation({
        onMutate: async newTodo => {
            // Cancel any outgoing refetches (so they don't overwrite our optimistic update)
            await queryClient.cancelQueries({ queryKey: ['text', 'getOne'] })

            // Snapshot the previous value
            const previousText = queryClient.getQueryData(['text', 'getOne'])

            // Optimistically update to the new value
            queryClient.setQueryData(['text', 'getOne'], old => old ? {...old, { title: "Hello" }} : undefined)

            // Return a context object with the snapshotted value
            return { previousText }
        },
//...

Does this look like it should make sense? It's updating the value, but not optimistically.

3 Replies

plyglt•2y ago

I'm not sure what i'm doing wrong here, could somebody have a quick look? I feel maybe I need to wire up the useQueryClient in t3 stack first?

cje•2y ago

you should use trpc's useContext instead https://trpc.io/docs/useContext

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

ejoo•17mo ago

import api from t3 utils

const ctx = api.useContext();

ctx.word.update.useMutation({
  onMutate: () => {
    const params = ['text', 'getOne']
    await ctx.user.getByIDorWhateverYouCallItInYourProject.cancel();
    const previousText = ctx.user.getByIDorWhateverYouCallItInYourProject.getData(params);
    if (!previousText) return;
    ctx.user.getByIDorWhateverYouCallItInYourProject.setData(params, old => {
      //...
      // return..
    });
  }
})

const ctx = api.useContext();

ctx.word.update.useMutation({
  onMutate: () => {
    const params = ['text', 'getOne']
    await ctx.user.getByIDorWhateverYouCallItInYourProject.cancel();
    const previousText = ctx.user.getByIDorWhateverYouCallItInYourProject.getData(params);
    if (!previousText) return;
    ctx.user.getByIDorWhateverYouCallItInYourProject.setData(params, old => {
      //...
      // return..
    });
  }
})

Gaming

Programming

Optimistic Updates with TRPC (react-query)?