iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 1
0
Modern Web

30天精通Api (REST vs GraphQL)系列 第 9

Day09 - 如何打造GraphQL API (1) Server端與工具

GraphQL 已支援多種程式語言,官方文檔詳細說明了,分為服務端與客戶端,以下會提供一個 Javascript 搭建 GraphQL 的例子

服務端 : GraphQL.js / express-graphql
客戶端 : Apollo Client / graphql-request

  1. 安裝好 node.js 與架好環境後,開始安裝express + graphql
    npm install express express-graphql graphql --save

  2. 貼上一下官網的簡易教學文

var express = require('express');
var graphqlHTTP = require('express-graphql');
var { buildSchema } = require('graphql');

// 使用 GraphQL Schema Language 创建一个 schema
var schema = buildSchema(`
  type Query {
    hello: String
  }
`);

// root 提供所有 API 入口端点相应的解析器函数
var root = {
  hello: () => {
    return 'Hello world!';
  },
};

var app = express();
app.use('/graphql', graphqlHTTP({
  schema: schema,
  rootValue: root,
  graphiql: true,  //使用graphiql工具來查詢
}));
app.listen(4000);
console.log('Running a GraphQL API server at localhost:4000/graphql');
  1. 下hello查詢
{
  hello
}

回傳

{
  "data": {
    "hello": "Hello world!"
  }
}
  1. POST API
    http://localhost:4000/graphql?query={hello}
    回傳
{
  "data": {
    "hello": "Hello world!"
  }
}

總結: Schema + root解析 + graphiql查詢工具,基本服務端架構完成!!


上一篇
Day08 - GraphQL有什麼缺點?
下一篇
Day10 - 如何打造GraphQL API (2) 客戶端
系列文
30天精通Api (REST vs GraphQL)12

尚未有邦友留言

立即登入留言