Simple GraphQL ด้วย Nodejs

programming May 06, 2020
ตัวอย่าง การดึงข้อมูลด้วย 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

โครงสร้าง Project

- graphQL
  - dataMock.js
  - schema.js
  - rootValue.js
- simpleNode
  - app.js

- ใน dataMock.js

ในที่นี้เป็นการ mock data ขึ้นมา
//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
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"      
      }
    ]
  }
}


Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.