React での GraphQL 状態管理用の Apollo クライアント: データのフェッチとキャッシュの簡素化

React での GraphQL 状態管理用の Apollo クライアント

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

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

---

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 クライアントがクエリ結果を保存し、後続のフェッチを最適化するために使用するデフォルトのキャッシュ実装です。

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 クライアントは自動的にキャッシュをチェックして、データがすでにフェッチされているかどうかを確認します。データが存在する場合は、すぐにそれを返します。そうでない場合は、ネットワーク リクエストを送信します。

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.ページネーションとその他のフェッチ

大規模なデータセットを扱う場合、ページネーションが必要になることがよくあります。 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. GraphQL 状態管理に Apollo クライアントを使用する利点

1.効率的なデータ取得

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

2.自動キャッシュ

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

3.リアルタイムデータ

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

4.宣言的データの取得

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

5.楽観的な UI

Apollo クライアントは、オプティミスティック 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 中国語 Web サイトの他の関連記事を参照してください。