iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 2
2

介紹
在開始玩 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 之間的關係


上一篇
GraphQL 與 ApolloData 介紹
下一篇
ApolloData Server 介紹
系列文
GraphQL + ApolloData 入門30

尚未有邦友留言

立即登入留言