大綱

GraphQL

GraphQL

新方法, 不用 http, https, 但更簡單, 讓 client 或程式端決定回傳值(結果)

* 裡用 GraphQL client 測試結果.

* 只要定義 Schema

* 更適合手機端軟體向 server 索取資料. (因為你可以用程式選擇下載的資料項目, 挑你想顯示的資料就好.)

* 只用 JSON 格式就好.

RESTful API

最常用的 API 介面, 利用 http, https 方法存取資料

* 固定寫好回傳值

* 利用 GET 抓資料

* 利用 PUT 或 POST 更新資料

* 利用 DELETE 刪除資料

* 用 JSON 或 XML 格式

RESTful API 是什麼?

API 是 

(Application Programming Interface 的縮寫)

讓別人程式可以叫用你提供的 service (服務), 

通常都回傳 JSON 格式的結果

可用 curl 指令測試

也可用Chrome 的 plugin: Postman 來測試

你可以用別人的 API, 也可以提供 API 給別人用, (或手機用)

GraphQL Client

demo

http://graphql-api-gcorzaaoag.now.sh

安裝一個 GraphQL

先開個帳號 in

https://www.prisma.io/

https://www.prisma.io/docs/1.0/quickstart/

步驟一, 先有 Prisma 帳號

步驟二, 安裝 prisma 指令 

步驟三, 

prisma init hello-world

(如右圖)

新部署

https://eu1.prisma.sh/ming-der-wang-e80def/homeworks-deadline/dev

修改 schema, 再次部署

prisma deploy

datamodel.graphql

type User {
  id: ID! @id
  name: String!
}

部署後會得到一個

https://us1.prisma.sh/ming-der-wang-e80def/hello-world/dev

Create An User

增加一個 User

# Create a new user
mutation {
  createUser(data: {
    name: "Mary"
  }) {
    id
  }
}

得到的回應

{
  "data": {
    "createUser": {
      "id": "cjiemx8ot9e9m0b73bu3xlhjr"
    }
  }
}

Delete An User by ID

刪除一個 User

# Delete an user
mutation {
  deleteUser(where: {
    id: "cjiemx8ot9e9m0b73bu3xlhjr"
  }) {
    id
  }
}

得到回應

{
  "data": {
    "deleteUser": {
      "id": "cjiemx8ot9e9m0b73bu3xlhjr"
    }
  }
}

Find Users

找所有 Users, 回應 id 跟 name

Find Users

找所有 Users, 回應 name 就好

Find Users with name Ming

users(where: { name: "Ming" })

以第一組, 作業或考試通知軟體為例

datamodel.graphql

type Exam {
  id: ID! @id

  title: String!

  createdAt: DateTime!
  dueDate: DateTime!
}

Create A New Exam

增加一個考試

mutation {
  createExam(data: {
    title: "Final Exam"
    dueDate: "2018-06-30T10:15:30Z"
  }) {
    id
    title
    createdAt
    dueDate
  }
}

回應

{
  "data": {
    "createExam": {
      "id": "cjiep8vamb5tc0a867ec74jji",
      "title": "Final Exam",
      "createdAt": "2018-06-14T15:28:50.549Z",
      "dueDate": "2018-06-30T10:15:30.000Z"
    }
  }
}

Update An Old Exam

修改一個 Exam

修改一個考試

mutation {
  updateExam(
    data: { title: "Final Exam 2", dueDate: "2018-06-30T10:15:30.000Z" }
    where: { id: "cjiep8vamb5tc0a867ec74jji" }
  ) {
    id
    title
    createdAt
    dueDate
  }
}

回應

{
  "data": {
    "updateExam": {
      "id": "cjiep8vamb5tc0a867ec74jji",
      "title": "Final Exam 2",
      "createdAt": "2018-06-14T15:28:50.549Z",
      "dueDate": "2018-06-30T10:15:30.000Z"
    }
  }
}

刪除一個 Exam

刪除一個考試

mutation {
  deleteExam(
    where: { id: "cjiep8vamb5tc0a867ec74jji" }
  ) {
    id
    title
    createdAt
    dueDate
  }
}

回應

{
  "data": {
    "deleteExam": {
      "id": "cjiep8vamb5tc0a867ec74jji",
      "title": "Final Exam 2",
      "createdAt": "2018-06-14T15:28:50.549Z",
      "dueDate": "2018-06-30T10:15:30.000Z"
    }
  }
}

沒有考試了

exams: [] (空 Array 表示沒東西)

查詢所有考試

query {
  exams {
    id
    title
    createdAt
    dueDate
  }
}

回應

{
  "data": {
    "exams": []
  }
}

查詢, 在哪一天之前的所有 Exams

query {
  exams(where: { dueDate_lte:
    "2018-07-20T10:15:30.000Z" })
    {
    id
    title
    dueDate
  }
}

查詢 7/20 之前的 Exam, 結果是

這樣夠嗎？ 錯在哪裡?

query {
  exams(
    where: {
      AND: [
        { dueDate_lte: "2018-07-20T10:15:30.000Z" }
        { dueDate_gt: "2018-06-20" }
      ]
    }
  ) {
    title
    dueDate
  }
}

{
  "data": {
    "exams": [
      {
        "title": "Final Exam 1",
        "dueDate": "2018-06-30T10:15:30.000Z"
      },
      {
        "title": "Ming Final Exam",
        "dueDate": "2018-06-29T00:00:00.000Z"
      }
    ]
  }
}

正解：

整個架構如下

expo

node, next

prisma

next + apollo

web app

本週作業

試做你的專題程式, 下下週 demo 給別組看.