UseMutation не запускает повторный рендеринг React

Анализ проблемы:

1. Обновление кэша:

React-query — это то, что вы используете для кэширования и выборки данных. Вы используете queryClient.setQueryData для обновления кэшированных данных для этого конкретного анекдота после его изменения с помощью updateAnecdoteMutation. Возможно, ваш список не будет перерисовываться повторно, поскольку вы обновляете кеш только для конкретного анекдота, а не для всей коллекции анекдотов.

2. Отсутствие автоматического обновления:

Вы сообщили, что на вкладке сети отображается запрос «PUT», но после него не отображается запрос «GET». Это говорит о том, что после мутации не происходит автоматического обновления, скорее всего, потому, что queryClient.setQueryData не инициирует повторную выборку; вместо этого он просто обновляет кэш локально.

Резолюции:

Первое решение: обновите запрос и сделайте его недействительным.

Чтобы повторно получить весь список анекдотов, используйте queryClient.invalidateQueries. Это гарантирует, что после обновления компонент повторно отрисовывается с обновленными данными и что с сервера будут получены самые последние данные.

Чтобы обновить анекдот, обновите метод onSuccess в хуке useMutation:

const updateAnecdoteMutation = useMutation({
  mutationFn: updateAnecdote,
  onSuccess: () => {
    queryClient.invalidateQueries(['anecdotes'])
  }
})

Сделав это, вы можете убедиться, что данные актуальны, сделав запрос анекдотов недействительным и заставив его перезагрузить.

Второе решение: обновить кэш списка вручную.

Убедитесь, что вы обновляете весь список в кеше, а не только конкретный анекдот, если вы хотите вручную обновить кеш списка, а не выполнять повторную выборку. Хотя этот метод предотвращает дальнейшие сетевые запросы, он требует обновления кэша вручную.

Чтобы изменить полный список анекдотов, обновите метод onSuccess:

const updateAnecdoteMutation = useMutation({
  mutationFn: updateAnecdote,
  onSuccess: (updatedAnecdote) => {
    queryClient.setQueryData(['anecdotes'], (oldData) => {
      return oldData.map(anecdote =>
        anecdote.id === updatedAnecdote.id ? updatedAnecdote : anecdote
      )
    })
  }
})

Интерпретация:

queryClient.invalidateQueries: эта функция делает запросы, использующие указанный ключ запроса, недействительными. После этого всякий раз, когда используется ключ запроса или компонент снова монтируется, ответный запрос снова автоматически извлекает данные. Это полезно, если вы хотите быть уверенным, что ваши данные постоянно актуальны, без необходимости вручную управлять изменениями кэша.

queryClient.setQueryData: этот метод используется для немедленного обновления кеша. Вы можете убедиться, что кеш обновлен с вашими данными, включив функцию обновления полного списка. Это может привести к перезагрузке вашего компонента.

Дополнительные советы:

Используйте оптимистические обновления. Если вы хотите обеспечить более плавное взаимодействие с пользователем, немедленно обновляя пользовательский интерфейс до того, как сервер ответит, вы можете использовать оптимистические обновления. Это включает в себя оптимистическое обновление локального состояния или кэша при условии, что запрос сервера будет успешным. Вот пример:

const updateAnecdoteMutation = useMutation({
  mutationFn: updateAnecdote,
  onMutate: async (updatedAnecdote) => {
    await queryClient.cancelQueries(['anecdotes'])
    const previousAnecdotes = queryClient.getQueryData(['anecdotes'])
    
    queryClient.setQueryData(['anecdotes'], (oldData) =>
      oldData.map(anecdote =>
        anecdote.id === updatedAnecdote.id ? updatedAnecdote : anecdote
      )
    )
    return { previousAnecdotes }
  },
  onError: (err, updatedAnecdote, context) => {
    queryClient.setQueryData(['anecdotes'], context.previousAnecdotes)
  },
  onSettled: () => {
    queryClient.invalidateQueries(['anecdotes'])
  }
})

В этой конфигурации:

• Оптимистичные обновления можно выполнить, вызвав onMutate, который предшествует функции мутации.
• В случае сбоя мутации onError позволяет вернуться к начальное состояние.
• Независимо от результата мутации, onSettled гарантирует, что запрос признан недействительным.

Проблема повторного рендеринга после операции обновления должна быть решена, если вы позаботитесь о логике обновления кэша в вашей функции onSuccess.

в вашем текущем коде вы получаете старый список данных и добавляете в список новый анекдот, чтобы не запускать новый вызов get для получения последнего состояния сервера.

Решение:

просто сделайте недействительным ключ anecdote следующим образом:

  const mutation = useMutation(createAnecdote, {
    onSuccess: () => {
      queryClient.invalidateQueries('anecdotes'); // invalidate and call getAnecdotes
    },
  });

вы можете применить то же самое для обновления элемента.

Вызовы API после голосования за анекдот: