Как обновить кеш после мутации в Apollo/GraphQL?
Во-первых, спасибо, что уделили время чтению этого.
Я пытался обновить кеш после мутации несколькими способами.
Сначала я думал об использовании контекста, но почитав документы, понял, что с Apollo такой подход будет излишним, так как состояние хранится в кеше.
Я изучал эти документы: Выполнение всех остальных обновлений кеша ; обновлять кеш после мутации ; автоматическое обновление кеша Аполлона после мутации ; обновление кеша клиента после мутации
Я склоняюсь к методу, упомянутому в первой ссылке, так как это официальная документация.
Некоторые вопросы у меня есть:
- Я упускаю что-то фундаментальное?
- Это простой баг? Как неправильная переменная, упомянутая где-то.
- Нужно ли где-то запрашивать GET_LINKS?
Вот блок кода для справки:
const [createLink] = useMutation(CREATE_LINK);
function handleSubmit(e) {
e.preventDefault();
createLink({
variables: {
slug: state.slug,
description: state.description,
link: state.link
},
update(cache, { data: { createLink } }) {
console.info(cache);
cache.modify({
fields: {
links(allLinks = []) {
const newLinkRef = cache.writeFragment({
data: createLink,
fragment: gql`
fragment NewLink on Link {
id
slug
description
link
shortLink
}
`
});
return [...allLinks, newLinkRef];
}
}
});
}
});
setState({
slug: "",
description: "",
link: ""
});
}
Вот полная кодовая база для справки: codeandbox.io
Привет xadm - Спасибо за ваши мысли. Мутация всегда терпела неудачу из-за ошибки в моем бэкэнде. Мутация должна работать сейчас. Но обновление не работает. Я удалил идентификатор из фрагмента. Обновление должно работать сейчас? Я читаю в readQuery в данный момент.
allLinks(prevLinks = []) { поскольку allLinks - это «поле», запись в кеше для запроса ... вставьте debugger и исследуйте кеш / данные / структуры ... реквизиты «id» необходимы для кеша
Отредактировал некоторые переменные. Добавлено id. Можно подробнее о полях? В настоящее время я получаю сообщение об ошибке gql is not defined. Похоже, что эталонная ошибка может быть синтаксической ошибкой, но я не уверен, где она возникает.
import { gql } from "@apollo/client";
Ответы 1
Спасибо xadm за ваши мысли. В итоге я использовал update. Я переместил блок кода обновления в функцию useMutation из функции handleSubmit.
Блок рабочего кода:
const [createLink] = useMutation(CREATE_LINK, {
update(cache, { data: { createLink } }) {
debugger;
cache.modify({
fields: {
allLinks(existingLinks = []) {
const newLinkRef = cache.writeFragment({
data: createLink,
fragment: gql`
fragment NewLink on Link {
id
slug
description
link
}
`
});
return [...existingLinks, newLinkRef];
}
}
});
}
});
function handleSubmit(e) {
e.preventDefault();
createLink({
variables: {
slug: state.slug,
description: state.description,
link: state.link
}
});
setState({
slug: "",
description: "",
link: ""
});
}
мутация всегда терпит неудачу («xxx уже существует»), тогда не вызывается
update... мутация не содержитid, тогда фрагмент не имеет всех необходимых данных ... используйте readQuery, это проще ... apollographql.com/docs /реакция/кэширование/кэш-взаимодействие/…