Apollo Client

声明：本文为译文，原文链接：https://www.robinwieruch.de/react-libraries React 已经诞生很久了，自从它诞生开始，围绕组件驱动形成了一个非常全面的生态，但是来自其他编程语言或者框架的开发人员很难找到要构建一个 React 系统的所有组件。如果你是来自于像 Angular 这样的框架的开发者，你可能已经习惯了框架包含了所需要的所有功能， 然而对于 React 来说，它的核心并不是完善所有的可选库。这是优势还是劣势取决于你自己。当我从 Angular 切换到 React，我绝对经历了它作为 React 的优势。 只有通过 React，您才能使用函数组件和 props 构建组件驱动的用户界面。它带有一些内置的解决方案，例如，用于本地状态和副作用的 React Hooks。 下面的文章将向您提供一些自己总结的方法，以便从补充库中进行选择，从而构建一个全面的 React 应用程序。 如何开始 React 如果你是一个完全不熟悉 React 的初学者想创建一个 React 项目，加入 React 的世界。有许多工具包项目可以选择，每个项目都试图满足不同的需求。React 社区的现状是通过 Facebook 的 create-react-app(CRA)。它提供了一个零配置的设置，并给你一个开箱即用并且简单的启动和运行的 React 应用程序

感谢支持ayqy个人订阅号，每周义务推送1篇（ only unique one ）原创精品博文，话题包括但不限于前端、Node、Android、数学（WebGL）、语文（课外书读后感）、英语（文档翻译） 如果觉得弱水三千，一瓢太少，可以去 http://blog.ayqy.net 看个痛快 写在前面 本文第一部分翻译自REST 2.0 Is Here and Its Name Is GraphQL，标题很有视觉冲击力，不小心上钩了 剩余部分是对GraphQL的思考。现在，我们边看译文边汇聚疑问 一.译文 GraphQL是一种API查询语言。虽然与REST有本质区别，但GraphQL可以作为REST的备选项，它提供了高性能、良好的开发体验和一些强大的工具 通过本文，我们来看看怎样用REST和GraphQL来处理一些常见场景。本文附有3个项目，提供了流行电影和演员信息API，还用HTML和jQuery搭了个简单的前端应用，可以查看对应的REST和GraphQL源码 我们将通过这些API来看这两种技术的差异，以便了解其优缺点。开始之前，先布置舞台，快速过一下这些技术是怎么冒出来的 Web早期 Web早期很简单，早期的Web应用就是静态HTML文档。演化到网站想包含存在数据库（例如SQL）里的动态内容，并通过JavaScript来添加交互功能

今天我们介绍的Zuul动态路由的解决方案来自于携程开源的配置中心Apollo。 Apollo概述 Apollo（阿波罗）是携程框架部门研发的开源配置管理中心，能够集中化管理应用不同环境、不同集群的配置，配置修改后能够实时推送到应用端，并且具备规范的权限、流程治理等特性。 Apollo支持4个维度管理Key-Value格式的配置： application (应用) environment (环境) cluster (集群) namespace (命名空间) Apollo相比于Spring Cloud Config优势 Spring Cloud Config的精妙之处在于它的配置存储于Git，这就天然的把配置的修改、权限、版本等问题隔离在外。通过这个设计使得Spring Cloud Config整体很简单，不过也带来了一些不便之处。（了解源码可+求求: 1791743380） 功能点 Apollo Spring Cloud Config 备注 配置界面 一个界面管理不同环境、不同集群配置 无，需要通过git操作 配置生效时间 实时 重启生效，或手动refresh生效 Spring Cloud Config需要通过Git webhook，加上额外的消息队列才能支持实时生效 版本管理 界面上直接提供发布历史和回滚按钮 无，需要通过git操作 灰度发布 支持 不支持 授权、审核、审计

背景 项目配置迁移到Apollo之后，通过统一的配置管理及配置监听使得项目配置修改的成本大大降低。 但是，在使用Apollo的过程中，强哥也遇到一个问题：如果我们要获取Apollo下的namespace信息需要通过ConfigServer.getConfig(String namespace)方法来获取，但是使用这个方法的前提是我们必须知道当前项目下有哪些namespace，或者说我们只能使用我们已知的namespace。这就对我们的代码扩展性产生了限制，假如项目已经上线，而之后我们又要新增namespace或者修改已有namespace名称，就必须更改代码将对应的namespace加入或修改，然后重新发布。 虽然我们不会经常修改namespace，但是，有这么一个痛点，就让人很不舒服。而且从官方文档中，强哥“并没有”找到：通过项目app_id获取到Apollo上对应的该项目下的所有namespace的方法。 那么这个问题要怎么解决呢？强哥今天就带大家通过Apollo源码来看看如何找到解决思路。 入手点 按常理出牌，我们先在Google中搜索一下我们的问题（这里提一下，别用百度，他么的根本定位不到要搜的点）： 第一条搜索结果点进去看看，是其他开发者在github上提的issue: 我们可以看到，作者的回复是：通过open api来获取所有namespace

1.什么是graphql GraphQL 是一个用于 API 的查询语言，是一个使用基于类型系统来执行查询的服务端运行时 下图展示graphql所处的位置 2.优点 1.GraphQL API 有强类型 schema GraphQL schema是强类型的，可使用SDL(GraphQL Schema Definition Language)来定义。比如，可以使用构建工具验证API请求，编译时检查API调用可能发生的错误 2.按需获取 在不添加后端接口的前提下减少不必要的字段，做到前端自主订阅字段 3.使用 vue集成graphql 1.安装vue脚手架 npm install -g vue-cli 2.安装vue-apollo客户端 vue-apollo graphql apollo-client apollo-link apollo-link-http apollo-cache-inmemory graphql-tag 3.webpack.base.conf.js 安装加载器加载graphql后缀文件 { test: /\.(graphql|gql)$/, exclude: /node_modules/, loader: 'graphql-tag/loader' }, 4.main.js 添加 `import { ApolloClient } from` `'apollo