GraphQL-例

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

例

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

ステップ1-Expressの設定

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

次のステップはフォルダを作成することです 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がHTTPPostリクエストを効率的に処理するのに役立つミドルウェアパッケージです。corsは、クロスオリジンリソースシェアリングを処理するもう1つのミドルウェアパッケージです。

作成する 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

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

server is up and running at 9000

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

サーバーを停止するには、を押します 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
   }

ここで、クエリには文字列値を返す挨拶属性が含まれています。

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

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

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

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 TutorialsPoint !!'
   }
}
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-アプリケーションを起動します

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

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

ステップ7-GraphQLAPIをテストする

ブラウザを開いて入力します http://localhost:9000/graphiql。GraphiQLのクエリタブで、次のように入力します-

{
   greeting
}

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

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

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

Note − ApolloServerバージョン1.0が使用されていることを確認してください。