TanStackT
TanStack2y ago
2 replies
awake-maroon

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,
})


If my upload function has a callback to track progress like this
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?
Was this page helpful?