[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"
}

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

・PythonでGraphql使う

pythonでgraphqlを使ってみます。

とりあえず簡単なプログラムを作ります。

mkdir sample-graphql-api
cd sample-graphql-api
python3 python3 -m venv .venv
. ./.venv/bin/activate
pip install fastapi
pip install uvicorn
pip install sqlalchemy
pip install strawberry-graphql

次にmain.pyを作成する

touch main.py
chmod 777 main.py

ソースコードは下記の通り

import strawberry
from fastapi import FastAPI
from strawberry.asgi import GraphQL


@strawberry.type
class User:
     name: str
     age: int

@strawberry.type
class Query:
    @strawberry.field
    def user(self) -> User:
         return User(name="Yayoi", age=21)
     
schema = strawberry.Schema(query=Query)

graphql_app = GraphQL(schema)

app = FastAPI()

app.add_route("/graphql", graphql_app)

下記のコマンドでgraphqlを起動する