React と GraphQL を使用して柔軟なフロントエンドとバックエンドのデータインタラクションを構築する方法-jsチュートリアル-php.cn

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

王林

リリース： 2023-09-28 20:30:11

オリジナル

1668 人が閲覧しました

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

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

1.GraphQL とは何ですか?

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

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

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

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

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

ログイン後にコピー

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')
);

ログイン後にコピー

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 などの情報にアクセスできます。この情報に基づいて、対応するコンテンツをページに表示できます。

クエリの送信に加えて、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 サイトの他の関連記事を参照してください。