社区
学习
工具库
AI工具
休闲
搜索
简体中文
首页 > web前端 > js教程 > React 中用于 GraphQL 状态管理的 Apollo 客户端：简化数据获取和缓存

React 中用于 GraphQL 状态管理的 Apollo 客户端：简化数据获取和缓存

Mary-Kate Olsen
发布： 2024-12-23 18:37:13
原创
558 人浏览过

Apollo Client for GraphQL State Management in React: Simplifying Data Fetching and Caching

React 中用于 GraphQL 状态管理的 Apollo 客户端

Apollo Client 是一个流行的 JavaScript 库，可简化 GraphQL API 的数据管理。它允许您高效管理 React 应用程序中的本地和远程数据，并提供强大的功能，例如缓存、实时更新、分页和查询批处理。借助 Apollo Client，开发人员可以以无缝和声明性的方式使用查询和突变与 GraphQL 服务器进行交互。

Apollo Client 与 React 集成良好，通常用于管理状态并执行从 GraphQL 服务器获取、缓存和更新数据等操作。它减少了对 Redux 等复杂状态管理库的需求，并提供了一种更简单的方法来管理与 UI 组件相关的数据。

1. Apollo客户端的核心概念

1. ApolloProvider

要在 React 应用程序中使用 Apollo Client，您必须首先使用 ApolloProvider 组件包装您的应用程序。该组件通过 React 的 Context API 使 Apollo Client 实例在整个组件树中可用。

示例： 

import React from 'react';
import ReactDOM from 'react-dom';
import { ApolloProvider, InMemoryCache } from '@apollo/client';
import App from './App';

// Initialize Apollo Client with a cache
const client = new ApolloClient({
  uri: 'https://your-graphql-endpoint.com/graphql',
  cache: new InMemoryCache(),
});

ReactDOM.render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>,
  document.getElementById('root')
);
登录后复制
登录后复制
登录后复制
  • ApolloProvider 提供对应用程序中 Apollo 客户端实例的访问。
  • InMemoryCache 是 Apollo Client 用于存储查询结果并优化后续提取的默认缓存实现。

2.查询

在 Apollo 客户端中，查询 用于从 GraphQL 服务器获取数据。您可以使用 useQuery 挂钩来获取 React 组件内的数据。这个钩子会自动为您处理加载、错误状态和缓存。

示例： 

import React from 'react';
import { useQuery, gql } from '@apollo/client';

// Define a query to fetch data from the GraphQL server
const GET_ITEMS = gql`
  query GetItems {
    items {
      id
      name
      description
    }
  }
`;

const ItemsList = () => {
  const { loading, error, data } = useQuery(GET_ITEMS);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <ul>
      {data.items.map(item => (
        <li key={item.id}>
          <h3>{item.name}</h3>
          <p>{item.description}</p>
        </li>
      ))}
    </ul>
  );
};

export default ItemsList;
登录后复制
登录后复制
登录后复制
  • useQuery 在组件安装时执行 GET_ITEMS 查询并提供加载、错误和数据状态。
  • Apollo 客户端会自动缓存响应，并在再次执行相同查询时重用它。

3.突变

突变用于修改服务器上的数据（例如，创建、更新或删除记录）。您可以使用 useMutation 钩子在 React 组件中执行突变。

示例： 

import React from 'react';
import ReactDOM from 'react-dom';
import { ApolloProvider, InMemoryCache } from '@apollo/client';
import App from './App';

// Initialize Apollo Client with a cache
const client = new ApolloClient({
  uri: 'https://your-graphql-endpoint.com/graphql',
  cache: new InMemoryCache(),
});

ReactDOM.render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>,
  document.getElementById('root')
);
登录后复制
登录后复制
登录后复制
  • useMutation 用于调用 ADD_ITEM 突变。
  • 变量选项将输入数据传递给突变。
  • 突变成功后可以使用onCompleted处理响应数据。

4.缓存

Apollo 客户端默认使用缓存。此功能通过将先前查询的结果存储在内存缓存中，有助于避免不必要的网络请求并提高性能。

示例：

当您进行查询时，Apollo Client 会自动检查缓存以查看数据是否已被获取。如果数据存在，则立即返回。如果没有，它会发送网络请求。

import React from 'react';
import { useQuery, gql } from '@apollo/client';

// Define a query to fetch data from the GraphQL server
const GET_ITEMS = gql`
  query GetItems {
    items {
      id
      name
      description
    }
  }
`;

const ItemsList = () => {
  const { loading, error, data } = useQuery(GET_ITEMS);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <ul>
      {data.items.map(item => (
        <li key={item.id}>
          <h3>{item.name}</h3>
          <p>{item.description}</p>
        </li>
      ))}
    </ul>
  );
};

