前端从零开始学习Graphql

2019-08-14 10:12:01来源：博客园阅读 ()

学习本姿势需要电脑装有node,vue-cli相关环境，以及要有node,express,koa,vue相关基础

本文相关demo的github地址：

node服务：https://github.com/liuming888/graphql_node_demo.git

vue项目：https://github.com/liuming888/graphql_vue_demo.git

一 Graphql概述

它是什么？从哪里来？要干什么？

简单地讲，对于前端，它就是让你舒舒服服发请求的

严格的说，它是一种api设计思想，用来取代restful api的一种前端处于主导地位的api规范。它把前端所需要的api用类似图数据结构（graph）的方式展现出来，让前端很方便的获取所需要的数据。

特点

需要什么就获取什么数据

支持关系数据的查询

API无需定义各种路由，完全数据驱动

无需管理API版本，一个版本持续演进

支持大部分主流开发语言和平台

强大的配套开发工具

起源，restful api的问题

如果采用restful api的话，后端要持续维护api doc，但是实际场景是这样的：

1.来了新需求，后端先评估和开发，后端弄得差不多，前端才开始，然后中间后端一顿猛改

2.由于多种原因，后端经常自己偷偷改掉传参或者返回值，完了接口报错，测试姐姐把前端叫过去一顿批，前端一脸懵圈，仔细检查，发现问题，找后端撕X，这样一个循环非常影响开发效率。

gql出现

由于上面这一堆的问题，facebook公司2012年内部实践了GraphQL，15年刚开源的时候引起了很多大公司和社区关注，落地了很多规范和框架。需要了解详细历史可以看看底下的youtube视频。

