Я просто играю с реактивным запросом с машинописным текстом. Я имею в виду, что делаю первые попытки. Это правильный путь? const useCreateTodo = () => {const queryClient = useQueryClient (); возвращаться ...

1
user3887366 17 Янв 2021 в 14:43

1 ответ

Лучший ответ

Оптимистичные обновления немного сложны для вывода типов. Теперь в документации есть пример для этого случая .

Из этого примера:

const addTodoMutation = useMutation(
    newTodo => axios.post('/api/data', { text: newTodo }),
    {
      // When mutate is called:
      onMutate: async (newTodo: string) => {
        setText('')
        // Cancel any outgoing refetches (so they don't overwrite our optimistic update)
        await queryClient.cancelQueries('todos')

        // Snapshot the previous value
        const previousTodos = queryClient.getQueryData<Todos>('todos')

        // Optimistically update to the new value
        if (previousTodos) {
          queryClient.setQueryData<Todos>('todos', {
            ...previousTodos,
            items: [
              ...previousTodos.items,
              { id: Math.random().toString(), text: newTodo },
            ],
          })
        }

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

Пара объяснений:

  • По сути, вы хотите установить определение типа только для onMutate, чтобы вывод типа работал для mutateFn (выводится newTodo), а также для контекста в {{X3} }.
  • добавьте универсальные шаблоны для getQueryData, чтобы набрать previousTodos. Однако вам не нужно объединяться с undefined - response-query сделает это за вас.
  • функциональное средство обновления для setQueryData сложно, потому что оно требует от вас возврата массива, но old может быть неопределенным. Я предпочитаю использовать previousTodos, возвращенный getQueryData
0
TkDodo 17 Янв 2021 в 12:03