React と GraphQL を使用してスケーラブルな API インターフェイスを構築する方法

React と GraphQL を使用してスケーラブルな API インターフェイスを構築する方法

Web アプリケーションの複雑さが増すにつれて、スケーラブルな API インターフェイスの構築はますます困難になっています。それは重要です。 React と GraphQL は、効率的で柔軟かつスケーラブルな API の構築に役立つ 2 つの人気のあるテクノロジーです。この記事では、React と GraphQL を使用してスケーラブルな API インターフェイスを構築する方法を検討し、具体的なコード例を示します。

React は、ユーザー インターフェイスを構築するための JavaScript ライブラリです。これにより、インターフェイスを再利用可能なコンポーネントに分割する方法が提供され、開発者が複雑なユーザー インターフェイスを簡単に構築できるようになります。 GraphQL は、クライアントが必要なデータを正確に取得できるように設計されたクエリ言語およびランタイム環境です。強力な型システムとクエリ言語を通じて、クライアントとサーバー間のデータ交換に柔軟性と効率性を提供します。

以下では、React と GraphQL を使用してスケーラブルな API インターフェイスを構築する方法を段階的に紹介します。 Node.js をバックエンド サーバーとして使用し、Express.js をサーバー フレームワークとして使用します。

ステップ 1: 必要な依存関係をインストールする
まず、React と GraphQL の関連する依存関係をインストールする必要があります。コマンド ラインから、npm または Yarn を使用して、次の依存関係をインストールします。

npm install react react-dom graphql express express-graphql

ステップ 2: Express サーバーをセットアップする
次に、Express サーバーをセットアップし、GraphQL エンドポイントを作成します。プロジェクトのルート ディレクトリに、server.js という名前のファイルを作成し、次のコードを追加します。

const express = require('express');
const { graphqlHTTP } = require('express-graphql');
const { buildSchema } = require('graphql');

// 创建GraphQL schema
const schema = buildSchema(`
  type Query {
    hello: String
  }
`);

// 定义GraphQL resolver
const root = {
  hello: () => 'Hello, World!'
};

// 创建Express app
const app = express();

// 设置GraphQL端点
app.use('/graphql', graphqlHTTP({
  schema: schema,
  rootValue: root,
  graphiql: true
}));

// 启动服务器
app.listen(4000, () => {
  console.log('GraphQL server is running at http://localhost:4000/graphql');
});

上記のコードでは、まず buildSchema 関数スキーマを使用して単純な GraphQL を作成しました。これは、hello という名前のクエリ フィールドを定義します。次に、クエリ フィールドのパーサー関数を含む root オブジェクトを作成します。最後に、Express アプリケーションを作成し、graphqlHTTP ミドルウェアを使用して GraphQL エンドポイントを設定しました。

ステップ 3: React コンポーネントを作成する
プロジェクトのルート ディレクトリに App.js という名前のファイルを作成し、次のコードを追加します。

import React from 'react';
import { gql, useQuery } from '@apollo/client';

// 定义GraphQL查询
const GET_HELLO = gql`
  query {
    hello
  }
`;

function App() {
  const { loading, error, data } = useQuery(GET_HELLO);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error :(</p>;

  return (
    <div>
      <h1>{data.hello}</h1>
    </div>
  );
}

export default App;

上記のコードでは、 @apollo/client ライブラリは、GraphQL クエリの実行に使用されます。 GET_HELLO というクエリを定義し、useQuery フックを使用してクエリを実行します。クエリ結果のステータスに応じて、異なるコンポーネントが返されます。

ステップ 4: React アプリケーションをレンダリングする
プロジェクトのルート ディレクトリで、index.js ファイルを編集し、次のコードを追加します:

import React from 'react';
import ReactDOM from 'react-dom';
import { ApolloProvider, ApolloClient, InMemoryCache } from '@apollo/client';
import App from './App';

// 创建Apollo客户端
const client = new ApolloClient({
  uri: 'http://localhost:4000/graphql',
  cache: new InMemoryCache()
});

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

ここでは @apollo を使用します。 /clientライブラリは Apollo クライアントを作成し、GraphQL エンドポイントの URL を設定します。次に、ApolloProvider コンポーネントを使用して、Apollo クライアントを React アプリケーションにバインドしました。

ステップ 5: アプリケーションの実行
コマンド ラインで、次のコマンドを使用してアプリケーションを起動します。

npm start

これで、http://localhost:4000/graphql にアクセスできるようになります。 http://localhost:3000 にアクセスして、GraphQL インターフェイスを表示し、React アプリケーションにアクセスします。

結論
この記事では、React と GraphQL を使用してスケーラブルな API インターフェイスを構築する方法を紹介しました。 React と GraphQL のサンプル コードを使用して、Express サーバーのセットアップ方法、GraphQL スキーマとリゾルバーの作成方法、および React アプリケーションで GraphQL クエリを実行する方法を示します。 React と GraphQL を使用すると、効率的で柔軟かつ拡張可能な API インターフェイスを構築し、スケーラビリティのニーズをより適切に満たすことができます。

以上がReact と GraphQL を使用してスケーラブルな API インターフェイスを構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。