React Query データベース プラグイン: GraphQL との統合の実践

React Query データベース プラグイン: GraphQL との統合の実践

はじめに:
React Query は、フロントエンドの管理に役立つ強力なデータ管理ライブラリです。アプリケーション内のデータのステータスとリクエスト。同時に、GraphQL は強力なデータ クエリおよび操作機能を提供する最新のデータ クエリ言語です。この記事では、React Query を GraphQL と統合して、データ状態をより効率的に管理する方法について説明します。

React Query の基本:
React Query は、いくつかのカスタム React フックを提供することでデータのステータスとリクエストを処理する React ベースのデータ管理ライブラリです。これらのフックには、useQuery、useMutation、usePaginataion などが含まれます。キャッシュを通じてデータを管理し、自動リクエストや自動データ更新などの機能を提供します。

GraphQL の基本:
GraphQL は、API のクエリ言語およびランタイム環境です。これにより、クライアントは必要なデータ構造とデータ クエリを定義できるようになり、データのオーバーフェッチの問題が軽減されます。 GraphQL を使用すると、クライアントは必要なデータのみをフェッチできるため、パフォーマンスが向上し、ネットワーク リクエストが削減されます。

React Query と GraphQL の統合の実践:
GraphQL と統合するには、React Query が提供する useQuery と useMutation フックを使用し、GraphQL が提供するクエリ API を組み合わせてデータのリクエストと操作を実行する必要があります。 。

ステップ 1: 必要な依存関係をインストールする
まず、npm または Yarn を介して、react-query およびgraphql 関連のパッケージをインストールする必要があります。

ステップ 2: GraphQL クライアントをセットアップする
Apollo Client や Relay などの既存の GraphQL クライアント ライブラリを GraphQL クライアントとして使用できます。ここでは、Apollo クライアントを例として、統合の実践方法を紹介します。

まず、Apollo Client インスタンスを作成し、それを React Query の QueryClientProvider に渡す必要があります。

import { ApolloClient, InMemoryCache } from '@apollo/client';
import { QueryClient, QueryClientProvider } from 'react-query';

const client = new ApolloClient({
  uri: 'https://mygraphqlapi.com/graphql',
  cache: new InMemoryCache(),
});

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      {/* App 组件内容 */}
    </QueryClientProvider>
  );
}

ステップ 3: GraphQL クエリを定義する
コンポーネントでは、useQuery フックを使用して GraphQL クエリを定義できます。

import { useQuery } from 'react-query';
import { gql } from 'graphql-tag';

const GET_POSTS = gql`
  query GetPosts {
    getPosts {
      id
      title
      content
    }
  }
`;

function Posts() {
  const { data, isLoading, error } = useQuery('posts', async () => {
    const response = await client.query({
      query: GET_POSTS,
    });
    return response.data.getPosts;
  });

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  return (
    <div>
      {data.map((post) => (
        <div key={post.id}>
          <h3>{post.title}</h3>
          <p>{post.content}</p>
        </div>
      ))}
    </div>
  );
}

ステップ 4: GraphQL の変更を定義する
クエリに加えて、useMutation Hook を使用して GraphQL の変更を定義することもできます。

import { useMutation } from 'react-query';
import { gql } from 'graphql-tag';

const ADD_POST = gql`
  mutation AddPost($title: String!, $content: String!) {
    addPost(title: $title, content: $content) {
      id
      title
      content
    }
  }
`;

function AddPostForm() {
  const [title, setTitle] = useState('');
  const [content, setContent] = useState('');

  const mutation = useMutation(async () => {
    await client.mutate({
      mutation: ADD_POST,
      variables: {
        title,
        content,
      },
    });
  });

  const handleSubmit = (event) => {
    event.preventDefault();
    mutation.mutate();
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={title}
        onChange={(e) => setTitle(e.target.value)}
      />
      <textarea
        value={content}
        onChange={(e) => setContent(e.target.value)}
      ></textarea>
      <button type="submit" disabled={mutation.isLoading}>
        Add post
      </button>
    </form>
  );
}

要約:
上記の実践を通じて、React Query と GraphQL を正常に統合しました。 React Query の強力なキャッシュ機能と自動リクエスト機能を GraphQL の柔軟性と効率と組み合わせることで、アプリケーションのパフォーマンスと開発効率を大幅に向上させることができます。

もちろん、上記は単なる例であり、実際のアプリケーションはさらに複雑になる可能性があります。ただし、この例は、React Query と GraphQL を使用して統合し、実際の開発に適用する方法を理解するのに役立ちます。

この記事が、React Query と GraphQL の統合の実践を理解するのに役立つことを願っています。データ状態管理に React Query と GraphQL を使用して成功することを祈っています。

以上がReact Query データベース プラグイン: GraphQL との統合の実践の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。