最新公告
  • 欢迎您光临起源地模板网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入钻石VIP
  • 关于 GraphQL 快速入门

    正文概述 掘金(前端精髓)   2021-01-31   671

    GraphQL是什么?

    一种用于 API 的查询语言,GraphQL 既是一种用于 API 的查询语言也是一个满足你数据查询的运行时。

    GraphQL 对你的 API 中的数据提供了一套易于理解的完整描述,使得客户端能够准确地获得它需要的数据,而且没有任何冗余,也让 API 更容易地随着时间推移而演进,还能用于构建强大的开发者工具。

    GraphQL 是一个用于 API 的查询语言,是一个使用基于类型系统来执行查询的服务端运行时(类型系统由你的数据定义)。GraphQL 并没有和任何特定数据库或者存储引擎绑定,而是依靠你现有的代码和数据支撑。

    关于SQL

    SQL 指结构化查询语言,全称是 Structured Query Language。

    在您的网站中使用 SQL,比如要创建一个显示数据库中数据的网站,您需要:

    1、RDBMS 数据库程序(比如 MS Access、SQL Server、MySQL)

    2、使用服务器端脚本语言,(比如 php 、 ASP、Node)

    3、使用 SQL 来获取您想要的数据

    4、使用 HTML / CSS

    如何使用

    GraphQL 是一种描述客户端如何向服务端请求数据的API语法,类似于 RESTful API 规范。

    客户端可以通过 HTTP GET 发送请求,请求的结构如下所示:

    http://myapi/graphql?query={me{name}}
    

    然后你的 GraphQL HTTP 服务器应当能够处理 HTTP GET 方法。

    // server.js
    const express = require('express')
    const { graphqlHTTP } = require('express-graphql')
    const schema = require('./schema')
    const cors = require('cors')
    
    const app = express()
    app.use(cors({
      origin: 'http://localhost:3000',
      methods: 'GET,POST,OPTIONS,DELETE,PUT'
    }))
    app.use('/graphql', graphqlHTTP({
      schema,
      graphiql: true
    }))
    app.listen(4000, () => {
      console.log('服务器启动:http://localhost:4000')
    })
    

    express-graphql 的 npm 包是用来创建一个 GraphQL HTTP 服务。用它结合常规 Express 来运行 GraphQL,作用是处理请求然后返回数据。

    graphql 的 npm 包是 GraphQL 规范的语法实现,用于在 Node.js 环境中运行。GraphQL API 基于类型和字段的方式进行组织。所以这个包的作用定义类型和字段提供 API 方法。

    // schema.js
    const graphql = require('graphql')
    const { GraphQLObjectType, GraphQLString, GraphQLSchema, GraphQLList, GraphQLNonNull } = graphql
    
    const User = new GraphQLObjectType({
      name: 'User',
      fields: () => ({
        id: { type: GraphQLString },
        name: { type: GraphQLString }
      })
    })
    
    const UserInfo = { id: "1", name: "张三" }
    
    const RootQuery = new GraphQLObjectType({
      name: 'RootQuery',
      fields: {
        me: {
          type: User,
          args: {
            // 参数
          },
          resolve (parent, args) {
            return UserInfo
          }
        }
      }
    })
    
    module.exports = new GraphQLSchema({
      query: RootQuery
    })
    

    然后启动服务,当我们访问下面地址:

    http://localhost:4000/graphql?query={me{name}}
    

    页面会查询出下面结果:

    {
      "data": {
        "me": {
          "name": "张三"
        }
      }
    }
    

    GraphQL 主要是作用于数据接口,比如前端后端交互。客户端自由筛选去获取服务端事先定义好的数据,提高了交互接口的灵活性。比如上述接口,只有 name 字段,现在我又想访问 id 字段,只需要在接口请求的时候带上你要获取那些字段就可以。

    http://localhost:4000/graphql?query={me{name,id}}
    

    向你的 API 发出一个 GraphQL 请求就能准确获得你想要的数据,不多不少。 GraphQL 查询总是返回可预测的结果。使用 GraphQL 的应用可以工作得又快又稳,因为控制数据的是我们的应用,而不是服务器。

    GraphQL 查询不仅能够获得资源的属性,还能沿着资源间引用进一步查询。典型的 REST API 请求多个资源时得载入多个 URL,而 GraphQL 可以通过一次请求就获取你应用所需的所有数据。这样一来,即使是比较慢的移动网络连接下,使用 GraphQL 的应用也能表现得足够迅速。

    const graphql = require('graphql')
    const { GraphQLObjectType, GraphQLString, GraphQLSchema, GraphQLList, GraphQLNonNull } = graphql
    
    const categories = [
      { id: '1', name: '图书' },
      { id: '2', name: '手机' },
      { id: '3', name: '面包' },
      { id: '4', name: '电脑' },
    ]
    
    // products.category 对应的是 categories.id 表示分类id
    const products = [
      { id: '1', name: '深入浅出nodeJS', category: '1' },
      { id: '2', name: '高级程序设计', category: '1' },
      { id: '3', name: '华为手机', category: '2' },
      { id: '4', name: 'mac电脑', category: '4' },
    ]
    
    const Category = new GraphQLObjectType({
      name: 'Category',
      fields: () => ({
        id: { type: GraphQLString },
        name: { type: GraphQLString },
        products: {
          type: new GraphQLList(Product),
          resolve (parent) {
            // parent是当前分类,根据分类找到对应的产品列表
            return products.filter(item => item.category === parent.id)
          }
        }
      })
    })
    
    const Product = new GraphQLObjectType({
      name: 'Product',
      fields: () => ({
        id: { type: GraphQLString },
        name: { type: GraphQLString },
        category: {
          type: Category,
          resolve (parent) {
            // category: '1' 根据分类的id找到分类对应的对象
            return categories.find(item => item.id === parent.category)
          }
        }
      })
    })
    
    
    // 定义根类型
    const RootQuery = new GraphQLObjectType({
      name: 'RootQuery',
      fields: {
        // 根据ID查询分类
        getCategory: {
          type: Category,
          args: {
            id: { type: GraphQLString },
          },
          resolve (parent, args) {
            return categories.find((item) => item.id === args.id)
          }
        },
        // 查询所有分类
        getCategoryList: {
          type: new GraphQLList(Category),
          args: {
          },
          resolve (parent, args) {
            return categories
          }
        },
        // 根据ID查询产品
        getProduct: {
          type: Product,
          args: {
            id: { type: GraphQLString },
          },
          resolve (parent, args) {
            return products.find((item) => item.id === args.id)
          }
        },
        // 查询所有产品
        getProductList: {
          type: new GraphQLList(Product),
          args: {
          },
          resolve (parent, args) {
            return products
          }
        }
      }
    })
    
    module.exports = new GraphQLSchema({
      query: RootQuery
    })
    

    一个分类下面是有多个产品,这种一对多的关系。当我们查询分类的时候,还能查出具体分类里面的产品列表,这种关联关系就是沿着资源间引用进一步查询的特点。

    你可以在我的 GitHub 中查看完成实例代码:链接,更多的详细介绍参考官方文档:链接


    起源地下载网 » 关于 GraphQL 快速入门

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发?
    请QQ联系我们

    发表评论

    还没有评论,快来抢沙发吧!

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    迅虎支付宝
    迅虎微信
    支付宝当面付
    余额支付
    ×
    微信扫码支付 0 元