GraphQL-React統合

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

図

反応プロジェクトを設定する最も簡単な方法は、Reactアプリの作成 ツールを使用すること です。以降のセクションでは、サーバーとクライアントの両方をセットアップする方法を学習します。

サーバーのセットアップ

サーバーをセットアップするには、以下の手順に従います-

ステップ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つのクエリが定義されています。sayHelloクエリは文字列パラメータを受け入れ、別の文字列を返します。sayHello（）関数のパラメーターがnullではありません。

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

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

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

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

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

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

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

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

サーバーからの応答を以下に示します-

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

クライアントの設定

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

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

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

npx create-react-app hello-world-client

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

ステップ2-hello-world-clientを起動します

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

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

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

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

以下は、挨拶のために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")
}

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

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ボタンをクリックします。出力は以下のようになります-

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved