GraphQL入门

素颜马尾好姑娘i 2022-12-22 09:22 528阅读 0赞

## GraphQL 是什么 ##

GraphQL 是一种描述请求数据方法的语法，通常用于客户端从服务端加载数据。GraphQL 有以下三个主要特征：

*  它允许客户端指定具体所需的数据。
 *  它让从多个数据源汇总取数据变得更简单。
 *  它使用了类型系统来描述数据。

## 解决痛点 ##

**1、请求数据定制化**  
前端想要获取到想要的数据，往往会面临这几种情况，后台返回一堆数据让我们自己去解析；数据不能通过一次请求拿到，需要调多个接口。使用Graphql之后，我们可以指定我们需要的数据，然后一次获取。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk3MDk4Nw_size_16_color_FFFFFF_t_70_pic_center]**2、数据管理更加便捷**  
目前开发，我们使用redux、vuex来对数据进行统一管理。随着数据量的增大，会变得越来越繁杂冗余。Graphql则可以很好的解决这一点，通过声明式方式管理数据。其内部还封装着各种缓存机制，极大的提升了处理数据的便捷性。  
**3、支持双向通讯**  
以往我们如果需要实现实时同步信息向客户端推送数据，往往需要使用WebSocket通讯或者其他通讯方式。Graphql内置了订阅发布模式，可以直接使用且还能保证接口字段风格的统一。  
**优点总结**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk3MDk4Nw_size_16_color_FFFFFF_t_70_pic_center 1]

## 使用 ##

一个 GraphQL API 主要由三个部分组成：schema（类型），queries（查询） 以及 resolvers（解析器）  
**安装**

npm install graphql apollo-server

**入门测试**  
[官网实例][Link 1]

//ApolloServer是一个开源的GraphQL框架。ApolloServer可以单独的作为服务器
    //同时ApolloServer也可以作为Express，Koa等Node框架的插件。
    const { ApolloServer, gql, PubSub, withFilter} = require('apollo-server')
    //Schema定义,类型声明
    const typeDefs = gql` type Query { hello: String, books: [Book], book(id: String): Book } type Book { id: String, title: String, author: String } type Mutation { createBook(title: String!, author: String!): Book!, clearBook: Boolean } type Subscription { subsBook: Boolean } `
    const books = (
        () => Array(5).fill().map((v,i) => ({ 
            id: ''+i,
            title: 'Title' + i,
            author: 'Author' + i
        }))
    )()
    const pubsub = new PubSub()
    //解释器实现,逻辑处理
    const resolvers = { 
        //查询
        Query: { 
            hello: () => 'Hello World',
            books: () => books,
            book: (parent, { id}) => { 
                return books.find(v => v.id === id)
            }
        },
        //改变数据
        Mutation: { 
            createBook: (parent, args) => { 
                const book = { ...args,id: books.length + 1 + ''}
                books.push(book)
                //发布订阅消息
                pubsub.publish('UPDATE_BOOK',{ 
                    subsBook: true
                })
                return book
            },
            clearBook: () => { 
                books.length = 0
                //发布订阅消息
                pubsub.publish('UPDATE_BOOK',{ 
                    subsBook: true
                })
                return true
            }
        },
        //消息订阅
        Subscription: { 
            subsBook: { 
                //过滤不需要订阅的信息
                subscribe: withFilter(
                    (parent, variables) => pubsub.asyncIterator('UPDATE_BOOK'),
                    (payload,variables) => true
                ),
                resolve: (payload,variables) => { 
                    console.log('接收到数据：',payload)
                    return payload.subsBook
                }
            }
        }
    }
    //创建服务器实例
    const server = new ApolloServer({ typeDefs, resolvers})
    server.listen().then(({ url})=>{ 
        console.log('Now browse to http://localhost:'+url)
    })

## GraphQL客户端通讯(Axios) ##

Query

Mutataion

**参考文档**  
[https://juejin.cn/post/6844903475420069902\#heading-17][https_juejin.cn_post_6844903475420069902_heading-17]  
[https://juejin.cn/post/6844904196848762888][https_juejin.cn_post_6844904196848762888]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk3MDk4Nw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/8add4ff478b14867801c81068672e367.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk3MDk4Nw_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/4e5233478c384b14a65489e2d0827531.png
[Link 1]: https://graphql.cn/code/#javascript
[https_juejin.cn_post_6844903475420069902_heading-17]: https://juejin.cn/post/6844903475420069902#heading-17
[https_juejin.cn_post_6844904196848762888]: https://juejin.cn/post/6844904196848762888