GraphQL 禁用缓存 - JavaScript

在使用 GraphQL 进行数据查询时，有时候我们可能需要禁用缓存来获取最新的数据。本文将介绍如何在 JavaScript 中禁用 GraphQL 缓存。

Apollo Client

Apollo Client 是一个用于 JavaScript 的完整的 GraphQL 解决方案，它可以与 React、Angular、Vue.js 等前端框架无缝集成。下面是使用 Apollo Client 禁用缓存的示例代码：

import { ApolloClient, InMemoryCache, gql } from '@apollo/client';

const client = new ApolloClient({
  uri: 'https://example.com/graphql', // 替换为你的 GraphQL 服务器地址
  cache: new InMemoryCache({}),
});

// 禁用缓存的查询示例
client
  .query({
    query: gql`
      query {
        posts {
          id
          title
        }
      }
    `,
    fetchPolicy: 'no-cache', // 禁用缓存
  })
  .then(result => {
    console.log(result.data.posts);
  });

在上面的例子中，我们使用 Apollo Client 的 query 方法发起了一个 GraphQL 查询，并通过设置 fetchPolicy 参数为 'no-cache' 来禁用缓存。这样，每次查询都将获取由 GraphQL 服务器最新返回的数据。

Relay

Relay 是 Facebook 开源的用于构建高性能、可扩展的 React 应用的 GraphQL 客户端框架。下面是使用 Relay 禁用缓存的示例代码：

import { useLazyLoadQuery, graphql } from 'react-relay';

const PostListQuery = graphql`
  query PostListQuery {
    posts {
      id
      title
    }
  }
`;

// 禁用缓存的查询示例
const variables = {};
const { posts } = useLazyLoadQuery(PostListQuery, variables, { fetchPolicy: 'network-only' });

console.log(posts);

在上面的例子中，我们使用 Relay 的 useLazyLoadQuery 钩子函数发起了一个 GraphQL 查询，并通过设置 fetchPolicy 参数为 'network-only' 来禁用缓存。这样，每次查询都将从网络中获取最新的数据。

参考链接

• Apollo Client 文档
• Relay 文档

请根据实际使用的 GraphQL 客户端库和框架，选择适合自己的方法来禁用缓存。以上只是两个常用库的示例，希望对你有帮助！