graphql的使用

更新日期: 2019-07-20阅读: 2.7k标签: 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模拟一次浏览器的请求
image.png
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这样的全家桶,框架本身就能提供类似的服务。


链接: https://fly63.com/article/detial/6021

GraphQL的使用_我为什么用GraphQL

Facebook 在2015年开源的 GraphQL,全部的 Graphql 查询都会通过 schema 来进行解析,Graphql 用一种强类型的观念来强制我们设计每个数据,也许会有些前端的同学接受不了,并且 Graphql 这种还支持嵌套查询,只需要 fields 属性中有这个对象就行了

Netflix:我们为什么要将GraphQL引入前端架构?

在这篇文章中,我们将分享 Netflix 在这些应用程序的前端架构中引入 GraphQL 所积累的经验。在内部,我们把用于管理广告创建和组装的主要应用程序叫作 Monet。它用于增强广告的创建以及自动管理外部广告平台上的营销广告活动。

用Node.js创建安全的 GraphQL API

本文的目标是提供关于如何创建安全的 Node.js GraphQL API 的快速指南。使用 GraphQL API 的目的是什么?什么是GraphQL API?什么是GraphQL查询?GraphQL的好处是什么?GraphQL是否优于REST?为什么我们使用Node.js?

GraphQL简单入门示例

官方文档定义:一种用于API的查询语言, Graph + Query,有以下特点:请求你所要的数据不多不少;获取多个资源只用一个请求;描述所有可能的类型系统

GraphQL 项目中的前端 mock 方案

在使用 GraphQL (以下简称 gql)的前端项目中,往往需要等待后台同学定义好 Schema 并架设好 Playground 以后才能进行联调。如果后台同学阻塞了,前端只能被动等待。如果对于 gql 项目来说也能够和 REST 一样有一套 mock 方案就好了

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!