使用Apollo Server搭建GraphQL的服務端和客戶端

時間 2019-11-07

標籤使用 apollo server 搭建 graphql 服務客戶端简体版

原文原文鏈接

不懂的地方仍是有不少，分享一下學習的心得，若是有錯誤，還望各位大佬斧正~javascript

什麼是GraphQL

GraphQL,是Facebook開源的一種api查詢語言，對查詢數據提供了一套完整的描述，客戶端能夠精準的獲取須要的數據，而沒有任何冗餘css

最基礎的查詢方式如上圖，左邊是請求，右邊是響應，我但願獲取todoList這個集合，集合裏的每個元素都包括_id,content,completed字段，服務端返回的數據就是我請求須要的數據，不會多也不會少html

GraphQL的基礎概念——Query

type todo {
        _id: ID!
        content: String!
        completed: Boolean!
    }
複製代碼

todo表示這是一個GraphQL的對象
_id、content和completed是todo中的字段，ID、String、Boolean都是graphql內置的類型
String!表示這個字段的值爲String類型且不可爲空

接着建立一個查詢vue

type Query {
        todoList: [todo]!
    }
複製代碼

Query和Mutetion都是GraphQL的關鍵字，一個表明查詢，一個表明變動，在這裏使用了Query建立了一個查詢
[todo]!表示字段todoList的值是一個上面定義的todo類型的數組，[todo]!表示這個字段要麼是空數組[]，要麼是元素爲todo的數組[todo,todo,...]

GraphQL中的數據類型

Int: 有符號的32位整數
Float: 有符號的雙精度浮點值
String: UTF‐8的字符串
Boolean: 布爾
ID: 惟一的標識，在序列化爲String時表示人類不可讀的

還能夠自定義類型html5

搭建GraphQL服務器

瞭解了查詢，就來建立一個GraphQL的服務器吧我使用的是Apollo GraphQL，這是一個很是完整的GraphQL的實現，包括了客戶端和服務端 node服務器使用的是koa 如今就開始吧java

首先建立一個項目，而後安裝如下依賴node

npm i -S apollo-server-koa graphql koareact

根目錄建立app.js文件ios

const Koa = require("koa");
const { ApolloServer } = require("apollo-server-koa");

const { gql } = require("apollo-server-koa");

// 定義從服務器獲取數據的graphql方法
const typeDefs = gql` type todo { _id: ID! content: String! completed: Boolean! } type Query { todoList: [todo]! } `;

const server = new ApolloServer({
  // 使用gql標籤和字符串定義的graphql的DocumentNode
  typeDefs,
  // 開啓mock
  mocks: true
});

const app = new Koa();

// applyMiddleware將graphql服務鏈接到koa框架
server.applyMiddleware({ app });

app.listen({ port: 4000 }, () =>
  console.log(`🚀 Server ready at http://localhost:4000${server.graphqlPath}`)
);

複製代碼

接着運行node app.js，在http://localhost:4000/graphql就能看見apollo server提供的playground了git

查詢

{
  todoList{
    _id
    content
    completed
  }
}
複製代碼

在左邊輸入上方的查詢，右邊就會出現mock的數據了

添加resolvers

resolvers是用於解析typeDefs查詢的解析器，是一個鍵爲type名，值爲一個函數的映射在app.js中添加resolvers

// ...
// 建立一個數據
const data = [
  {
    _id: "5ca16ed7c39e5a03d8ad3547",
    content: "html5",
    completed: false
  },
  {
    _id: "5ca16ee0c39e5a03d8ad3548",
    content: "javascript",
    completed: false
  },
  {
    _id: "5ca16ee5c39e5a03d8ad3549",
    content: "css",
    completed: false
  }
];
// resolvers
// Query對應查詢，todoList是一個函數，返回的是數據
// 能夠寫異步函數，用於真實的數據庫查詢
const resolvers = {
  Query: {
    todoList: () => data
  }
};
// 添加resolvers，取消掉mocks
const server = new ApolloServer({
  typeDefs,
  resolvers,
});

const app = new Koa();
//...
複製代碼

再次查詢，返回的結果就是data的數據了

GraphQL的基礎概念——Mutation

Mutation能夠對應REST API中的CRUD,一個簡單的mutation以下在typeDefs中增長

type updateResponse {
        success: Boolean!
        todoList:[todo]!
    }
    type Mutation {
        addTodo(content: String): updateResponse!
    }
複製代碼

這是一個Mutation的操做，增長一個todo項，返回一個updateResponse對象

addTodo(content: String)接收一個爲String類型的參數
updateResponse值包括一個鍵名爲success值爲Boolean和一個鍵名爲todoList值爲todo的數組

在playground中執行

修改resolvers

const resolvers = {
    Query: {
        todoList: () => data
    },
    Mutation: {
        addTodo: (_, { content }) => {
            console.log(content);
            data.push({
                _id:Math.random().toString(36).substring(3),
                content,
                completed:false
            });
            return { success: true, todoList:data };
        },
    }
};
複製代碼

函數中具體的參數可查閱Resolver type signature

執行

mutation{
  addTodo(content:"css"){
    success
    todoList{
      _id
      content
      completed
    }
  }
}
複製代碼

mutation表示這是一個mutation操做，操做名爲addTodo，接收一個名爲content類型爲String的參數，返回的數據是success和todoList

在nodejs的控制檯能看見console出來的參數

在客戶端中使用GraphQL

官方提供了包括react、react-native、vue、augular、native-ios...等在creact-react-app中使用

雖然官方提供了組件模式的Query和Mutation組件，不過我在學習過程當中，用的仍是直接以JS寫的方法模式,Client api參考

在create-react-app的項目中安裝依賴

npm install apollo-boost react-apollo graphql --save

建立client.js,並在package.json中增長proxy

import ApolloClient from "apollo-boost";
const Client = new ApolloClient();
const getList = async () => {
    return await Client.query({
        query: gql` { todoList { _id content completed } } `
    });
};
const add = async content => {
    return await Client.mutate({
		// 參數,content對應的下面的$content
        variables: { content },
        mutation: gql` mutation add($content: String!) { addTodo(content: $content) { success todoList{ _id content completed } } } `
    })
};
export {getList,add};
複製代碼