今天簡單介紹一下 Apollo 的一個測試神器！ Mocking~~

很多時候我們後端的開發速度趕不上前端的需求，我們這時候就需要一些假資料先讓前端可以跑或是測試，
因此可以考慮使用 Apollo 的一項功能: Mocking

步驟為

1. 定義 Mock Object
2. 將 Mock Object 放進 Apollo Server 的初始化參數中

const { ApolloServer, gql } = require('apollo-server');

const typeDefs = gql`
type Query {
  hello: String
  getString: String
  getInt: Int
  getFloat: Float
}
`;

const resolvers = {
  Query: {
    hello: () => 'Not used',
  },
};

const mocks = {
  Int: () => 6,
  Float: () => 22.1,
  String: () => 'Hello',
};

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

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

可以看到上面的程式碼，我們並沒有實際實作 resolver function 的功能，但是透過 Mocking 可以輕鬆獲取資料！
讓我們輸入 query 測試看看吧

query {
  hello
  getString
  getInt
  getFloat
}

使用 MockList 來製作隨機 Array 資料

在 GraphQL 中一定會用到許多陣列資料，而 MockList 可以幫助我們模擬陣列資料的取得！

見程式碼:

const { ApolloServer, gql, MockList } = require('apollo-server');

const typeDefs = gql`
+ type Person {
+   name: String
+   age: Int
+ }

type Query {
  hello: String
  getString: String
  getInt: Int
  getFloat: Float
+  people: [Person]
}
`;

const resolvers = {
  Query: {
    hello: () => 'Not used',
  },
};

const mocks = {
  Int: () => 6,
  Float: () => 22.1,
  String: () => 'Hello',
+  Query: () =>({
+    people: () => new MockList([0, 12]),
+  }),
};

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

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

此時送出 Query 測試

{
  people {
    name
    age
  }
}

可以得到結果下圖：

如果你多送幾次就會發現陣列的長度會在 0 - 12 之間隨機選擇～模擬在正式環境中不確定的資料數量。

而看過以上的範例就可以發現，其實 Mock 也就是一個 GraphQL resolver ，只是會攔截原本設計的 Resovler 改由 Mock Resolver 執行。因此 Mock Resolver 也可以吃參數！

先修改一下 Schema

type Person {
  name: String
  age: Int
}

type Query {
  hello: String
  getString: String
  getInt: Int
  getFloat: Float
+  people(first: Int): [Person]
}

在 GraphQL 中 first 常被用來當作「要回傳多少數量」的參數名稱～
接下來看 Mock 物件：

const mocks = {
  Int: () => 6,
  Float: () => 22.1,
  String: () => 'Hello',
  Query: () =>({
+    people: (root, { first }, context) => {
+      if (first) {
+        return new MockList([0, first])
+      }
+      return new MockList([0, 12])
+    }
+  }),
};

可輸入 query 測試：

query {
  people(first: 3) {
    name
    age
  }
}

結果如圖：

多測試幾次會發現數量真的絕對不會超過 3!

今天差不多介紹這個小工具～

明天會開始介紹 GraphQL 比較中階以後的功能如分頁、 Schema 設計 、安全因素等等～～