ทำ GraphQL ด้วย Nodejs

ตัวอย่าง การดึงข้อมูลด้วย GraphQL

GraphQL

“query language for APIs and a runtime for fulfilling those queries with your existing data”

  • แบบบ้านๆ > ตัวกลางที่คั่นระหว่าง cilent กับ server site นำข้อมูลจากฝั่ง server site มาจัดรูปแบบใหม่ ให้ออกมาในรูปแบบที่ cilent ต้องการนำมาแสดง

หลักๆที่จะใช้ ปลากรอบไปด้วย

  • schema ตัว กำหนด datatype ของ แต่ละ ตัวแปรที่เราต้องการแสดง
  • rootValue เปรียบเหมือน ตัว controller สำหรับ เรียกใช้ แต่ละ Query ที่เราเตรียมข้อมูลไว้ ใน schema
-|graphQL
  |- dataMock.js
  |- schema.js
  |- rootValue.js
-|simpleNode
  |- app.js

ใน dataMock.js

//dataMock.js
const data = [
    {
      firstname: 'Mr. A',
      lastname: 'lastname A',
    },
    {
        firstname: 'Mr. B',
        lastname: 'lastname B',
    }
  ]

module.exports = data

ใน schema.js

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

var schema = graphql.buildSchema(`
  type User {
    firstname : String
    lastname : String
  }
  type Query {
    getData: [User] //ถ้าไม่ใส่ [] จะออก ค่าเดียว
  }
`);


module.exports = schema

ใน rootValue.js

//rootValue.js
const data = require('./dataMock') // data ที่ mock

var rootResolver = {
    getData: () => data,
};

module.exports = rootResolver;

getData: () => data เป็นการเรียกใช้ Query ที่เรา กำหนดใน schema

ใน app.js

# package ที่ใช้
- express
- express-graphql

Step 1 install

yarn

$ yarn init
$ yarn add express express-graphql

npm

$ npm init
$ npm install --save express express-graphql

// app.js
const express = require('express')
var expressGraphQL = require('express-graphql');

//---
const schema = require('./schema.js')
const rootResolver = require('./root.js')

const app = express()
app.use('/graphQL', expressGraphQL({
    schema: schema,
    rootValue : rootResolver
}))

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

import schema , rootResolver

จากนั้น

$ node app.js
App listening on port 3000

ทดสอบด้วย curl

รูปแบบ ที่จะส่งไป จะเป็นการ ดึงข้อมูล จาก column firstname,lastname

{ 
  <Query> { <- ชื่อ Query ที่กำหนด ใน root
    <column>  <- column ที่ต้องการนำมา แสดง
  } 
}

ทำการ curl ไปใน method POST ไปที่ http://localhost:3000/graphQL

# ใน รูปแบบ graphQL
{ 
  getData { 
    firstname
    lastname
  } 
}

$ curl -X POST \
-H "Content-Type: application/json" \
-d '{"query": "{ getData{ firstname lastname } }"}' \
http://localhost:3000 | jq
...

{
  "data": {
    "getData": [
      {
        "firstname": "Mr. A",
        "lastname": "lastname A"
      },
      {
        "firstname": "Mr. B",
        "lastname": "lastname B"
      }
    ]
  }
}

ดึงแค่ firstname

# ใน รูปแบบ graphQL
{ 
  getData { 
    firstname
  } 
}

$ curl -X POST \
-H "Content-Type: application/json" \
-d '{"query": "{ getData{ firstname } }"}' \
http://localhost:3000 | jq
...

{
  "data": {
    "getData": [
      {
        "firstname": "Mr. A"
      },
      {
        "firstname": "Mr. B"      
      }
    ]
  }
}

อื่นๆ

Back