GraphQL 入门: Apollo Client - 安装和配置选项

2024年3月19日 260次阅读 来源: developerworks

GraphQL 入门: 简介
GraphQL 入门: Apollo Client – 简介
GraphQL 入门: Apollo Client – 安装和配置选项
GraphQL 入门: Apollo Client – 连接到数据
GraphQL 入门: Apollo Client – 网络层
GraphQL 入门: Apollo Client – 开发调试工具
GraphQL 入门: Apollo Client – 持久化GraphQL查询概要
GraphQL 入门: Apollo Client – 存储API
GraphQL 入门: Apollo Client – 查询(Batching)合并

安装

要在React中使用Apollo, 需要按照apollo-client包, 以及react-apollo集成包, 以及graphql-tag库用于构造查询文档.

npm install react-apollo --save

如果你在一个没有全局fetch实现的环境中(浏览器不支持Fetch API), 请确保安装 whatwg-fetch 或则

Polyfill是一个英国产品,在美国称之为Spackling Paste(译者注:刮墙的,在中国称为腻子).记住这一点就行:把旧的浏览器想象成为一面有了裂缝的墙.这些[polyfills]会帮助我们把这面墙的裂缝抹平,还我们一个更好的光滑的墙壁(浏览器)

Fetch API 用于代替 XMLHttpRequest
Fetch API 请参考 https://github.github.io/fetch/

初始化

要在React中使用Apollo, 需要创建一个 ApolloClient和一个ApolloProvider.

ApolloClient 用户管理作为缓存的查询存储, 以及分发查询结果. ApolloProvider 用于关联ApolloClient到React组件.

创建一个客户端

创建一个客户端示例, 并且指向GraphQL服务器:

import { ApolloClient } from 'react-apollo';
// 默认情况客户端会发送到相同主机名(域名)下的/graphql端点
const client = new ApolloClient();

客户端可以携带各种选项, 在特殊情况下, 如果你想修改GraphQL服务器的URL, 可以创建一个自定义的NetworkInterface:

import { ApolloClient, createNetworkInterface } from 'react-apollo';
const client = new ApolloClient({
  networkInterface: createNetworkInterface({ uri: 'http://my-api.graphql.com' }),
});

ApolloClient 还有一些控制客户端行为的选项, 在 Use GraphQL with React 文档中可以找到.

创建一个Provider

要连接客户端实例到React组件树, 需要用到ApolloProvider组件. 你需要确保ApolloProvider作为一个容器去包裹其他的需要访问GraphQL服务器数据的React组件.

# 导入需要的模块

import { ApolloClient, ApolloProvider } from 'react-apollo';

# 实例化 ApolloClient

const client = new ApolloClient({
  networkInterface: createNetworkInterface({ uri: 'http://my-api.graphql.com' }),
});

# 挂载组件

ReactDOM.render(
  <ApolloProvider client={client}>
    <MyRootComponent />
  </ApolloProvider>,
  document.getElementById('App')
)

身份验证

对于身份验证, 采用JWT, 把 Token 存储在浏览器的 LocalStorage 里面, 可以通过下面的方法, 设置 Authorization 请求头.

# Middleware, 顾名思义, 中间件, 常用的一种修改软件行为的模式. 
# Windows 编程叫钩子(Hooks), 起拦截器的作用, 这里主要是在请求发出之前, 修改, 增加HTTP请求头.

networkInterface.use([{
  applyMiddleware(req,next) {
    if (!req.options.headers) {
      req.options.headers = {};  // 如果需要, 创建 header 对象.
    }
    
    # 设置 JWT TOKEN
    
    if(localStorage.getItem('token')){
      req.options.headers['Authorization'] = 'Login ' + localStorage.getItem('token')
    }
    
    # 注意, 中间件是一个链, 如果还需要把请求传递给下一个中间件, 这个函数是必须的. 
    # 也可以用于逻辑判断, 满足条件, 网下走, 不满足条件中断流程.
    # if (condition == true) {
    #   next();
    # }
    # else {
    #   console.error("Error: could not meet the condition");
    # }
    next();
  }
}]);

参考资料

    原文作者：developerworks
    原文地址: https://segmentfault.com/a/1190000008632704
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