React と GraphQL を使用して柔軟なフロントエンドとバックエンドのデータ インタラクションを構築する方法

React と GraphQL を使用して柔軟なフロントエンドとバックエンドのデータ インタラクションを構築する方法

最新の Web アプリケーション開発では、フロントエンドとバックエンドのデータ相互作用が不可欠です。効率的で柔軟かつスケーラブルなデータ インタラクションを実現するには、React と GraphQL を組み合わせて使用​​するのが良い選択です。この記事では、React と GraphQL を使用して柔軟なフロントエンドとバックエンドのデータ インタラクションを構築する方法を紹介し、具体的なコード例を示します。

1.GraphQL とは何ですか?

GraphQL は、クエリ言語と API のランタイムの仕様セットです。フロントエンド アプリケーションに必要なデータを記述する柔軟な方法を提供し、ネットワーク リクエストの数を減らし、データ取得の効率を大幅に向上させることができます。従来の RESTful API と比較して、GraphQL を使用すると、フロントエンド アプリケーションは、複数のエンドポイントから不要なデータを取得することなく、取得する必要があるデータを正確に指定できます。

2. React と GraphQL の使用方法は?

1. 関連する依存関係をインストールする

まず、必要な依存関係をいくつかインストールする必要があります。コマンド ライン ツールを開き、プロジェクト ディレクトリを入力し、次のコマンドを実行します。

npm install react react-dom react-apollo graphql apollo-boost

2. Apollo クライアントの作成

React アプリケーションでは、Apollo クライアントを使用して管理できます。およびGraphQLサーバー通信。まず、プロジェクトのエントリ ファイル (通常はindex.js) を開き、次のように Apollo クライアントを作成します。

import React from 'react';
import { ApolloProvider } from 'react-apollo';
import ApolloClient from 'apollo-boost';

const client = new ApolloClient({
  uri: 'http://localhost:4000/graphql' // GraphQL服务器的URL
});

ReactDOM.render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>,
  document.getElementById('root')
);

3. Send GraphQL query

React 内コンポーネント では、Apollo クライアントが提供する Query コンポーネントを使用して、GraphQL クエリを送信し、データを取得できます。以下に例を示します:

import React from 'react';
import { Query } from 'react-apollo';
import gql from 'graphql-tag';

const GET_USER = gql`
  query GetUser($id: ID!) {
    user(id: $id) {
      id
      name
      email
    }
  }
`;

const User = ({ id }) => (
  <Query query={GET_USER} variables={{ id }}>
    {({ loading, error, data }) => {
      if (loading) return <p>Loading...</p>;
      if (error) return <p>Error :(</p>;

      const { user } = data;

      return (
        <div>
          <p>Name: {user.name}</p>
          <p>Email: {user.email}</p>
        </div>
      );
    }}
  </Query>
);

上記のコードでは、GET_USER の GraphQL クエリを定義し、それを query 属性として Query## に渡します。 ＃ 成分。また、クエリに必要な変数も variables 属性を介して渡しました。コンポーネントのコールバック関数では、loading、error、data などの情報にアクセスできます。この情報に基づいて、対応するコンテンツをページに表示できます。

GraphQL 変更の送信

クエリの送信に加えて、Apollo クライアントが提供する

Mutation コンポーネントを使用して GraphQL 変更を送信することもできます。以下に例を示します:

import React from 'react';
import { Mutation } from 'react-apollo';
import gql from 'graphql-tag';

const CREATE_USER = gql`
  mutation CreateUser($input: CreateUserInput!) {
    createUser(input: $input) {
      id
      name
      email
    }
  }
`;

const CreateUser = () => (
  <Mutation mutation={CREATE_USER}>
    {(createUser, { data }) => (
      <div>
        <button onClick={() => {
          createUser({ variables: { input: { name: 'John', email: 'john@example.com' } } })
        }}>Create User</button>
      </div>
    )}
  </Mutation>
);

上記のコードでは、

CREATE_USER の GraphQL ミューテーションを定義し、それを mutation 属性として Mutation## に渡します。 ＃ 成分。コンポーネントのコールバック関数では、createUser 関数を呼び出すことで変更を送信できます。同様に、必要に応じてページに関連するコンテンツを表示できます。 3. 概要

上記の例を通じて、React と GraphQL を組み合わせることで、効率的で柔軟かつスケーラブルなフロントエンドとバックエンドのデータ対話を実現できることがわかります。 React と Apollo Client を使用すると、GraphQL クエリと変更を簡単に送信し、ページ上のデータを表示および処理できます。このアプローチにより、フロントエンド開発の複雑さが大幅に簡素化され、より優れたユーザー エクスペリエンスが提供されます。

この記事が、React と GraphQL を使用して柔軟なフロントエンドとバックエンドのデータ インタラクションを構築する方法を誰もが理解するのに役立つことを願っています。 React と GraphQL をまだ試したことがない場合は、自分のプロジェクトで試してみることをお勧めします。それらがいかに強力であるかがわかると思います。 Web 開発でより良い結果が得られることを願っています。

以上がReact と GraphQL を使用して柔軟なフロントエンドとバックエンドのデータ インタラクションを構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。