React での GraphQL 狀態(tài)管理用の Apollo クライアント

Apollo Client は、GraphQL API のデータ管理を簡(jiǎn)素化する人気のある JavaScript ライブラリです。これにより、React アプリケーション內(nèi)のローカル データとリモート データの両方を効率的に管理できるようになり、キャッシュ、リアルタイム更新、ページネーション、クエリのバッチ処理などの強(qiáng)力な機(jī)能が提供されます。 Apollo Client を使用すると、開(kāi)発者はシームレスかつ宣言的な方法でクエリとミューテーションを使用して GraphQL サーバーと対話できます。

Apollo Client は React と適切に統(tǒng)合されており、狀態(tài)を管理し、GraphQL サーバーからのデータのフェッチ、キャッシュ、更新などの操作を?qū)g行するためによく使用されます。これにより、Redux などの複雑な狀態(tài)管理ライブラリの必要性が減り、UI コンポーネントに関連付けられたデータを管理するためのより簡(jiǎn)単なアプローチが提供されます。

---

1. Apollo クライアントの中心概念

1.アポロプロバイダ

React アプリケーションで Apollo Client を使用するには、まずアプリケーションを ApolloProvider コンポーネントでラップする必要があります。このコンポーネントにより、React の Context API を介してコンポーネント ツリー全體で 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')
);

• ApolloProvider は、アプリ全體で Apollo クライアント インスタンスへのアクセスを提供します。
• InMemoryCache は、Apollo クライアントがクエリ結(jié)果を保存し、後続のフェッチを最適化するために使用するデフォルトのキャッシュ実裝です。

2.クエリ

Apollo クライアントでは、クエリ を使用して GraphQL サーバーからデータを取得します。 useQuery フックを使用して、React コンポーネント內(nèi)のデータをフェッチできます。このフックは、読み込み、エラー狀態(tài)、キャッシュを自動(dò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 は、コンポーネントがマウントされているときに GET_ITEMS クエリを?qū)g行し、読み込み、エラー、データの狀態(tài)を提供します。
• Apollo クライアントは応答を自動(dòng)的にキャッシュし、同じクエリが再度実行されるときにそれを再利用します。

3.突然変異

ミューテーションは、サーバー上のデータを変更するために使用されます (レコードの作成、更新、削除など)。 useMutation フックを使用して、React コンポーネント內(nèi)でミューテーションを?qū)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')
);

• useMutation は、ADD_ITEM ミューテーションを呼び出すために使用されます。
• 変數(shù)オプションは、入力データをミューテーションに渡します。
• onCompleted を使用して、変更が成功した後の応答データを処理できます。

4.キャッシング

Apollo クライアントはデフォルトでキャッシュを使用します。この機(jī)能は、以前のクエリの結(jié)果をメモリ內(nèi)キャッシュに保存することで、不要なネットワーク リクエストを回避し、パフォーマンスを向上させるのに役立ちます。

例:

クエリを作成すると、Apollo クライアントは自動(dòng)的にキャッシュをチェックして、データがすでにフェッチされているかどうかを確認(rèn)します。データが存在する場(chǎng)合は、すぐにそれを返します。そうでない場(chǎ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 を呼び出すと、Apollo クライアントはネットワークからデータを取得します。
• 次回同じクエリが実行されるとき、Apollo クライアントはキャッシュからデータを提供し、パフォーマンスを向上させます。

5.ページネーションとその他のフェッチ

大規(guī)模なデータセットを扱う場(chǎng)合、ページネーションが必要になることがよくあります。 Apollo クライアントは、スクロールや「もっと読み込む」をクリックするなどのユーザーアクションに応じて追加データをロードする fetchMore 関數(shù)を提供します。

例:

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 を使用すると、ユーザーがリストの最後に到達(dá)したときなど、必要なときにさらにデータをロードできます。

---

2. GraphQL 狀態(tài)管理に Apollo クライアントを使用する利點(diǎn)

1.効率的なデータ取得

Apollo クライアントは、GraphQL を使用したデータの取得を簡(jiǎn)素化し、アプリケーションが必要なデータのみを取得できるようにします。

2.自動(dòng)キャッシュ

Apollo クライアントは、組み込みのキャッシュによりサーバーへのリクエストの數(shù)を減らし、キャッシュからデータを提供することでアプリケーションの応答性を高めます。

3.リアルタイムデータ

Apollo クライアントは、リアルタイムのデータ更新をリッスンできる サブスクリプション をサポートしています。これは、チャット アプリやライブ ダッシュボードなどのリアルタイム アプリケーションを構(gòu)築する場(chǎng)合に役立ちます。

4.宣言的データの取得

Apollo クライアントを使用すると、GraphQL クエリ を使用して宣言的にデータをフェッチできるため、React コンポーネントがよりシンプルになり、推論が容易になります。

5.楽観的な UI

Apollo クライアントは、オプティミスティック UI 更新 のサポートを提供し、サーバーが変更を確認(rèn)する前に 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.結(jié)論

Apollo Client は、React アプリケーションで GraphQL データを管理するための強(qiáng)力なツールです。データのクエリと変更、キャッシュ、ページネーション、およびリアルタイムのデータ更新の組み込みサポートを提供します。 Apollo Client を使用すると、データ管理プロセスを合理化し、パフォーマンスを向上させ、複雑な狀態(tài)管理システムの管理ではなくアプリケーションの構(gòu)築に集中できます。

---

以上がReact での GraphQL 狀態(tài)管理用の Apollo クライアント: データのフェッチとキャッシュの簡(jiǎn)素化の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。