Function Example

examples/react/optimistic-updates-cache/src/pages/index.tsx:33–129

()

})

function Example() {
  const queryClient = useQueryClient()
  const [text, setText] = React.useState('')
  const { isFetching, ...queryInfo } = useQuery(todoListOptions)

  const addTodoMutation = useMutation({
    mutationFn: async (newTodo: string) => {
      const response = await fetch('/api/data', {
        method: 'POST',
        body: JSON.stringify({ text: newTodo }),
        headers: { 'Content-Type': 'application/json' },
      })
      return await response.json()
    },
    // When mutate is called:
    onMutate: async (newTodo, context) => {
      setText('')
      // Cancel any outgoing refetch
      // (so they don't overwrite our optimistic update)
      await context.client.cancelQueries(todoListOptions)

      // Snapshot the previous value
      const previousTodos = context.client.getQueryData(
        todoListOptions.queryKey,
      )

      // Optimistically update to the new value
      if (previousTodos) {
        context.client.setQueryData(todoListOptions.queryKey, {
          ...previousTodos,
          items: [
            ...previousTodos.items,
            { id: Math.random().toString(), text: newTodo },
          ],
        })
      }

      return { previousTodos }
    },
    // If the mutation fails,
    // use the result returned from onMutate to roll back
    onError: (err, variables, onMutateResult, context) => {
      if (onMutateResult?.previousTodos) {
        context.client.setQueryData<Todos>(
          ['todos'],
          onMutateResult.previousTodos,
        )
      }
    },
    // Always refetch after error or success:
    onSettled: (data, error, variables, onMutateResult, context) =>
      context.client.invalidateQueries({ queryKey: ['todos'] }),
  })

  return (
    <div>
      <p>
        In this example, new items can be created using a mutation. The new item