Apollo 入门引导：管理本地状态

前端

2023-12-29 18:52:07

Apollo 入门引导（九）：管理本地状态

前言

在前面的文章中，我们学习了如何使用 Apollo 客户端进行数据查询和变更。在本篇文章中，我们将学习如何使用 Apollo 客户端管理本地状态。

什么是本地状态？

本地状态是指存储在设备上的数据，即使在应用程序关闭后仍然存在。这与远程状态不同，远程状态存储在服务器上，只能在应用程序连接到互联网时访问。

为什么我们需要管理本地状态？

管理本地状态有以下几个好处：

提高应用程序的性能：通过将数据存储在本地，可以减少对服务器的请求次数，从而提高应用程序的性能。
提高应用程序的可用性：即使在应用程序离线状态下，也可以访问本地数据，从而提高应用程序的可用性。
提高应用程序的安全性：本地数据可以加密存储，从而提高应用程序的安全性。

如何使用 Apollo 客户端管理本地状态？

Apollo 客户端提供了两种管理本地状态的方法：

使用 Apollo 缓存：Apollo 缓存是一个内置的缓存系统，可以将数据存储在内存中。Apollo 缓存非常适合存储经常使用的数据，例如用户首选项或最近查看的产品。
使用 Apollo Link：Apollo Link 是一个可插拔的中间件系统，可以让你在请求发送到服务器之前或之后对其进行修改。Apollo Link 可以用来实现本地存储功能，例如将数据存储在 IndexedDB 或 Web Storage 中。

在本教程中，我们将学习如何使用 Apollo 缓存来管理本地状态。

使用 Apollo 缓存管理本地状态

要使用 Apollo 缓存来管理本地状态，我们需要做以下几件事：

导入 Apollo 缓存：

import { InMemoryCache } from '@apollo/client';

创建 Apollo 缓存实例：

const cache = new InMemoryCache();

将 Apollo 缓存传递给 Apollo 客户端：

const client = new ApolloClient({
  cache,
});

将数据存储在 Apollo 缓存中：

client.writeQuery({
  query: gql`
    query GetTodos {
      todos {
        id
        name
        completed
      }
    }
  `,
  data: {
    todos: [
      {
        id: '1',
        name: 'Learn Apollo',
        completed: false,
      },
      {
        id: '2',
        name: 'Build a GraphQL API',
        completed: true,
      },
    ],
  },
});

从 Apollo 缓存中查询数据：

const { data } = await client.query({
  query: gql`
    query GetTodos {
      todos {
        id
        name
        completed
      }
    }
  `,
});

console.log(data.todos);