Apollo Client Cache

梗概

• Apollo Client 内置了一套强大的缓存机制，默认使用 InMemoryCache 来存储查询结果。
• Apollo Client 会根据查询的结构自动将结果缓存，并在后续请求时优先从缓存中读取数据。

示例

配置缓存：

// src/apollo.js
import { ApolloClient, InMemoryCache } from '@apollo/client';
 
const apolloClient = new ApolloClient({
  uri: 'https://your-graphql-endpoint.com/graphql', 
  cache: new InMemoryCache(), // 使用内存缓存
});
 
export default apolloClient;

更新缓存： 如果你进行了一些突变操作并希望更新缓存，可以使用 update 函数：

import { gql, useMutation } from '@apollo/client';
const UPDATE_DATA = gql`
  mutation UpdateData($id: ID!, $name: String!) {
    updateData(id: $id, name: $name) {
      id
      name
    }
  }
`;
export default {
  setup() {
    const [updateData] = useMutation(UPDATE_DATA, {
      update(cache, { data: { updateData } }) {
        // 更新缓存以包含新的数据
        const dataInCache = cache.readQuery({ query: GET_DATA });
        cache.writeQuery({
          query: GET_DATA,
          data: { myData: [...dataInCache.myData, updateData] },
        });
      },
    });
    return {
      updateData,
    };
  },
};