【全栈技术】一文了解GraphQL

最新推荐文章于 2021-05-31 04:12:35 发布

喜欢吃一口烤肉的啵啵

最新推荐文章于 2021-05-31 04:12:35 发布

阅读量519

点赞数 1

本文链接：https://blog.csdn.net/bojie5744/article/details/105778920

版权

GraphQL是什么？
GraphQL 既是一种用于 API 的查询语言也是一个满足你数据查询的运行时。 GraphQL 对你的 API 中的数据提供了一套易于理解的完整描述，使得客户端能够准确地获得它需要的数据，而且没有任何冗余，也让 API 更容易地随着时间推移而演进，还能用于构建强大的开发者工具。更多描述可以去到官网地址看。https://graphql.cn

动手看看
如果没看懂GraphQL介绍，没所谓，后面带你通过实践了解它～，这里是一个查询demo，可以自己动手体验一下。
demo地址：https://www.graphqlbin.com/v2/6RQ6TM
demo源码地址：https://github.com/prisma-labs/graphql-playground

在这里插入图片描述

GraphQL在全栈开发的全景图
在这里插入图片描述
从图中可以看出GraphQL是作为前端获取后端数据的一种通用语言，可以聚合多个数据结果。

前端怎么接入？
基于react项目实践，安装graphql依赖包。

tnpm install apollo-boost @apollo/react-hooks graphql --save-dev

import ApolloClient from 'apollo-boost';

const client = new ApolloClient({
  uri: 'https://48p1r2roz4.sse.codesandbox.io',
});

import { gql } from "apollo-boost";
// or you can use `import gql from 'graphql-tag';` instead

...

client
  .query({
    query: gql`
      {
        rates(currency: "USD") {
          currency
        }
      }
    `
  })
  .then(result => console.log(result));