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

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

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

npm init --y

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

npmパッケージをインストールしますexpressgraphqlそして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、次にを使用してオブジェクト破壊構文私たちはGraphQLSchemaGraphQLObjectTypeそして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チュートリアル: