Graphql-example
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 と入力すると、次の画面が表示されます-
サーバーを停止するには、 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 !!"
}
}
次の画像は、応答を示しています-
注-Apollo Serverバージョン1.0が使用されていることを確認してください。