介紹
在開始玩 GraphQL 之前先來架設一個SERVER,這時候可以選用官方提供的 GraphQL Server 或是 ApolloData 提供的 Server 也可以選用一些 雲端服務 例如 https://www.graph.cool/ 來代理 Server part部分
比較 官方的 GraphQL VS ApolloData Server 安裝
官方的 GraphQL
server.js
import express from 'express';
import bodyParser from 'body-parser';
import { graphql } from 'graphql';
app.use(bodyParser.text({
type: 'application/graphql'
}));
app.post('/graphql', (req, res) => {
graphql(schema, req.body).then((result) => {
res.send(JSON.stringify(result));
});
});
EXPRESS 設定以下省略
ApolloData Server
server.js
EXPRESS 設定省略...
const { graphqlExpress, graphiqlExpress } = require('apollo-server-express');
server.use(
'/graphql',
bodyParser.json(),
graphqlExpress(async (req) => {
return {
schema: MySchema
};
})
);
其他省略...
以上都是透過一個 EndPoint 來解析 Json payload 資料,接下來來看一下如果在 Server Part 要如何些寫
Schema
官方 Schema 如下 的所有的種類都要從 graphql/lib/type抽出來 各種形態然後使用 GraphQLSchema 去組合 Query 與 Mutation 不過可以看得出來這樣其實滿不方便的而且程式碼寫的很冗長
schema.js
import {
GraphQLObjectType,
GraphQLSchema,
GraphQLInt
} from 'graphql/lib/type';
let data = 0;
let schema = new GraphQLSchema({
query: new GraphQLObjectType({
name: 'RootQueryType',
fields: {
count: {
type: GraphQLInt,
resolve: function() {
return data;
}
}
}
})
});
export default schema;
ApolloData Server 可以先不用 import 直接如下方的方式定義 並使用 ApolloData 提供的 Tools (graphql-tools) 裡面有個 makeExecutableSchema 可以用來組裝 Schema 與 Resolver 後還原原生的 Schema ,在撰寫上的風格比較利於理解程式碼也會少很多
schema.js
const FbEvent = `
type FbEvent {
parentGroupId: String,
parentGroupName: String,
owner: String,
title: String,
description: String,
startTime: String,
image: String,
eventId: String
}
`
module.exports = FbEvent
總結
這篇主要是想介紹 官方與 ApolloData 之間的比較,個人覺得 ApolloData 程式碼可以少寫很多,也易於管理 推一個, day3 再來介紹一下SERVER端的架構與 schema 與 Resolver 之間的關係