今天簡單介紹一下 Apollo 的一個測試神器! Mocking~~
很多時候我們後端的開發速度趕不上前端的需求,我們這時候就需要一些假資料先讓前端可以跑或是測試,
因此可以考慮使用 Apollo 的一項功能: Mocking
步驟為
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
}
在 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 設計 、安全因素等等~~