export default ItemsList;
登录后复制
登录后复制
登录后复制
  • 第一次调用useQuery时，Apollo Client会从网络获取数据。
  • 下次执行相同的查询时，Apollo Client 会从缓存中提供数据，从而提高性能。

5.分页并获取更多

处理大型数据集时，通常需要分页。 Apollo 客户端提供了 fetchMore 函数来加载附加数据，以响应用户操作，例如滚动或单击“加载更多”。

示例： 

import React, { useState } from 'react';
import { useMutation, gql } from '@apollo/client';

// Define a mutation to add a new item
const ADD_ITEM = gql`
  mutation AddItem($name: String!, $description: "String!) {"
    addItem(name: $name, description: "$description) {"
      id
      name
      description
    }
  }
`;

const AddItemForm = () => {
  const [name, setName] = useState('');
  const [description, setDescription] = useState('');
  const [addItem, { loading, error }] = useMutation(ADD_ITEM);

  const handleSubmit = (e) => {
    e.preventDefault();
    addItem({
      variables: { name, description },
      onCompleted: (data) => {
        // Handle the data after the mutation is successful
        console.log('Item added:', data.addItem);
      },
    });
  };

  if (loading) return <p>Adding item...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        placeholder="Name"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <input
        type="text"
        placeholder="Description"
        value={description}
        onChange={(e) => setDescription(e.target.value)}
      />
      <button type="submit">Add Item</button>
    </form>
  );
};

export default AddItemForm;
登录后复制
  • fetchMore 允许您在需要时加载更多数据，例如当用户到达列表底部时。

2.使用 Apollo 客户端进行 GraphQL 状态管理的好处

1.高效的数据获取

Apollo Client 使用 GraphQL 简化了数据获取，确保您的应用程序只检索它需要的数据。

2.自动缓存

凭借其内置缓存，Apollo Client 减少了对服务器的请求数量，并通过从缓存中提供数据来提高应用程序的响应速度。

3.实时数据

Apollo Client 支持订阅，让您可以监听实时数据更新。这对于构建实时应用程序（例如聊天应用程序或实时仪表板）非常有用。

4.声明式数据获取

Apollo 客户端允许您使用 GraphQL 查询 以声明方式获取数据，使您的 React 组件更简单、更易于推理。

5.乐观的用户界面

Apollo Client 提供对乐观 UI 更新的支持，允许您在服务器确认更改之前更新 UI。这会带来更流畅的用户体验。

3.完整 Apollo 客户端应用程序示例 

import React from 'react';
import ReactDOM from 'react-dom';
import { ApolloProvider, InMemoryCache } from '@apollo/client';
import App from './App';

// Initialize Apollo Client with a cache
const client = new ApolloClient({
  uri: 'https://your-graphql-endpoint.com/graphql',
  cache: new InMemoryCache(),
});

ReactDOM.render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>,
  document.getElementById('root')
);
登录后复制
登录后复制
登录后复制
import React from 'react';
import { useQuery, gql } from '@apollo/client';

// Define a query to fetch data from the GraphQL server
const GET_ITEMS = gql`
  query GetItems {
    items {
      id
      name
      description
    }
  }
`;

const ItemsList = () => {
  const { loading, error, data } = useQuery(GET_ITEMS);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <ul>
      {data.items.map(item => (
        <li key={item.id}>
          <h3>{item.name}</h3>
          <p>{item.description}</p>
        </li>
      ))}
    </ul>
  );
};

export default ItemsList;
登录后复制
登录后复制
登录后复制

4.结论

Apollo Client 是一个用于在 React 应用程序中管理 GraphQL 数据的强大工具。它为查询和更改数据、缓存、分页和实时数据更新提供内置支持。通过使用 Apollo Client，您可以简化数据管理流程、提高性能并专注于构建应用程序，而不是管理复杂的状态管理系统。

以上是React 中用于 GraphQL 状态管理的 Apollo 客户端：简化数据获取和缓存的详细内容。更多信息请关注PHP中文网其他相关文章！

来源：dev.to
上一篇：如何确定触发 JavaScript 事件的元素？ 下一篇：如何以编程方式在 React Router v2、v3 和 v4 中导航？
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
function_exists()无法判定自定义函数 function test()    {        return true;    }    if (function_exists('TEST')) {        ech...
来自于 2024-04-29 11:01:01
0
3
2446
google 浏览器 手机版显示的怎么实现 老师您好，google 浏览器怎么变成手机版样式的？
来自于 2024-04-23 00:22:19
0
11
2580
子窗口操作父窗口，输出没反应 前两句可执行，最后一句没法应
来自于 2024-04-19 15:37:47
0
1
2181
父窗口没有输出 document.onclick = function(){ window.opener.document.write('我是子窗口的输出');                  ...
来自于 2024-04-18 23:52:34
0
1
2059
关于CSS思维导图的课件在哪？ 课件
来自于 2024-04-16 10:10:18
0
0
2160
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板