本系列文以製作專案為主軸，紀錄小弟學習React以及GrahQL的過程。主要是記下重點步驟以及我覺得需要記憶的部分，有覺得不明確的地方還請留言多多指教。

在跟資料庫做串聯前，先來深入了解一下graphQL的 Schema寫法。

Schema

借用上一篇建立的typeDefs，介紹Schema構成:

type List {
    id: ID
    title: String
}

type Todo {
    id: ID
    name: String
}

數值型別 Scalar types

Apollo server的預設型別，對應到純量資料如數值、字串等。

共五種預設型別:

• Int
• Float
• String
• Boolean
• ID

物件型別 Object types

一個物件型別會包含複數欄位，像是List 包含 id， title欄位，並且需定義各欄位的數值型別。

type List {
    id: ID
    title: String
}

除了數值型別，也能定義欄位的形別為其他物件形別，或是其他物件形別的陣列。

以List為例，一個List會包含複數Todo，所以定義一個todos欄位，該欄位的型別為Todo陣列。

type List {
    id: ID
    title: String!
    todos: [Todo]   #欄位形別為Todo陣列
}

type Todo {
    id: ID
    name: String!
}

Query

上篇有提到，API收到query指令會根據Schema的Query定義做形別判定，包含傳入的參數、回傳物件的型別，都要定義。

type Query {
    lists: [List]
    todo(id: ID!): Todo
}

對應的請求指令:

query {
  lists {
    id
    title
    todos{
      id
      name
    }
  }
  todo(id : 2){
    name
  }
}

複習GraphQL的特性之一，可以一個請求同時進行複數query，像上面同時進行了lists、todo 的 query。

Mutation

跟Query型別類似，差別在於Query用於讀，Mutation用於寫。

type Mutation {
    addTodo(id: ID!, name: String!, listId: ID!): Todo
}

對應的請求指令:

mutation{
  addTodo(id:7 ,name:"todo7",listId:2){
    id 
    name
  }
}

non-nullable

可以看到某些欄位型別被加上驚嘆號，代表這個欄位不能為null值。

用在請求時的參數上代表這個參數不得為空。

而在回傳data時若有non-nullable欄位，該欄位值不得為空。

Input

如果某些query或mutation需求的參數是相同的，可以打包成Input形別，在參照利用。

type Mutation {
    addTodo(params: addTodoParams): Todo
}

input addTodoParams {
    id: ID!
    name: String!
    listId: ID!
}

請求指令變成:

mutation{
  addTodo(params: {id:7 ,name:"todo7",listId:2}){
    id 
    name
  }
}

References:

• Schema basics - Apollo Server
• Schemas and Types - GraphQL