Кеш обновления React-Query после выполнения мутации

Я немного заблудился с react-query. По сути, у меня есть useQuery для извлечения пользователя из моей базы данных. Их данные добавляются в форму, и они могут обновляться и отправлять.

У меня проблема в том, что обновление выполняется в другой базе данных. Основная база данных будет обновлена ​​партиями позже. Таким образом, вместо повторной выборки исходных данных мне нужно использовать setQueryData для обновления версии кеша.

queryClient = useQueryClient()

const { mutate } = useMutation(postUser, {
    onSuccess: async (response) => {
        console.log(response)

        queryClient.cancelQueries('user');
        const previousUser = queryClient.getQueryData('user');
        console.log(previousUser)
        queryClient.setQueryData('user', {
            ...previousUser,
            data: [
              previousUser.data,
              { '@status': 'true' },
            ],
          })
        return () => queryClient.setQueryData('user', previousUser)
    }
})

На данный момент у меня есть что-то подобное вышеупомянутому. Поэтому он вызывает postUser и получает ответ. Ответ выглядит примерно так

data:
    data:
        user_uid: "12345"
        status: "true"
        message: "User added."
        status: 1

Затем я getQueryData, чтобы получить кеш-версию данных, которая в настоящее время выглядит так

data:
    @userUuid: "12345"
    @status: ""
message: "User found."
status: 1

Поэтому мне нужно обновить кешированную версию @status, чтобы она стала правдой. С тем, что у меня есть выше, кажется, что в кеш добавляется новая строка

data: Array(2)
    0: {@userUuid: "12345", @status: ""}
    1: {@status: "true"}
message: "User found."
status: 1

Итак, как мне перезаписать существующую, не добавляя новую строку?

Спасибо


reactjs react-query
person katie hudson    schedule 26.05.2021    source источник

Ответы (1)


arrow_upward
1
arrow_downward

На самом деле это не зависит от запроса-реакции. В вашем setQueryData коде вы устанавливаете data в массив с двумя записями:

data: [
  previousUser.data,
  { '@status': 'true' },
],

первая запись = previousUser.data вторая запись = { '@status': 'true' }

переопределение будет примерно таким:

queryClient.setQueryData('user', {
  ...previousUser,
  data: {
    ...previousUser.data,
    '@status': 'true',
  },
})

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

  • отменить исходящие запросы
  • установить данные
  • вернуть функцию отката, которую можно вызвать onError

Это в основном рабочий процесс, который можно найти здесь, в документации.

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

person TkDodo    schedule 26.05.2021