GraphQL 入门: Apollo Client - 安装和配置选项
安装要在React中使用Apollo,需要按照 npm install react-apollo --save 如果你在一个没有全局fetch实现的环境中(浏览器不支持Fetch API),请确保安装 whatwg-fetch 或则
初始化要在React中使用Apollo,需要创建一个
创建一个客户端创建一个客户端示例,并且指向GraphQL服务器: import { ApolloClient } from 'react-apollo'; // 默认情况客户端会发送到相同主机名(域名)下的/graphql端点 const client = new ApolloClient(); 客户端可以携带各种选项,在特殊情况下,如果你想修改GraphQL服务器的URL,可以创建一个自定义的 import { ApolloClient,createNetworkInterface } from 'react-apollo'; const client = new ApolloClient({ networkInterface: createNetworkInterface({ uri: 'http://my-api.graphql.com' }),});
创建一个Provider要连接客户端实例到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,把 # 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(); } }]); 参考资料
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |