Node.jsとExpressを使用してGraphQLサーバーを作成する方法

Node.jsとExpressを利用したGraphQLサーバーを作成する方法に関する簡単なチュートリアル

まだセットアップしていない場合は、新しいNode.jsプロジェクトを作成することから始めます。

npm init --y

このコマンドは、package.json使用する必要のあるファイルnpm。

npmパッケージをインストールしますexpress、graphqlそしてexpress-graphql：

npm install express graphql express-graphql

作成するapp.jsファイル、そして初期化から始めましょうExpressサーバ：

const express = require('express')

const app = express()


app.listen(3000, () => {
console.log(‘App listening on port 3000’)
})

今、私たちは追加しますexpress-graphql。これはミドルウェア、そしてそれをルートだけに適用します/graphqlルート：

const express = require('express')
const graphqlHTTP = require('express-graphql')

const app = express()


app.use(’/graphql’, graphqlHTTP())


app.listen(3000, () => {
console.log(‘App listening on port 3000’)
})

を含むオブジェクトを渡す必要がありますschemaプロパティ。これには、スキーマ定義。

最初にスキーマを定義する必要があります！

作成するschema.jsファイル、そしてそこに私たちは最初に必要ですgraphql、次にを使用してオブジェクト破壊構文私たちはGraphQLSchema、GraphQLObjectTypeそしてGraphQLStringすぐに使用する必要があるオブジェクト：

const graphql = require('graphql')
const { GraphQLSchema, GraphQLObjectType, GraphQLString } = graphql

次に、新しいスキーマ値を初期化してスキーマ値を定義しますGraphQLSchemaインスタンス、を含むオブジェクトを渡すqueryプロパティ。このプロパティは、GraphQLObjectTypeオブジェクト：

const schema = new GraphQLSchema({
  query: new GraphQLObjectType({
    //...
  }),
})

module.exports = schema

この新しいオブジェクト内で、name、およびfieldsパラメーター。この最後のプロパティは、スキーマの各フィールドに1つずつ、一連のプロパティを含むオブジェクトです。この例では、helloフィールド：

const schema = new GraphQLSchema({
  query: new GraphQLObjectType({
    name: 'RootQueryType',
    fields: {
      hello: {
        type: GraphQLString,
        resolve() {
          return 'world'
        },
      },
    },
  }),
})

ザ・resolve()メソッドは文字列を返しますworld、つまり、helloフィールドでは、その文字列を取り戻します。

これが完全ですschema.jsファイルの内容：

const graphql = require('graphql')
const { GraphQLSchema, GraphQLObjectType, GraphQLString } = graphql

const schema = new GraphQLSchema({
query: new GraphQLObjectType({
name: ‘RootQueryType’,
fields: {
hello: {
type: GraphQLString,
resolve() {
return ‘world’
},
},
},
}),
})


module.exports = schema

さて、私たちに戻りましょうapp.jsファイル。

これは私たちが持っていたものです：

const express = require('express')
const graphqlHTTP = require('express-graphql')

const app = express()


app.use(’/graphql’, graphqlHTTP())


app.listen(3000, () => {
console.log(‘App listening on port 3000’)
})

私たちは今、schema.jsファイル：

const schema = require('./schema.js')

それをオブジェクトに追加して、graphqlHTTP()コンストラクタ：

app.use(
  '/graphql',
  graphqlHTTP({
    schema: schema,
  })
)

OK！

これをテストして、機能するかどうかを確認できます。使用できますGraphiQL、GraphQLAPIをテストするための優れたツールです。

すでにインストールされており、それを有効にするには、別のプロパティをに渡す必要がありますgraphqlHTTPコンストラクタ：

app.use(
  '/graphql',
  graphqlHTTP({
    schema: schema,
    graphiql: true,
  })
)

今あなたが走った後node app.js、アクセスhttp://localhost:3000/graphqlGraphiQLの動作を確認できるブラウザのURL：

そして、次のクエリを渡して、最初のAPI呼び出しをテストできます。

{
  hello
}

結果は次のとおりです。

より複雑なスキーマを作成してみましょう。

ネストされたタイプを持つもの。

私が考えている例はブログ投稿です。

ブログ投稿にはタイトルと説明があり、作成者もいます。作者には名前があります。

これを理解しましょう。

まず、投稿と作成者のセットを追加します。

const posts = [
  {
    title: 'First post',
    description: 'Content of the first post',
    author: 'Flavio',
  },
  {
    title: 'Second post',
    description: 'Content of the second post',
    author: 'Roger',
  },
]

const authors = {
Flavio: {
name: ‘Flavio’,
age: 36,
},
Roger: {
name: ‘Roger’,
age: 7,
},
}

ここからデータを取得します。

Next, we define 3 GraphQLObjectTypeインスタンス：

  • authorType、著者データを定義します
  • postType、投稿データを定義します
  • queryType、メインのもの

著者から始めましょう。著者には名前と年齢があります。

私たちは使用しますGraphQLIntタイプ。requireに追加する必要があります。

const { GraphQLSchema, GraphQLObjectType, GraphQLString, GraphQLInt } = graphql

//…

const authorType = new GraphQLObjectType({
name: ‘Author’,
fields: {
name: {
type: GraphQLString,
},
age: {
type: GraphQLInt,
},
},
})

次はpostType。投稿には、タイトル、説明（両方の文字列）、および作成者が含まれます。著者はタイプですauthorType、定義したばかりで、リゾルバーがあります。

著者名はsourceパラメータは、postオブジェクトに渡されるパラメータであり、それに基づいて作成者データを検索します。返品いたします。

const postType = new GraphQLObjectType({
  name: 'Post',
  fields: {
    title: {
      type: GraphQLString,
    },
    description: {
      type: GraphQLString,
    },
    author: {
      type: authorType,
      resolve: (source, params) => {
        return authors[source.author]
      },
    },
  },
})

リゾルバー関数は非同期にすることができるため、async / awaitを使用してデータベースまたはネットワークからリソースを検索できることに注意してください。

次はqueryTypeです。これは、スキーマに追加するルートタイプです。そこで、2つのフィールドを定義します。

  • postIDで識別される単一のブログ投稿
  • posts投稿のリスト

どちらにも、データを検索するためのリゾルバー関数があります。postsアレイ：

const queryType = new GraphQLObjectType({
  name: 'Query',
  fields: {
    post: {
      type: postType,
      args: {
        id: { type: GraphQLInt },
      },
      resolve: (source, { id }) => {
        return posts[id]
      },
    },
    posts: {
      type: new GraphQLList(postType),
      resolve: () => {
        return posts
      },
    },
  },
})

新しいことに注意してくださいGraphQLListラップに使用するタイプpostTypeそれがのリストであることを意味するpostTypeオブジェクト。私たちはそれを上に要求しなければなりません：

const {
  GraphQLSchema,
  GraphQLObjectType,
  GraphQLString,
  GraphQLList,
  GraphQLInt,
} = graphql

それでおしまい。私たちはそれを私たちに追加する必要がありますschemaそして、私たちは設定されています：

const schema = new GraphQLSchema({
  query: queryType,
})

完全なコードは次のとおりです。

const graphql = require('graphql')
const {
  GraphQLSchema,
  GraphQLObjectType,
  GraphQLString,
  GraphQLList,
  GraphQLInt,
} = graphql

const posts = [
{
title: ‘First post’,
description: ‘Content of the first post’,
author: ‘Flavio’,
},
{
title: ‘Second post’,
description: ‘Content of the second post’,
author: ‘Roger’,
},
]


const authors = {
Flavio: {
name: ‘Flavio’,
age: 36,
},
Roger: {
name: ‘Roger’,
age: 7,
},
}


const authorType = new GraphQLObjectType({
name: ‘Author’,
fields: {
name: {
type: GraphQLString,
},
age: {
type: GraphQLInt,
},
},
})


const postType = new GraphQLObjectType({
name: ‘Post’,
fields: {
title: {
type: GraphQLString,
},
description: {
type: GraphQLString,
},
author: {
type: authorType,
resolve: (source, params) => {
return authors[source.author]
},
},
},
})


const queryType = new GraphQLObjectType({
name: ‘Query’,
fields: {
post: {
type: postType,
args: {
id: { type: GraphQLInt },
},
resolve: (source, { id }) => {
return posts[id]
},
},
posts: {
type: new GraphQLList(postType),
resolve: () => {
return posts
},
},
},
})


const schema = new GraphQLSchema({
query: queryType,
})


module.exports = schema

グリッチの完全なコードを参照してください。


その他のgraphqlチュートリアル：


Tech Wiki Online！