iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 5
1

介紹
GraphiQL ApolloData 有提供一個提供網頁可以直接打 Json payload 的功能 ,這個界面也有提供 GraphQL API 可以查詢非常的方便,尤其在開發階段非常好用,另外除了 ApolloData 提供的 GraphiQL 這邊也介紹兩套幫忙開發時期會用的好工具

https://ithelp.ithome.com.tw/upload/images/20171211/20103438u73Oiiil3y.png

安裝 apollo-server-express

express設定省略
const { graphqlExpress, graphiqlExpress } = require('apollo-server-express');

server.use(
		'/graphql',
		bodyParser.json(),
		graphqlExpress(async (req) => {
			return {schema: MySchema};
		})
	);
	server.use(
		'/graphiql',
		graphiqlExpress({endpointURL: '/graphql'})
	);

這邊 endpoint /graphiql 的 graphiqlExpress (注意多一個小i) 要設定一個 endpointURL 對應到原本的唯一開放的 /graphql ,只要 graphqlExpress 裡面的 Schema 沒問題這樣就設定完成了 ,這個WEB 介面上就可以查詢也可以帶參數,介面右邊上方也提供一個 DOC 可以查詢 API 很方便,後端定義 Schema 就可以在這邊查詢到

繼續開發到認證階段的時候可能要塞一些 Header Token 這時候再來介紹另外一套可以像 PostMan 那樣可以塞參數的工具 https://github.com/skevy/graphiql-app 這套可以使用 Header

https://ithelp.ithome.com.tw/upload/images/20171211/20103438iDtLkd6Whu.png

通常會在認證的時候寫入Token 這時候原本的 GraphiQL 就比較不方便了,這套就可以在寫驗證時需要塞入Token Header 的好幫手,跟介面多一個右上角藍色的 Edit HTTP Headers

如果是使用 VsCode 的話這邊在介紹另外一套擴充套件 rest-client (神器)
https://marketplace.visualstudio.com/items?itemName=humao.rest-client

https://ithelp.ithome.com.tw/upload/images/20171211/20103438wB6h8idQMO.png

這一套就類似 PostMan 但是用文字來取代設定,如果在 VsCode 想要看到結果可以直接看到查詢的結果,開發速度會加快。 rest-client 使用的時候要注意格式(尤其是不要隨便斷行留空白),看結果很方便但是就沒有 API 文件可以參考了

總結

在開發階段除了 GraphiQL,如果需要進一步使用 Token 可以使用 IDE 版的 GraphiQL,如果習慣文字介面想要更快 可以考慮使用 rest-client (推)


上一篇
ApolloData Server & Auth
下一篇
ApolloData Client 基本設定
系列文
GraphQL + ApolloData 入門30

尚未有邦友留言

立即登入留言