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
plygltOP2y 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
cje2y 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
ejoo2y 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..
});
}
})
Want results from more Discord servers?
Add your server