Apollo Client默认不会缓存从mutation返回的数据。但是,你可以通过使用Apollo Client的update
函数来手动更新缓存。
以下是一个示例,演示了如何在mutation返回数据后手动更新缓存:
import { ApolloClient, InMemoryCache, gql } from '@apollo/client';
const client = new ApolloClient({
// 配置Apollo Client
cache: new InMemoryCache(),
// 其他配置项...
});
const ADD_TODO = gql`
mutation AddTodo($title: String!) {
addTodo(title: $title) {
id
title
}
}
`;
const updateCache = (cache, { data }) => {
// 从mutation返回的数据中获取新创建的todo
const newTodo = data.addTodo;
// 从缓存中读取已存在的todos列表
const existingTodos = cache.readQuery({
query: GET_TODOS,
});
// 将新创建的todo添加到已存在的todos列表中
cache.writeQuery({
query: GET_TODOS,
data: {
todos: [...existingTodos.todos, newTodo],
},
});
};
const addTodo = (title) => {
client.mutate({
mutation: ADD_TODO,
variables: { title },
update: updateCache, // 在mutation返回数据后执行update函数
});
};
在上面的示例中,updateCache
函数使用cache.readQuery
从缓存中读取已存在的todos列表,并使用cache.writeQuery
将新创建的todo添加到列表中。
请注意,上述示例假设已存在一个名为GET_TODOS
的查询,用于获取todos列表。你需要将其替换为你实际使用的查询。