GraphQL-例

この章では、挨拶メッセージHelloWorldを返す簡単なAPIを作成し、GraphiQLを使用してアクセスします。

例

この例は、NodeJS、Express、およびApolloサーバーに基づいています。私たちは、次の手順ですべての概念をまとめることを学びます-

ステップ1-Expressのセットアップ

ExpressJSは、WebサイトおよびWebアプリケーションの構築を支援するWebアプリケーションフレームワークです。この例では、Expressフレームワークの上にGraphQL APIを構築します。

次のステップは、 hello-world-server フォルダーを作成し、ターミナルから同じフォルダーに移動することです。 package.jsonを追加し、パッケージに名前を付けます。このパッケージは内部でのみ使用されるため、プライベートとして宣言できます。

{
   "name":"hello-world-server",
   "private":true
}

以下に示すように、Expressサーバーの依存関係をインストールします-

C:\Users\Admin\hello-world-server>npm install express body-parser cors

_body-parser_は、ExpressがHTTP Post要求を効率的に処理するのに役立つミドルウェアパッケージです。 _cors_は、クロスオリジンリソース共有を処理する別のミドルウェアパッケージです。

プロジェクトフォルダ内に server.js ファイルを作成し、その中に次を入力します-

const bodyParser = require('body-parser')
   const cors = require('cors')
   const express = require('express')
   const port = process.env.PORT|| 9000
   const app = express()

  //register middleware
   app.use(bodyParser.json() , cors())
   app.listen(port, () =>  console.log(`server is up and running at ${port}`)

Expressサーバーが稼働しているかどうかを確認するには、ターミナルウィンドウで次のコードを実行します-

C:\Users\Admin\hello-world-server>node server.js

サーバーコンソールに次の出力が表示されます。これは、エクスプレスサーバーがポート9000で実行されていることを示しています。

server is up and running at 9000

ブラウザを開いて http：//localhost：9000 と入力すると、次の画面が表示されます-

Epressサーバーの実行

サーバーを停止するには、 Ctrl + C を押します。

ステップ2-GraphQLおよびApolloサーバーのインストール

Expressが構成されたので、次のステップは、次のGraphQL依存関係をダウンロードすることです-

graphql
graphql-tools
apollo-server-express @ 1

Apolloサーバーv1.0は安定したリリースであるため使用します。これらの依存関係をインストールするには、次のコマンドを入力します-

C:\Users\Admin\hello-world-server>npm install graphql graphql-tools apollo-server-express@1

これらの依存関係が正常にインストールされているかどうかは、以前に作成した package.json ファイルを確認することで確認できます。

{
   "name": "hello-world-server",
   "private": true,

   "dependencies": {
      "apollo-server-express": "^1.4.0",
      "body-parser": "^1.18.3",
      "cors": "^2.8.4",
      "express": "^4.16.3",
      "graphql": "^0.13.2",
      "graphql-tools": "^3.1.1"
   }
}

ステップ3-スキーマを定義する

GraphQLスキーマは、サービスから取得できるオブジェクトの種類とそのフィールドを定義します。スキーマは GraphQL Schema Definition Language を使用して定義できます。今、 server.js ファイルに次のコードスニペットを追加します-

//Adding Type Definitions
const typeDefinition = `
   type Query  {
      greeting: String
   }

ここで、クエリには_string_値を返す_greeting_属性が含まれています。

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

リゾルバを作成する最初のステップは、グリーティングフィールドのリクエストを処理するコードを追加することです。これは resolver で指定されます。リゾルバー関数の構造は、スキーマと一致する必要があります。 server.js ファイルに次のコードスニペットを追加します。

//Adding resolver
const  resolverObject = {
   Query : {
      greeting: () => 'Hello GraphQL  From finddevguides !!'
   }
}

2番目のステップは、 makeExecutableSchema を使用してスキーマとリゾルバーをバインドすることです。この関数は、graphql-toolsモジュールで事前に定義されています。次のコードスニペットを server.js ファイルに追加します。

const {makeExecutableSchema} = require('graphql-tools')
const schema = makeExecutableSchema({typeDefs:typeDefinition, resolvers:resolverObject})

ステップ5-ReactJS/GraphiQLアプリケーションからデータを取得するルートを定義する

*server.js* ファイルに次のコードスニペットを追加します-

const {graphqlExpress, graphiqlExpress} = require('apollo-server-express')

  //create routes for graphql and graphiql
   app.use('/graphql',graphqlExpress({schema}))

   app.use('/graphiql',graphiqlExpress({endpointURL:'/graphql'}))

_graphqlExpress_関数は、ルート http：//localhost：9000/graphql の登録に役立ちます。 ReactJSアプリケーションは、このエンドポイントを使用してデータを照会できます。同様に、_graphqliExpress_関数は、ルート http：//localhost：9000/graphiql の登録に役立ちます。これは、APIをテストするためにGraphiQLブラウザクライアントによって使用されます。

完全なserver.jsコードは以下のとおりです-

const bodyParser = require('body-parser')
const cors = require('cors')
const express = require('express')
const port = process.env.PORT||9000
const app = express()

app.use(bodyParser.json() , cors())
const typeDefinition = `
type Query  {
   greeting: String
}`
const  resolverObject = {
   Query : {
      greeting: () => 'Hello GraphQL  From finddevguides !!'
   }
}
const {makeExecutableSchema} = require('graphql-tools')

const schema = makeExecutableSchema({typeDefs:typeDefinition, resolvers:resolverObject})

const {graphqlExpress,graphiqlExpress} = require('apollo-server-express')

app.use('/graphql',graphqlExpress({schema}))
app.use('/graphiql',graphiqlExpress({endpointURL:'/graphql'}))
app.listen(port, () =>  console.log(`server is up and running ${port}`))

ステップ6-アプリケーションを開始する

次のようにNode.jsを使用して server.js を実行します-

C:\Users\Admin\hello-world-server>node server.js

ステップ7-GraphQL APIをテストする

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

{
   greeting
}

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

{
   "data": {
      "greeting": "Hello GraphQL From finddevguides !!"
   }
}

次の画像は、応答を示しています-

GraphQL APIのテスト

注-Apollo Serverバージョン1.0が使用されていることを確認してください。

Graphql-example