graphql淺出

1.初試牛刀

新建一個空項目，執行如下語句來安裝graphql

npm install graphql

將如下代碼保存爲hello.js

var { graphql, buildSchema } = require('graphql');

var schema = buildSchema(`
  type Query {
    hello: String
  }
`);

var root = { hello: () => 'Hello world!' };

graphql(schema, '{ hello }', root).then((response) => {
  console.log(response);
});

執行node hello.js，獲得一段JSON數據

由以上部分能夠看出，graphql就是一個普通的函數

咱們甚至能夠將以上代碼用在前端的代碼框架中

2.建立一個後端服務

建立如下代碼，保存爲server.js。
實現一個簡單的post服務，並根據body中的query查詢graphql，返回相應數據。

var { graphql, buildSchema } = require("graphql");
const http = require("http");

var schema = buildSchema(`
  type Person {
    age: Int
    name: String
  }
  type Query {
    person(index: String): Person
  }
`);

var root = {
  person: function(param, context) {
    return {
      age: 18,
      name: "sj"
    };
  }
};

http
  .createServer((req, res) => {
    let body = "";
    req.on("data", data => {
      body += data;
    });
    req.on("end", () => {
      const { query, variables } = JSON.parse(body);
      const context = { db: "todo" };

      graphql(schema, query, root, context, variables).then(response => {
        res.end(JSON.stringify(response));
      });
    });
  })
  .listen(3000);

graphql函數能夠傳遞5個參數

1. schema，定義一些type描述
2. query，前端獲取數據定義的結構，最後結果與其一致
3. resolver，與schema中的type相對應的執行函數
4. context，用於傳遞執行上下文，在koa或express中有重要做用
5. variables，傳遞給執行函數的變量值

3.客戶端請求

使用postman模擬一次瀏覽器的請求

postman中集合了graphql功能，發送的數據符合graphql客戶端的標準請求格式

4.框架

提到graphql不得不提兩個重要框架

• Apollo
• Relay(Facebook)

因爲，Apollo在市面上的口碑較好、用法簡單，且本人只使用過Apollo，下面對其作簡單介紹

5.Apollo框架

做爲Relay的競品，Apollo框架分爲server和client，我的認爲graphql函數做爲後端已經很簡潔，不須要再引入apollo的server框架；

而client與react的結合，則可讓咱們的前端code效率大大提高

例如一次性簡單的數據查詢，使用如下代碼便可完成

function DogPhoto({ breed }) {
  const { loading, error, data, refetch } = useQuery(GET_DOG_PHOTO, {
    variables: { breed },
    skip: !breed,
  });

  if (loading) return null;
  if (error) return `Error! ${error}`;

  return (
    <div>
      <img src={data.dog.displayImage} style={{ height: 100, width: 100 }} />
      <button onClick={() => refetch()}>Refetch!</button>
    </div>
  );
}

使用了這套client框架以後，你會發現可能再也不須要使用redux、saga這樣的全家桶，框架自己就能提供相似的服務。

廣告

最近有沒有對字節跳動感興趣的同窗，base：南京有須要的請聯繫我郵箱：574745389@qq.com