在 Apollo Client 中,当进行分页操作时,经常会使用到 refetch 方法来重新拉取数据。但是,在进行了某些 mutation 操作后,需要在 refetch 时包含上一次的变化。这时,可以使用 update 方法来手动更新 Apollo cache,然后再触发 refetch。
示例代码:
import { useMutation } from '@apollo/client';
import { gql } from 'apollo-boost';
const MUTATION_CREATE_ITEM = gql`
mutation CreateItem($name: String!, $priority: Int!) {
createItem(input: { name: $name, priority: $priority }) {
item {
id
name
priority
}
}
}
`;
const QUERY_GET_ITEMS = gql`
query GetItems($cursor: ID) {
items(first: 10, after: $cursor) {
edges {
node {
id
name
priority
}
}
pageInfo {
hasNextPage
endCursor
}
}
}
`;
const ItemList = () => {
const [createItem] = useMutation(MUTATION_CREATE_ITEM);
const { data, loading, fetchMore, refetch } = useQuery(QUERY_GET_ITEMS);
const handleSubmit = async (e) => {
e.preventDefault();
await createItem({
variables: {
name: e.target.elements.name.value,
priority: parseInt(e.target.elements.priority.value, 10),
},
update: (cache, { data: { createItem } }) => {
const { item } = createItem;
const queryResult = cache.readQuery({
query: QUERY_GET_ITEMS,
});
const { edges } = queryResult.items;
const firstEdge = edges[0];
// Add the new item to the Apollo cache
cache.writeQuery({
query: QUERY_GET_ITEMS,
data: {
items: {
edges: [
{
node: {
id: item.id,
name: item.name,
priority: item.priority,
__typename: 'ItemNode',
},
cursor: firstEdge.cursor - 1,
__typename: 'ItemNodeEdge',