React 中用於 GraphQL 狀態管理的 Apollo 用戶端：簡化資料擷取與快取

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中文網其他相關文章！