这种叫GraphQL的东西帮助人们经过一系列定义和规范，可以发送gql请求非常方便的拿到想要的数据，甚至还可以修改数据，而不用后台的配合，而且一旦Schema确定（数据库那边定义好），前后端就可以快速并行开发，例如下图获得某个用户的信息，我想要这个用户的什么属性就写什么，graphiQl工具可以进行完整的详细的提示，请求主体简单明了

    query{

          student{

id

            name

age

          course{

id

            title

gql理想使用场景

数据库建好模型，前后端可以同步开始开发需求，前端只有少数需要依赖后端接口，前端开发过程中可以方便的拿到任何想要的数据，从而节省大量联调接口的时间，迅速的完成一个项目。

实现原理

gql的实现挺复杂的，代码有点难懂，不过原理说起来比较简单易懂

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

// Construct a schema, using GraphQL schema language

var schema = buildSchema(`

type Query {

    hello: String

`);

// The root provides a resolver functionfor each API endpoint

var root = {

  hello: () => {

return'Hello world!';

},

};

// Run the GraphQL query '{ hello }' and print out the response

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

  console.log(response);

});

如上就是一个最简单的node版的gql服务器 gql把定义好的schema拿到，用root之类的resolve解析器去解析发送来的'{ hello }'请求，然后返回给相应的json值。上面代码打印出的response如下

    data:

            hello: 'Hello world!'

当然，resolve逐层解析会有一些问题，如果resolve请求数据库，就要用到DataLoader

DataLoader是gql服务器性能的关键一环，也是gql社区的主要推动完善方向，就像react里面的shouldComponentUpdate一样制约着gql服务器的性能。

DataLoader 能让我们从数据库读取数据并让数据能被 GraphQL 处理，我们使用 DataLoader，而不是直接通过 SQL 查询从数据库获取数据，将 DataLoader 作为代理以减少我们实际需要发送给数据库的 SQL 查询。 DataLoader 使用批处理和缓存的组合来实现。如果同一个客户端请求会造成多次请求数据库，DataLoader 会整合这些问题并从数据库批量拉取请求数据。DataLoader 会同时缓存这些数据，当有后续请求需要同样资源时可以直接从缓存获取到。

具体使用

通过服务端对请求的元数据的type进行严格的定义，我们只要在客户端发送gql请求就能返回期望的相应类型的数据

下图是请求格式，query【请求】，mutation【修改】和subscribe【订阅】是三种api发送方式，query用的多一些，mutation相对传统的restful来说不够可靠和安全，subscribe类似websocket

query

  schema {

    types {

id

      name // 获取根字段名

      fields {

id

        name // 获取字段名

和restful比较的优缺点

优点

优点就是后端可以少招几个写接口的

前后端一起开发，节约工期

较少维护api文档，节省精力

说了这些，其实单对于前端来说，帮助不算特别大

缺点和难推广的地方

后端或者中间层把gql封装相应业务对接数据库是难点，需要高端人力

需要前端多少学一点类sql语句，不过大部分场景可以封装好固定的sql语句

封装gql不好会产生sql性能问题，三级嵌套联查还有n+1的老问题又会冒出来，需要持续优化

前端排除bug需要一定的后端知识，前后端架构多少了解一些

二 hello word

简易版的hello world

npm install graphql

然后使用 node hello.js 以运行 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);

});

控制台打印出Hello world!

express版hello world

npm install express express-graphql graphql

然后使用 node server.js 以运行 server.js 中的代码：

var express = require('express');

var graphqlHTTP = require('express-graphql');

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

var schema = buildSchema(`

type Query {

hello: String

}

`);

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

var app = express();

app.use('/graphql', graphqlHTTP({

schema: schema,

rootValue: root,

graphiql: true, // 是否开启调试模式（生产环境注意得关掉）

}));

app.listen(4000, () => console.log('Now browse to localhost:4000/graphql'));

访问http://localhost:4000/graphql

koa版hello world

npm install koa graphql koa-graphql koa-mount

然后使用 node server.js 以运行 server.js 中的代码：

const Koa = require('koa');

const mount = require('koa-mount');

const { buildSchema } = require('graphql');

const graphqlHTTP = require('koa-graphql');

const app = new Koa();

const schema = buildSchema(`

type Query {

hello: String

}

`);

const root = {

hello: () => 'Hello world!',

};

app.use(

mount(

'/graphql',

graphqlHTTP({

schema: schema,

rootValue: root,

graphiql: true,

})

)

);

app.use(async ctx => {

ctx.body = 'Hello World';

});

app.listen(3000);

访问 http://localhost:3000/graphql

三进阶

参考资料：用Node创建GraphQL API：代码量少，性能高

基于express

代码看 node-graphql-demo项目然后yarn npm run dev

github地址： https://github.com/liuming888/graphql_node_demo.git master分支

创建 Project

我们现在来创建我们的 project。打开一个新的 terminal，执行以下命令，即可使用缺省值创建 package.json 文件：

mkdir node-graphql-demo

cd node-graphql-demo

npm init -y

接下来，我们需要安装以下依赖:

npm install graphql express express-graphql sqlite3 --save

这样就会安装 Express 框架，Node.js 上的 GraphQL 实现，Express 和 SQLite3 的 GraphQL 中间件。为简单起见，我们使用 SQLite3 作为数据库。

graphql 是一个支持库，并且在我们这里是一个必要的模块

express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用，和丰富的 HTTP 工具。

express-graphql GraphQL HTTP服务器中间件

SQLite是一个进程内的库，实现了自给自足的、无服务器的、零配置的、事务性的 SQL 数据库引擎。它是一个零配置的数据库，这意味着与其他数据库一样，您不需要在系统中配置。就像其他数据库，SQLite 引擎不是一个独立的进程，可以按应用程序需求进行静态或动态连接。SQLite 直接访问其存储文件

创建 GraphQL 服务器

创建工程并引入基本依赖包之后，现在来创建 API 服务器。在工程文件夹里，创建 index.js 文件，并引入下列内容：

const express = require('express');

const sqlite3 = require('sqlite3').verbose();

const graphql = require("graphql");

const ExpressGraphQL = require("express-graphql");

上面的代码的目的是：为Express导入Express，SQLite3，GraphQL和GraphQL中间件。

接下来，添加下列代码，在当前文件夹中创建一个 Express 应用程序和名为 my.db 的 SQLite 3 数据库：

const app = express();

const database = new sqlite3.Database("./my.db");

然后，添加 createContactTable() 方法，在数据库中创建 contacts 表并马上调用函数：

const createContactTable = () => {

const query = `

CREATE TABLE IF NOT EXISTS contacts (

id integer PRIMARY KEY,

firstName text,

lastName text,

email text UNIQUE)`;

return database.run(query);

}

createContactTable();

我们创建了一个 SQL 表来存储 contacts的基本信息。每个 contact 的基本信息包括：唯一的标识、名、姓和 email。

接下来，添加下列代码来定义一个 GraphQL 类型：

const ContactType = new graphql.GraphQLObjectType({

fields: {

id: { type: graphql.GraphQLID },

firstName: { type: graphql.GraphQLString },

lastName: { type: graphql.GraphQLString },

email: { type: graphql.GraphQLString }

}

});

我们使用基本的内置 GraphQL 类型，如 GraphQLID 和 GraphQLString 来创建我们自定义类型，对应数据库中的 contact。

怎样使用 GraphQL API

构建客户端前，可以使用 GraphQL 接口来测试你的 API。

访问网址： http://localhost:4000/graphql ，并运行下列 mutation query：

mutation {

createContact(firstName: "Jon", lastName: "Snow", email: "jonsnow@thenightswatch.com") {

id,

firstName,

lastName,

}

使用下列 mutation，可以更新 id 为 1 的 contact：

mutation {

updateContact(id: 1, firstName: "Aegon", lastName: "Targaryen", email: "aegontargaryen@ironthrone.com")

}

也可以使用下列 mutation 来删除 id 为 1 的 contact：

mutation {

deleteContact(id: 1)

}

最后，使用如下 query，可以获取数据库中所有 contacts 信息：

query {

contacts {

firstName

lastName

}

使用下面 query，可以获取一个 contact 的信息：

query {

contact(id: 1) {

firstName

lastName

}

这里，我们得到的是 id 为 1 的 contact 信息。

基于koa (和express类似)

代码看 koa-demo项目然后yarn npm run dev

github地址： https://github.com/liuming888/graphql_node_demo.git koa分支

创建 Project

我们现在来创建我们的 project。打开一个新的 terminal，执行以下命令，即可使用缺省值创建 package.json 文件：

mkdir koa-demo

cd koa-demo

npm init -y

接下来，我们需要安装以下依赖:

npm install graphql koa koa-graphql koa-mount sqlite3 --save

这样就会安装 koa库，Node.js 上的 GraphQL 实现，koa 和 SQLite3 的 GraphQL 中间件。为简单起见，我们使用 SQLite3 作为数据库。

graphql 是一个支持库，并且在我们这里是一个必要的模块

Koa 是一个新的 web 框架，由 Express 幕后的原班人马打造，致力于成为 web 应用和 API 开发领域中的一个更小、更富有表现力、更健壮的基石。通过利用 async 函数，Koa 帮你丢弃回调函数，并有力地增强错误处理。 Koa 并没有捆绑任何中间件，而是提供了一套优雅的方法，帮助您快速而愉快地编写服务端应用程序

koa-graphql GraphQL HTTP服务器中间件

koa-mount 让多个Koa.js子应用合并成一个父应用，用请求的前缀区分子应用

创建 GraphQL 服务器

创建工程并引入基本依赖包之后，现在来创建 API 服务器。在工程文件夹里，创建 index.js 文件，并引入下列内容：

const Koa = require('koa');

const mount = require('koa-mount');

const graphql = require('graphql');

const graphqlHTTP = require('koa-graphql');

const sqlite3 = require('sqlite3').verbose();

const app = new Koa();

const database = new sqlite3.Database('./my.db');

const createContactTable = () => {

const query = `

CREATE TABLE IF NOT EXISTS contacts (

id integer PRIMARY KEY,

firstName text,

lastName text,

email text UNIQUE)`;

return database.run(query);

};

// 创建了一个 SQL 表来存储 contacts的基本信息。每个 contact 的基本信息包括：唯一的标识、名、姓和 email。

createContactTable();

// 定义一个 GraphQL 类型

// 使用基本的内置 GraphQL 类型，如 GraphQLID 和 GraphQLString 来创建我们自定义类型，对应数据库中的 contact。

const ContactType = new graphql.GraphQLObjectType({

fields: {

id: { type: graphql.GraphQLID },

firstName: { type: graphql.GraphQLString },

lastName: { type: graphql.GraphQLString },

email: { type: graphql.GraphQLString },

});

// 定义查询类型

// 查询有两个字段： contacts，可以用来获取数据库中的所有 contacts，而 contact 则根据 id 获取一个 contact 信息。 contact 字段允许所需的 id 参数为 GraphQLID 类型。

var queryType = new graphql.GraphQLObjectType({

fields: {

contacts: {

type: graphql.GraphQLList(ContactType),

resolve: (root, args, context, info) => {

return new Promise((resolve, reject) => {

database.all("SELECT * FROM contacts;", function (err, rows) {

if (err) {

reject([]);

}

resolve(rows);

});

}

contact: {

type: ContactType, // 说明返回数据的类型

args: { // 定义期望从客户端得到的参数

id: {

type: new graphql.GraphQLNonNull(graphql.GraphQLID)

}

resolve: (root, { // 实际逻辑发生的地方

id // resolve()方法的第二个参数访问任何传递的参数

}, context, info) => {

// 简单调用 database.all() 和 database.run() 方法来执行正确的 SQL 查询，以便从 SQLite 获取数据，返回一个 Promise 来处理得到的数据。

return new Promise((resolve, reject) => {

database.all("SELECT * FROM contacts WHERE id = (?);", [id], function (err, rows) {

if (err) {

reject(null);

}

resolve(rows[0]);

});

}

});

// 创建一个 mutation 类型，用于创建、更新和删除操作

var mutationType = new graphql.GraphQLObjectType({

fields: { // 所有的字段都接受符合 args 属性定义的参数，并由一个 resolve() 方法来获取传递过来的参数，执行相应的 SQL 操作，并返回一个 Promise。

createContact: { // 创建 contacts

type: ContactType,

args: {

firstName: {

type: new graphql.GraphQLNonNull(graphql.GraphQLString)

lastName: {

type: new graphql.GraphQLNonNull(graphql.GraphQLString)

email: {

type: new graphql.GraphQLNonNull(graphql.GraphQLString)

}

resolve: (root, {

firstName,

lastName,

}) => {

return new Promise((resolve, reject) => {

database.run('INSERT INTO contacts (firstName, lastName, email) VALUES (?,?,?);', [firstName, lastName, email], (err) => {

if (err) {

reject(null);

}

database.get("SELECT last_insert_rowid() as id", (err, row) => {

resolve({

id: row["id"],

firstName: firstName,

lastName: lastName,

email: email

});

})

}

updateContact: { // 更新 contacts

type: graphql.GraphQLString,

args: {

id: {

type: new graphql.GraphQLNonNull(graphql.GraphQLID)

firstName: {

type: new graphql.GraphQLNonNull(graphql.GraphQLString)

lastName: {

type: new graphql.GraphQLNonNull(graphql.GraphQLString)

email: {

type: new graphql.GraphQLNonNull(graphql.GraphQLString)

}

resolve: (root, {

id,

firstName,

lastName,

}) => {

return new Promise((resolve, reject) => {

database.run('UPDATE contacts SET firstName = (?), lastName = (?), email = (?) WHERE id = (?);', [firstName, lastName, email, id], (err) => {

if (err) {

reject(err);

}

resolve(`Contact #${id} updated`);

});

})

}

deleteContact: { // 删除 contacts

type: graphql.GraphQLString,

args: {

id: {

type: new graphql.GraphQLNonNull(graphql.GraphQLID)

}

resolve: (root, {

}) => {

return new Promise((resolve, reject) => {

database.run('DELETE from contacts WHERE id =(?);', [id], (err) => {

if (err) {

reject(err);

}

resolve(`Contact #${id} deleted`);

});

})

}

});

// 创建 GraphQL schema

// GraphQL schema 是 GraphQL 的核心概念，它定义了连接到服务器的客户端可用的功能。我们传递已定义的 query 和 mutation 类型到 schema。

const schema = new graphql.GraphQLSchema({

query: queryType,

mutation: mutationType

});

app.use(

mount(

'/graphql',

graphqlHTTP({

schema: schema,

graphiql: true, //是否开启本地调试模式

})

)

);

app.use(async ctx => {

ctx.body = 'Hello World';

});

app.listen(3000,() => {

console.log("GraphQL server running at http://localhost:3000");

});

保存 index.js 文件，返回到你的 terminal。运行下列命令，启动服务器：

node index.js

怎样使用 GraphQL API

构建客户端前，可以使用 GraphQL 接口来测试你的 API。

访问网址： http://localhost:4000/graphql ，并运行下列 mutation query：

mutation {

createContact(firstName: "Jon", lastName: "Snow", email: "jonsnow@thenightswatch.com") {

id,

firstName,

lastName,

}

使用下列 mutation，可以更新 id 为 1 的 contact：

mutation {

updateContact(id: 1, firstName: "Aegon", lastName: "Targaryen", email: "aegontargaryen@ironthrone.com")

}

也可以使用下列 mutation 来删除 id 为 1 的 contact：

mutation {

deleteContact(id: 1)

}

最后，使用如下 query，可以获取数据库中所有 contacts 信息：

query {

contacts {

firstName

lastName

}

使用下面 query，可以获取一个 contact 的信息：

query {

contact(id: 1) {

firstName

lastName

}

这里，我们得到的是 id 为 1 的 contact 信息。

四 Vue和GraphQL

参考资料使用Vue和GraphQL构建一个CRUD APP （改资料的修改有问题，本文已修复）

node服务复用上文进阶中的项目（下面采用koa服务）

打开koa-demo项目的server.js

增加一下代码

const cors = require('@koa/cors');

...

app.use(cors());

然后yarn add @koa/cors 再npm run dev

因为我们在两个不同的本地端口之间发送请求，这两个端口被视为两个独立的域，因此我们需要在服务器中启用跨源资源共享功能

创建一个 Vue 项目

使用 Vue CLI，让我们继续创建一个 Vue 项目。回到终端机，执行下列命令：

vue create vue-graphql-demo

当提示对预置选项进行选择时，你可以简单地选择默认设置。

等待生成项目，运行以下命令启动开发服务器：

cd vue-graphql-demo

npm run serve

这样，你的应用就运行起来了，在 http://localhost:8080/ 地址下可以访问。

安装 Apollo 客户端

Apollo 是一组实用程序，可以帮助你在 APP 中使用 GraphQL。它以其客户端和服务器而闻名。Apollo 是由 Meteor Development Group开发和维护的：https://www.meteor.io/

打开一个新的终端，进入你的项目文件夹，运行以下命令来安装 Apollo 客户端到你的 Vue 项目中：

yarn add vue-apollo graphql apollo-boost

Apollo Boost 是一种无需任何手动配置就可以开始使用 Apollo 客户端的方式。它包括一些常见的默认值，比如推荐的 InMemoryCache 和 HttpLink，它们是以推荐的参数为你进行配置的。这种零配置的方式适合快速开发使用。

修改src/main.js 文件，代码如下：

import Vue from 'vue';

import ApolloClient from 'apollo-boost';

import VueApollo from 'vue-apollo';

import App from './App.vue';

import router from './router';

import store from './store';

import './registerServiceWorker';

// 创建 Apollo 客户端的一个实例，并传入 GraphQL 端点的 URL

const apolloClient = new ApolloClient({

uri: 'http://localhost:3000/graphql', // graphql服务的地址（注意服务端开启cors）

});

Vue.use(VueApollo); // 使用 VueApollo 插件将 Apollo 集成到我们的 Vue APP 中

// 创建了 Apollo Provider，它包含所有 Vue 组件都可以使用的 Apollo Client 实例。

const apolloProvider = new VueApollo({

defaultClient: apolloClient,

});

Vue.config.productionTip = false;

new Vue({

router,

store,

render: h => h(App),

apolloProvider, // 将 Apollo Provider 添加到 Vue 实例中

}).$mount('#app');

使用 GraphQL API

将 vue-apollo 添加到 APP 后，所有组件都可以通过 apollo 选项来使用 Apollo

修改App.vue代码如下：

<table border='1'

width='100%'

style='border-collapse: collapse;'>

<tr>

<th>First Name</th>

<th>Email</th>

<th>Actions</th>

</tr>

<tr v-for='contact in contacts'

:key="contact.id">

<td>{{ contact.firstName }}</td>

<td>{{ contact.lastName }}</td>

<td>{{ contact.email }}</td>

<td>

<input type="button"

@click="selectContact(contact)"

value="Select">

<input type="button"

@click="deleteContact(contact.id)"

value="Delete">

</td>

</tr>

</table>

</br>

<form>

<label>First Name</label>

<input type="text"

name="firstName"

v-model="firstName">

</br>

<input type="text"

name="lastName"

v-model="lastName">

</br>

<label>Email</label>

<input type="email"

name="email"

v-model="email">

</br>

<input v-if="!id"

type="button"

@click="createContact(firstName, lastName, email)"

value="Add">

<input v-if="id"

type="button"

@click="updateContact(id, firstName, lastName, email)"

value="Update">

<input type="button"

@click="clearForm()"

value="Clear">

</form>

</div>

</template>

import gql from "graphql-tag";

export default {

data() {

// 定义了四个组件变量，分别是 id、firstName、lastName 和 email。这些变量将被绑定到用于创建新联系人的 HTML Form 中

return {

id: null,

firstName: "",

lastName: "",

email: ""

};

apollo: {

// gql 是一个 JavaScript 模板文字标签，它将 GraphQL 查询字符串解析到标准的 GraphQL AST 中。可以在 Github 上的官方库中找到更多详细信息：

// https://github.com/apollographql/graphql-tag

// 在这个 apollo 对象中，我们添加了一个 contacts 属性，它将保存 contacts 查询的结果。稍后，我们将使用它在模板中显示联系人。

contacts: gql`

query {

contacts {

firstName

lastName

}

methods: {

// 添加 createContact()、updateContact() 和 deleteContact()

// 使用 this.$apollo.mutate() 方法向 GraphQL Server 发送 mutation 查询，并调用 location.reload() 方法来重新加载页面。

createContact(firstName, lastName, email) {

console.log(`Create contact: ${email}`);

this.$apollo.mutate({

mutation: gql`

mutation createContact(

$firstName: String!

$lastName: String!

$email: String!

) {

createContact(

firstName: $firstName

lastName: $lastName

email: $email

) {

firstName

lastName

}

variables: {

firstName: firstName,

lastName: lastName,

email: email

}

});

location.reload();

updateContact(id, firstName, lastName, email) {

console.log(

"id, firstName, lastName, email: ",

id,

firstName,

lastName,

);

console.log(`Update contact: # ${id}`);

this.$apollo.mutate({

mutation: gql`

mutation updateContact(

$id: ID!

$firstName: String!

$lastName: String!

$email: String!

) {

updateContact(

id: $id

firstName: $firstName

lastName: $lastName

email: $email

)

}

variables: {

id: id,

firstName: firstName,

lastName: lastName,

email: email

}

});

location.reload();

deleteContact(id) {

console.log(`Delete contact: # ${id}`);

this.$apollo.mutate({

mutation: gql`

mutation deleteContact($id: ID!) {

deleteContact(id: $id)

}

variables: {

id: id

}

});

location.reload();

selectContact(contact) {

this.id = contact.id;

this.firstName = contact.firstName;

this.lastName = contact.lastName;

this.email = contact.email;

clearForm() {

this.id = null;

this.firstName = "";

this.lastName = "";

this.email = "";

}

};

</script>

</style>

保存后，重新启动vue项目，会看到以下页面：

到此，恭喜你已经成功入门graphql了，有兴趣可以自行查询相关资料深入研究

五总结

使用GraphQL API的目的是什么？

创建API的目的是使自己的软件具有可以被其他外部服务集成的能力。即使你的程序被单个前端程序所使用，也可以将此前端视为外部服务，为此，当通过API为两者之间提供通信时，你能够在不同的项目中工作。

如果你在一个大型团队中工作，可以将其拆分为创建前端和后端团队，从而允许他们使用相同的技术，并使他们的工作更轻松。

优点

优点就是后端可以少招几个写接口的

前后端一起开发，节约工期

较少维护api文档，节省精力（代码即是文档）

说了这些，其实单对于前端来说，帮助不算特别大

缺点和难推广的地方

后端或者中间层把gql封装相应业务对接数据库是难点，需要高端人力

需要前端多少学一点类sql语句，不过大部分场景可以封装好固定的sql语句

封装gql不好会产生sql性能问题，三级嵌套联查还有n+1的老问题又会冒出来，需要持续优化

前端排除bug需要一定的后端知识，前后端架构多少了解一些

GraphQL比REST更好吗？

GraphQL是一种适合多种情况的方法。 REST是一种体系结构方法。如今，有大量的文章可以解释为什么一个比另一个好，或者为什么你应该只使用REST而不是GraphQL。另外你可以通过多种方式在内部使用GraphQL，并将API的端点维护为基于REST的架构。

你应该做的是了解每种方法的好处，分析自己正在创建的解决方案，评估你的团队使用解决方案的舒适程度，并评估你是否能够指导你的团队快速掌握这些技术。

本文更偏重于实用指南，而不是GraphQL和REST的主观比较。如果你想查看这两者的详细比较，我建议你查看另一篇文章，为什么GraphQL是API的未来。

参考资料

graphql官网

2019 GraphQL学习指南

使用 NodeJS 创建一个 GraphQL 服务器

用Node创建GraphQL API：代码量少，性能高

用Node.js创建安全的 GraphQL API[每日前端夜话0x61]

Koa + GraphQL 示例

GraphQL 入门详解

使用Vue和GraphQL构建一个CRUD APP

原文链接:https://www.cnblogs.com/liuming666/p/11185554.html
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：JavaScript垃圾回收机制

下一篇：js获取input checkbox的选中值

IDC资讯：主机资讯注册资讯托管资讯 vps资讯网站建设

网站运营：建站经验策划盈利搜索优化网站推广免费资源

网站联盟：联盟新闻联盟介绍联盟点评网赚技巧

行业资讯：搜索引擎网络游戏电子商务广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器安全防护

软件技巧：其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识：网络协议网络安全网络管理组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条

最新资讯

热门关注

热门标签

前端从零开始学习Graphql

一 Graphql概述

它是什么？从哪里来？要干什么？

特点

起源，restful api的问题

gql出现

gql理想使用场景

实现原理

具体使用

和restful比较的优缺点

优点

缺点和难推广的地方

二 hello word

简易版的hello world

express版hello world

koa版hello world

三 进阶

基于express

创建 Project

创建 GraphQL 服务器

怎样使用 GraphQL API

基于koa (和express类似)

创建 Project

创建 GraphQL 服务器

怎样使用 GraphQL API

四 Vue和GraphQL

node服务复用上文进阶中的项目（下面采用koa服务）

创建一个 Vue 项目

安装 Apollo 客户端

使用 GraphQL API

五 总结

使用GraphQL API的目的是什么？

优点

缺点和难推广的地方

GraphQL比REST更好吗？

参考资料

三进阶

五总结