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

回到專案上，接著要建立GraphQL Server，用於接收graphql指令並解析，回傳相應的資訊，這裡用的是Apollo server。

(圖片來源: Apollo Server Introduction)

Apollo server在建立上算是相當便利，而且可以同時銜接多個不同資料來源，包含既有的REST API，或是資料庫，並將不同資料來源間的關聯用 GraphQL Schema 定義，縫合成一張完整的關聯圖，好讓收到的GraphQL指令能依據這張關聯圖找到需求的資訊。

啟動後端專案

這邊在之前的前端client資料夾旁邊新建一個server資料夾，並在裡面啟動Node專案，安裝apollo server

mkdir server
cd server
npm init --yes
npm install apollo-server graphql

然後在專案目錄下建立index.js，並引入apollo server:

//index.js
const { ApolloServer, gql } = require('apollo-server');

定義資料形別

GraphQL服務最開始都必須定義資料型別，並且之後收到的GraphQL指令都會根據這個型別定義判定查找的資料欄位是否存在、型別是否正確。

GraphQL型別定義以字串撰寫:

//index.js
const typeDefs = gql`

  # 定義List資料包含 id跟 title欄位，以及各自的型別
  type List {
    id: ID
    title: String
  }

  # 定義Todo資料包含 id跟 name欄位
  type Todo {
    id: ID
    name: String
  }

  #定義可執行的 query
  type Query {
    #定義query lists 指令，回傳為List陣列
    lists: [List]
  }
`;

gql 是個辨認字串為GraphQL 型別定義的標籤，不加也可以，不過有的話VS Code會幫助標色。

上面定義了 List，Todo兩種資料類別，並替各自的欄位加上型別限制，目前還未加上兩者間的關聯，稍後會加。

Query

除了資料類別外， QraphQL型別定義中有兩個特別的類別， query 跟 mutation。

• query: 代表查詢資料
• mutation: 代表更改資料，包含新建、更新及刪除

從客戶端發送的QraphQL指令都會以query或mutation起頭，然後從typeDefs中選擇可以進行的操作，像是

  #定義可執行的 query
  type Query {
    #定義query lists 指令，回傳為List陣列
    lists: [List]
  }

這邊定義目前可執行的query指令，只有lists，並且定義接收指令回傳的資料類別，會是包含一組List的陣列。

定義 Resolver

剛剛定義的只是型別，並不包含實際指令的處理方式，而這個處理方式的部分，是以resolvers查詢表的方式撰寫。

首先加點假資料

//index.js
const lists = [
  {
    id: 1,
    title: "list1",
  },
  {
    id: 2,
    title: "list2",
  },
];

const todos = [
  { id: 1, name: "todo1", listId: 1 },
  { id: 2, name: "todo2", listId: 1 },
  { id: 3, name: "todo3", listId: 2 },
  { id: 4, name: "todo4", listId: 2 },
  { id: 5, name: "todo5", listId: 2 },
];

然後 resolvers的部分:

const resolvers = {
  Query: {
    lists: () => lists,
  },
};

resolver物件中首要就兩個Key，也就是 Query跟Mutation，對應 typeDefs中的 query,mutation。

在Query跟Mutation中也要對應typeDefs，定義每個指令對應的function，像這邊定義收到Query lists指令後，經由Query、lists查到function，回傳剛剛建好的lists假資料。

建立 Server

有了typeDefs跟resolvers後，就能用於建立Apollo server

const server = new ApolloServer({ typeDefs, resolvers });

server.listen().then(({ url }) => {
  console.log(`Server ready at ${url}`);
});

注意typeDefs跟resolvers是包成一個物件作為server的參數，ApolloServer 會將收到的typeDefs、resolvers合併成為 GraphQL Schema。如果只提供已經建好的Schema給ApolloServer，也是可以的。

到這邊Server已經準備好啟動了，順手加個nodemon後執行

nodemon index.js

可以到瀏覽器開啟指定localhost:port看看，能看到像這樣的畫面:

這是 graphql-playground的套件生成的IDE介面，供開發者驗證GraphQL指令與Server的回傳，許多server框架都有導入這個IDE。

可以在左邊寫入GraphQL指令並執行，觀察右邊的回傳

# GraphQL指令 
query {
  lists {
    id
    title
  }
}

如果自己輸入指令的話會發現graphql-playground很貼心的提示目前可以用的指令、需求欄位有哪些，如果還不確定的話，可以打開右側的Docs、顯示目前Server上定義的Schema標籤，顯示目前Server上定義的Query方法有哪些、Schema長怎樣。

到這邊先建立最基礎的Apollo GraphQL Server，接著要加強GraphQL Schema，並串接資料庫以滿足仿Trello的需求。

References:

• Get started with Apollo Server - Apollo Server