React 中用于 GraphQL 狀態(tài)管理的 Apollo 客戶端

Apollo Client 是一個(gè)流行的 JavaScript 庫，可簡(jiǎn)化 GraphQL API 的數(shù)據(jù)管理。它允許您高效管理 React 應(yīng)用程序中的本地和遠(yuǎn)程數(shù)據(jù)，并提供強(qiáng)大的功能，例如緩存、實(shí)時(shí)更新、分頁和查詢批處理。借助 Apollo Client，開發(fā)人員可以以無縫和聲明性的方式使用查詢和突變與 GraphQL 服務(wù)器進(jìn)行交互。

Apollo Client 與 React 集成良好，通常用于管理狀態(tài)并執(zhí)行從 GraphQL 服務(wù)器獲取、緩存和更新數(shù)據(jù)等操作。它減少了對(duì) Redux 等復(fù)雜狀態(tài)管理庫的需求，并提供了一種更簡(jiǎn)單的方法來管理與 UI 組件相關(guān)的數(shù)據(jù)。

---

1. Apollo客戶端的核心概念

1. ApolloProvider

要在 React 應(yīng)用程序中使用 Apollo Client，您必須首先使用 ApolloProvider 組件包裝您的應(yīng)用程序。該組件通過 React 的 Context API 使 Apollo Client 實(shí)例在整個(gè)組件樹中可用。

示例：

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 提供對(duì)應(yīng)用程序中 Apollo 客戶端實(shí)例的訪問。
• InMemoryCache 是 Apollo Client 用于存儲(chǔ)查詢結(jié)果并優(yōu)化后續(xù)提取的默認(rèn)緩存實(shí)現(xiàn)。

2.查詢

在 Apollo 客戶端中，查詢 用于從 GraphQL 服務(wù)器獲取數(shù)據(jù)。您可以使用 useQuery 掛鉤來獲取 React 組件內(nèi)的數(shù)據(jù)。這個(gè)鉤子會(huì)自動(dòng)為您處理加載、錯(cuò)誤狀態(tài)和緩存。

示例：

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 在組件安裝時(shí)執(zhí)行 GET_ITEMS 查詢并提供加載、錯(cuò)誤和數(shù)據(jù)狀態(tài)。
• Apollo 客戶端會(huì)自動(dòng)緩存響應(yīng)，并在再次執(zhí)行相同查詢時(shí)重用它。

3.突變

突變用于修改服務(wù)器上的數(shù)據(jù)（例如，創(chuàng)建、更新或刪除記錄）。您可以使用 useMutation 鉤子在 React 組件中執(zhí)行突變。

示例：

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 用于調(diào)用 ADD_ITEM 突變。
• 變量選項(xiàng)將輸入數(shù)據(jù)傳遞給突變。
• 突變成功后可以使用onCompleted處理響應(yīng)數(shù)據(jù)。

4.緩存

Apollo 客戶端默認(rèn)使用緩存。此功能通過將先前查詢的結(jié)果存儲(chǔ)在內(nèi)存緩存中，有助于避免不必要的網(wǎng)絡(luò)請(qǐng)求并提高性能。

示例：

當(dāng)您進(jìn)行查詢時(shí)，Apollo Client 會(huì)自動(dòng)檢查緩存以查看數(shù)據(jù)是否已被獲取。如果數(shù)據(jù)存在，則立即返回。如果沒有，它會(huì)發(fā)送網(wǎng)絡(luò)請(qǐng)求。

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;

• 第一次調(diào)用useQuery時(shí)，Apollo Client會(huì)從網(wǎng)絡(luò)獲取數(shù)據(jù)。
• 下次執(zhí)行相同的查詢時(shí)，Apollo Client 會(huì)從緩存中提供數(shù)據(jù)，從而提高性能。

5.分頁并獲取更多

處理大型數(shù)據(jù)集時(shí)，通常需要分頁。 Apollo 客戶端提供了 fetchMore 函數(shù)來加載附加數(shù)據(jù)，以響應(yīng)用戶操作，例如滾動(dòng)或單擊“加載更多”。

示例：

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 允許您在需要時(shí)加載更多數(shù)據(jù)，例如當(dāng)用戶到達(dá)列表底部時(shí)。

---

2.使用 Apollo 客戶端進(jìn)行 GraphQL 狀態(tài)管理的好處

1.高效的數(shù)據(jù)獲取

Apollo Client 使用 GraphQL 簡(jiǎn)化了數(shù)據(jù)獲取，確保您的應(yīng)用程序只檢索它需要的數(shù)據(jù)。

2.自動(dòng)緩存

憑借其內(nèi)置緩存，Apollo Client 減少了對(duì)服務(wù)器的請(qǐng)求數(shù)量，并通過從緩存中提供數(shù)據(jù)來提高應(yīng)用程序的響應(yīng)速度。

3.實(shí)時(shí)數(shù)據(jù)

Apollo Client 支持訂閱，讓您可以監(jiān)聽實(shí)時(shí)數(shù)據(jù)更新。這對(duì)于構(gòu)建實(shí)時(shí)應(yīng)用程序（例如聊天應(yīng)用程序或?qū)崟r(shí)儀表板）非常有用。

4.聲明式數(shù)據(jù)獲取

Apollo 客戶端允許您使用 GraphQL 查詢 以聲明方式獲取數(shù)據(jù)，使您的 React 組件更簡(jiǎn)單、更易于推理。

5.樂觀的用戶界面

Apollo Client 提供對(duì)樂觀 UI 更新的支持，允許您在服務(wù)器確認(rèn)更改之前更新 UI。這會(huì)帶來更流暢的用戶體驗(yàn)。

---

3.完整 Apollo 客戶端應(yīng)用程序示例

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.結(jié)論

Apollo Client 是一個(gè)用于在 React 應(yīng)用程序中管理 GraphQL 數(shù)據(jù)的強(qiáng)大工具。它為查詢和更改數(shù)據(jù)、緩存、分頁和實(shí)時(shí)數(shù)據(jù)更新提供內(nèi)置支持。通過使用 Apollo Client，您可以簡(jiǎn)化數(shù)據(jù)管理流程、提高性能并專注于構(gòu)建應(yīng)用程序，而不是管理復(fù)雜的狀態(tài)管理系統(tǒng)。

---

以上是React 中用于 GraphQL 狀態(tài)管理的 Apollo 客戶端：簡(jiǎn)化數(shù)據(jù)獲取和緩存的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！