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

Apollo Client 是一個(gè)受歡迎的 JavaScript 函式庫(kù)，可簡(jiǎn)化 GraphQL API 的資料管理。它允許您高效管理 React 應(yīng)用程式中的本地和遠(yuǎn)端數(shù)據(jù)，並提供強(qiáng)大的功能，例如快取、即時(shí)更新、分頁(yè)和查詢(xún)批次。借助 Apollo Client，開(kāi)發(fā)人員可以以無(wú)縫和聲明性的方式使用查詢(xún)和突變與 GraphQL 伺服器進(jìn)行互動(dòng)。

Apollo Client 與 React 整合良好，通常用於管理狀態(tài)並執(zhí)行從 GraphQL 伺服器取得、快取和更新資料等操作。它減少了對(duì) Redux 等複雜狀態(tài)管理庫(kù)的需求，並提供了一種更簡(jiǎn)單的方法來(lái)管理與 UI 元件相關(guān)的資料。

---

1. Apollo客戶端的核心概念

1. ApolloProvider

要在 React 應(yīng)用程式中使用 Apollo Client，您必須先使用 ApolloProvider 元件包裝您的應(yīng)用程式。此元件透過(guò) React 的 Context API 使 Apollo Client 實(shí)例在整個(gè)元件樹(shù)中可用。

範(fàn)例：

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ǔ)存查詢(xún)結(jié)果並最佳化後續(xù)擷取的預(yù)設(shè)快取實(shí)作。

2.查詢(xún)

在 Apollo 用戶端中，查詢(xún) 用於從 GraphQL 伺服器取得資料。您可以使用 useQuery 掛鉤來(lái)取得 React 元件內(nèi)的資料。這個(gè)鉤子會(huì)自動(dòng)為您處理載入、錯(cuò)誤狀態(tài)和快取。

範(fàn)例：

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 查詢(xún)並提供載入、錯(cuò)誤和資料狀態(tài)。
• Apollo 用戶端會(huì)自動(dòng)快取回應(yīng)，並在再次執(zhí)行相同查詢(xún)時(shí)重複使用它。

3.突變

突變用於修改伺服器上的資料（例如，建立、更新或刪除記錄）。您可以使用 useMutation 鉤子在 React 元件中執(zhí)行突變。

範(fàn)例：

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 突變。
• 變數(shù)選項(xiàng)將輸入資料傳遞給突變。
• 突變成功後可以使用onCompleted處理反應(yīng)資料。

4.快取

Apollo 用戶端預(yù)設(shè)使用快取。此功能透過(guò)將先前查詢(xún)的結(jié)果儲(chǔ)存在記憶體快取中，有助於避免不必要的網(wǎng)路請(qǐng)求並提高效能。

範(fàn)例：

當(dāng)您進(jìn)行查詢(xún)時(shí)，Apollo Client 會(huì)自動(dòng)檢查快取以查看資料是否已取得。如果資料存在，則立即傳回。如果沒(méi)有，它會(huì)發(fā)送網(wǎng)路請(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;

• 第一次呼叫useQuery時(shí)，Apollo Client會(huì)從網(wǎng)路取得資料。
• 下次執(zhí)行相同的查詢(xún)時(shí)，Apollo Client 會(huì)從快取中提供數(shù)據(jù)，從而提高效能。

5.分頁(yè)並取得更多

處理大型資料集時(shí)，通常需要分頁(yè)。 Apollo 用戶端提供了 fetchMore 函數(shù)來(lái)載入附加數(shù)據(jù)，以回應(yīng)使用者操作，例如捲動(dòng)或點(diǎn)擊「載入更多」。

範(fàn)例：

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.高效率的資料取得

Apollo Client 使用 GraphQL 簡(jiǎn)化了資料獲取，確保您的應(yīng)用程式只檢索它需要的資料。

2.自動(dòng)快取

憑藉其內(nèi)建緩存，Apollo Client 減少了對(duì)伺服器的請(qǐng)求數(shù)量，並透過(guò)從快取中提供資料來(lái)提高應(yīng)用程式的回應(yīng)速度。

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

Apollo Client 支援訂閱，讓您可以監(jiān)聽(tīng)即時(shí)數(shù)據(jù)更新。這對(duì)於建立即時(shí)應(yīng)用程式（例如聊天應(yīng)用程式或即時(shí)儀表板）非常有用。

4.聲明式資料取得

Apollo 用戶端可讓您使用 GraphQL 查詢(xún) 以聲明方式取得數(shù)據(jù)，讓您的 React 元件更簡(jiǎn)單、更易於推理。

5.樂(lè)觀的使用者介面

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

---

3.完整 Apollo 用戶端應(yīng)用程式範(fàn)例

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 資料的強(qiáng)大工具。它為查詢(xún)和更改資料、快取、分頁(yè)和即時(shí)資料更新提供內(nèi)建支援。透過(guò)使用 Apollo Client，您可以簡(jiǎn)化資料管理流程、提高效能並專(zhuān)注於建立應(yīng)用程序，而不是管理複雜的狀態(tài)管理系統(tǒng)。

---

以上是React 中用於 GraphQL 狀態(tài)管理的 Apollo 用戶端：簡(jiǎn)化資料擷取與快取的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！