T
TanStack•2y ago
variable-lime

Track upload progress for optimistic updates

The docs show how to use variables for optimistic updates https://tanstack.com/query/latest/docs/framework/react/guides/optimistic-updates#if-the-mutation-and-the-query-dont-live-in-the-same-component 
// somewhere in your app
const { mutate } = useMutation({
  mutationFn: (newTodo: string) => axios.post('/api/data', { text: newTodo }),
  onSettled: () => queryClient.invalidateQueries({ queryKey: ['todos'] }),
  mutationKey: ['addTodo'],
})

// access variables somewhere else
const variables = useMutationState<string>({
  filters: { mutationKey: ['addTodo'], status: 'pending' },
  select: (mutation) => mutation.state.variables,
})
// somewhere in your app
const { mutate } = useMutation({
  mutationFn: (newTodo: string) => axios.post('/api/data', { text: newTodo }),
  onSettled: () => queryClient.invalidateQueries({ queryKey: ['todos'] }),
  mutationKey: ['addTodo'],
})

// access variables somewhere else
const variables = useMutationState<string>({
  filters: { mutationKey: ['addTodo'], status: 'pending' },
  select: (mutation) => mutation.state.variables,
})
If my upload function has a callback to track progress like this 
const myUploadFunction = (data, onProgress) => {}
const myUploadFunction = (data, onProgress) => {}
How can I use the callback to track the upload progress for my variables so I can show the UI with the progress?
2 Replies
wise-white
wise-white•2y ago
you'd need to set it in state manually
variable-lime
variable-limeOP•2y ago
dang okey

Did you find this page helpful?