iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 17
1
Modern Web

Think in GraphQL系列 第 17

GraphQL 入門: Apollo Mock - 做假資料好測試~

header

今天簡單介紹一下 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
}

img

使用 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
  }
}

可以得到結果下圖:

img

如果你多送幾次就會發現陣列的長度會在 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
  }
}

結果如圖:
img

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


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

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


上一篇
GraphQL 入門: Interface & Union Type 的多型之旅
下一篇
GraphQL Design: 使用 DataLoader 提升效能 !
系列文
Think in GraphQL30

尚未有邦友留言

立即登入留言