[A-00207] GraphQL Journey

graphQLの入門用と掘り下げて学習する為の記事です。

・ExpressでGraphQLを実装してみる(Node.js)

とりあえず関連するライブラリをインストールします。

npm install graphql express express-graphql -save

下記がソースコードになります。

const express = require('express');
const { graphqlHTTP } = require('express-graphql');
const expressGraphQL = require('express-graphql').graphqlHTTP;
const { buildSchema } = require('graphql');

const appServer = express();
// GraphQL schema
var schema = buildSchema(`
 type Query {
 message: String
 }
`);
// Root resolver
var root = {
 message: () => 'Hello World!'
};
// Create an express server and a GraphQL endpoint
appServer.use('/graphql', expressGraphQL({
 schema: schema,
 rootValue: root,
 graphiql: true
}));
appServer.listen(4000, () => console.log('Express GraphQL Server Now Running On localhost:4000/graphql'));

$ node server.js 
Express GraphQL Server Now Running On localhost:4000/graphql

webブラウザで[localhost:4000/graphql]にアクセスすると下記の通り、GUIベースでGraphQLを使うことができます。

・パラメータを受け取り返す値を変える(Node.js)

リクエストパラメータをGraphQLに渡してその結果を受信するようにしたいので別のサーバーを作成してみます。

const express = require('express');
const expGql = require('express-graphql').graphqlHTTP;
const { buildSchema } = require('graphql');

const appServer = express();

var schema = buildSchema(`
    type Query {
    person(name: String!): Person
    },
    type Person {
    name: String,
    age: Int,
    country: String
    }
    `);

var personData = [
    {
        name: 'David Schott',
        age: 14,
        country: "United States"
    },
    {
        name: 'Satoshi Yoshida',
        age: 15,
        country: "Japan"
    },
    {
        name: 'Jackson Lee',
        age: 16,
        country: "England"
    }
]

var getPerson = function(args) {
    var name = args.name;
    return personData.filter(person => {
        return person.name == name;
    })[0];
};

var root = {
  person: getPerson   
};

appServer.use('/graphql', expGql({
    schema: schema,
    rootValue: root,
    graphiql: true
}));

appServer.listen(4000, () => console.log('GqlServer is running...'));

ウェブブラウザで操作すると下記のようになります。

query getPerson($name: String!) {
  person(name: $name) {
  name
  age
  country
  dept
 }
}

{
  "name": "Jackson Lee"
}

・グルーピングされた結果を受け取る

次に特定のプロパティでグループ化できるSchemaデータを取得してみる

const express = require('express');
const express_gql = require('express-graphql').graphqlHTTP;
const { buildSchema } = require('graphql');

const appServer = express();

var schema = buildSchema(`
    type Query {
    person(name: String!): BusinessPerson
    department(dept: String!): [BusinessPerson]
    },
    type BusinessPerson {
    name: String,
    age: Int,
    country: String,
    dept: String
    }
    `);

    var businessPersonData = [
        {
            name: 'David Schott',
            age: 14,
            country: "United States",
            dept: "dept1"
        },
        {
            name: 'Satoshi Yoshida',
            age: 15,
            country: "Japan",
            dept: "dept1"
        },
        {
            name: 'Jackson Lee',
            age: 16,
            country: "England",
            dept: "dept2"
        }
    ]

    var getPerson = function(args) {
        var name = args.name;
        return businessPersonData.filter(person => {
            return person.name == name;
        })[0];
    }

    var getDepartment = function(args) {
        if (args.dept) {
            var dept = args.dept;
            return businessPersonData.filter(person => {
                return person.dept == dept;
            });
        } else {
            return businessPersonData;
        }
    }
    
    var root = {
      person: getPerson,
      department : getDepartment   
    };
    
    appServer.use('/graphql', express_gql({
        schema: schema,
        rootValue: root,
        graphiql: true
    }));
    
    appServer.listen(4000, () => console.log('GqlServer is running...'));

query getBPersons($dept: String!) {
  department(dept: $dept) {
    name
    age
    country
    dept
  }
}

{
  "dept": "dept1"
}

下記が実際に動かした結果になります。

・Appendix

参考文献はこちら

https://dev.classmethod.jp/articles/graphql-tutorial-nodejsexpress

https://zenn.dev/goemon/articles/6b8d1280280c6d

https://qiita.com/kim_t0814/items/c6ef7e3c668007f920a6

https://techplay.jp/column/1619

https://stackoverflow.com/questions/65517979/expressgraphql-is-not-a-function

https://zenn.dev/yoshii0110/articles/2233e32d276551