GraphQL-React統合

Reactは、ユーザーインターフェイスを構築するためのJavaScriptライブラリです。この章では、GraphQLをReactアプリケーションと統合する方法について説明します。

図

Reactプロジェクトをセットアップする最も簡単な方法は、Create React App toolを使用することです。以降のセクションでは、サーバーとクライアントの両方をセットアップする方法を学習します。

サーバーのセットアップ

サーバーを設定するには、以下の手順に従ってください-

ステップ1-プロジェクトに必要な依存関係をダウンロードしてインストールする

*react-server-app* フォルダーを作成します。 ターミナルからディレクトリを「 *react-server-app* 」に変更します。 環境設定の章で説明されている手順3〜5に従います。

ステップ2-スキーマを作成する

プロジェクトフォルダーに schema.graphql ファイルを追加し、 react-server-app に次のコードを追加します-

type Query
{
   greeting: String
   sayHello(name:String!):String
}

このファイルでは、「greeting」と「sayHello」という2つのクエリが定義されています。 saysayelloクエリは、文字列パラメーターを受け取り、別の文字列を返します。 saysayello（）関数のパラメーターがnullではありません。

ステップ3-リゾルバーを作成する

プロジェクトフォルダにファイル resolvers.js を作成し、次のコードを追加します-

const Query =
{
   greeting: () => 'Hello GraphQL  From finddevguides !!' ,
   sayHello:(root,args,context,info) =>  `Hi ${args.name} GraphQL server says Hello to you!!`
}
module.exports = {Query}

ここでの挨拶と挨拶は2人のリゾルバです。 sayHello resolverでは、nameパラメーターに渡された値はargsを介してアクセスできます。モジュール外のリゾルバー関数にアクセスするには、module.exportsを使用してQueryオブジェクトをエクスポートする必要があります。

ステップ4-アプリケーションを実行する

server.jsファイルを作成します。環境設定の章の手順8を参照してください。ターミナルでコマンド_npm start_を実行します。サーバーは9000ポートで稼働します。ここでは、GraphiQLをクライアントとして使用して、アプリケーションをテストします。

ブラウザを開き、URL http：//localhost：9000/graphiql を入力します。エディタで次のクエリを入力します-

{
   greeting,
   sayHello(name:"Mohtashim")
}

サーバーからの応答は以下のとおりです-

{
   "data": {
      "greeting": "Hello GraphQL  From finddevguides !!",
      "sayHello": "Hi Mohtashim GraphQL server says Hello to you!!"
   }
}

クライアントのセットアップ

クライアント用の新しいターミナルを開きます。サーバーアプリケーションは、クライアントアプリケーションを実行する前に実行し続ける必要があります。 Reactアプリケーションはポート番号3000で実行され、サーバーアプリケーションはポート番号9000で実行されます。

ステップ1-Reactプロジェクトhello-world-clientを作成する

クライアント端末で、次のコマンドを入力します-

npx create-react-app hello-world-client

これにより、典型的なリアクションアプリケーションに必要なすべてがインストールされます。 npx ユーティリティと create-react-app ツールは、hello-world-clientという名前のプロジェクトを作成します。インストールが完了したら、VSCodeでプロジェクトを開きます。

ステップ2-hello-world-clientを開始します

ターミナルの現在のフォルダーパスをhello-world-clientに変更します。 npm startと入力して、プロジェクトを起動します。これにより、ポート3000で開発サーバーが実行され、ブラウザーが自動的に開き、インデックスページが読み込まれます。

これは、以下のスクリーンショットに示されています-

Reactプロジェクトの作成

ステップ3-アプリコンポーネントの変更

srcフォルダー内のApp.jsで、グリーティングをロードする関数とsayHelloメッセージをロードする関数の2つの関数を追加します。

以下は、挨拶のためにGraphQLクエリを送信する「loadGreeting」関数です。

async function loadGreeting() {
   const response = await fetch('http://localhost:9000/graphql', {
      method:'POST',

      headers:{'content-type':'application/json'},
      body:JSON.stringify({query:'{greeting}'})
   })

   const rsponseBody = await response.json();
   return rsponseBody.data.greeting;

   console.log("end of function")
}

以下は、sayHelloのGraphQLクエリを送信する loadSayhello 関数です-

async function  loadSayhello(name) {
   const response = await fetch('http://localhost:9000/graphql', {
      method:'POST',
      headers:{'content-type':'application/json'},
      body:JSON.stringify({query:`{sayHello(name:"${name}")}`})
   })
}

完全な App.js ファイルを以下に示します-

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

async function loadGreeting() {
   const response =  await fetch('http://localhost:9000/graphql', {
      method:'POST',
      headers:{'content-type':'application/json'},
      body:JSON.stringify({query:'{greeting}'})
   })
   const rsponseBody =  await response.json();
   return rsponseBody.data.greeting;
   console.log("end of function")
}

async function  loadSayhello(name) {
   const response =  await fetch('http://localhost:9000/graphql', {
      method:'POST',
      headers:{'content-type':'application/json'},
      body:JSON.stringify({query:`{sayHello(name:"${name}")}`})
   })
   const rsponseBody =  await response.json();
   return rsponseBody.data.sayHello;
}

class App extends Component {
   constructor(props) {
      super(props);
      this.state =  {greetingMessage:'',sayHelloMessage:'',userName:''}
      this.updateName =  this.updateName.bind(this);
      this.showSayHelloMessage =  this.showSayHelloMessage.bind(this);
      this.showGreeting =  this.showGreeting.bind(this);
   }

   showGreeting() {
      loadGreeting().then(g => this.setState({greetingMessage:g+" :-)"}))
   }

   showSayHelloMessage() {
      const name = this.state.userName;
      console.log(name)
      loadSayhello(name).then(m => this.setState({sayHelloMessage:m}))
   }

   updateName(event) {
      this.setState({userName:event.target.value})
   }
   render() {
      return (
         <div className = "App">
            <header className = "App-header">
               <img src = {logo} className = "App-logo" alt = "logo"/>
               <h1 className = "App-title">Welcome to React</h1>
            </header>
            <br/><br/>
            <section>
               <button id = "btnGreet" onClick = {this.showGreeting}>Greet</button>
               <br/> <br/>
               <div id = "greetingDiv">
                  <h1>{this.state.greetingMessage}</h1>
               </div>
            </section>

            <hr/>

            <section>
               Enter a name:<input id = "txtName" type = "text" onChange = {this.updateName}
               value = {this.state.userName}/>
               <button id = "btnSayhello" onClick = {this.showSayHelloMessage}>SayHello</button>
               <br/>
               user name is:{this.state.userName}    <br/>
               <div id = "SayhelloDiv">
                  <h1>{this.state.sayHelloMessage}</h1>
               </div>
            </section>
         </div>
      );
   }
}

export default App;

両方のアプリケーションが実行されたら、「挨拶」ボタンをクリックします。次に、テキストボックスに名前を入力し、sayHelloボタンをクリックします。出力は以下のようになります-

React Output Hello GraphQL

Graphql-react-integration

目次