GraphQL 入门: Apollo Client - 网络层
配置网络接口要创建一个网络接口使用 createNetworkInterface 下面的示例用自定义端点初始化一个新的Client: import ApolloClient,{ createNetworkInterface } from 'apollo-client'; const networkInterface = createNetworkInterface({ uri: 'https://example.com/graphql' }); const client = new ApolloClient({ networkInterface,}); 如果需要,还可以传递额外的选项给fetch: import ApolloClient,{ createNetworkInterface } from 'apollo-client'; const networkInterface = createNetworkInterface({ uri: 'https://example.com/graphql',opts: { // Additional fetch options like `credentials` or `headers` credentials: 'same-origin',} }); const client = new ApolloClient({ networkInterface,}); 中间件(Middleware)
import ApolloClient,{ createNetworkInterface } from 'apollo-client'; const networkInterface = createNetworkInterface({ uri: '/graphql' }); networkInterface.use([{ applyMiddleware(req,next) { if (!req.options.headers) { req.options.headers = {}; // 如果需要,创建 header 对象. } req.options.headers['authorization'] = localStorage.getItem('token') ? localStorage.getItem('token') : null; next(); } }]); const client = new ApolloClient({ networkInterface,}); 下面的例子显示如何使用多个中间件: import ApolloClient,{ createNetworkInterface } from 'apollo-client'; const networkInterface = createNetworkInterface({ uri: '/graphql' }); # 用于请求GraphQL服务器的身份标识 const token = 'first-token-value'; const token2 = 'second-token-value'; # 第一个中间件 const exampleWare1 = { applyMiddleware(req,next) { if (!req.options.headers) { req.options.headers = {}; // Create the headers object if needed. } req.options.headers['authorization'] = token; next(); } } # 第二个中间件 const exampleWare2 = { applyMiddleware(req,next) { if (!req.options.headers) { req.options.headers = {}; // Create the headers object if needed. } req.options.headers['authorization'] = token2; next(); } } # 以对象数组的方式传递 networkInterface.use([exampleWare1,exampleWare2]); # 初始化客户端 const client = new ApolloClient({ networkInterface,}); AfterwareAfterware 用户请求发送后,并且HTTP响应从服务器返回的时候,一般用于处理HTTP请求的响应. 与中间件不同的是,
下面是一个 Afterware 的例子: import ApolloClient,{ createNetworkInterface } from 'apollo-client'; import {logout} from './logout'; const networkInterface = createNetworkInterface({ uri: '/graphql' }); # 这里使用的是 useAfter networkInterface.useAfter([{ applyAfterware({ response },next) { if (response.status === 401) { logout(); } next(); } }]); const client = new ApolloClient({ networkInterface,}); 多个Afterware的例子: import ApolloClient,{ createNetworkInterface } from 'apollo-client'; import {redirectTo} from './redirect'; const networkInterface = createNetworkInterface({ uri: '/graphql' }); const exampleWare1 = { applyAfterware({ response },next) { if (response.status === 500) { console.error('Server returned an error'); } next(); } } const exampleWare2 = { applyAfterware({ response },next) { if (response.status === 200) { redirectTo('/'); } next(); } } networkInterface.useAfter([exampleWare1,exampleWare2]); const client = new ApolloClient({ networkInterface,}); Chaining (链起来)networkInterface.use([exampleWare1]) .use([exampleWare2]) .useAfter([exampleWare3]) .useAfter([exampleWare4]) .use([exampleWare5]); 自定义网络接口可以自定义以不同的方式向GraphQL服务器发送查询或数据更新请求,这样做有几个原因:
Query batchingQuery batching 是这样一个概念,当多个请求在一个特定的时间间隔内产生时(比如: 100毫秒内),Apollo 会把多个查询组合成一个请求,比如在渲染一个包含导航条,边栏,内容等带有GraphQL查询的组件时,Query batching 要求服务支持 使用Query batching,要传递 import ApolloClient,{ createBatchingNetworkInterface } from 'apollo-client'; const batchingNetworkInterface = createBatchingNetworkInterface({ uri: 'localhost:3000',batchInterval: 10,opts: { // 传递给`fetch`的选项 } }); const apolloClient = new ApolloClient({ networkInterface: batchingNetworkInterface,}); apolloClient.query({ query: firstQuery }); apolloClient.query({ query: secondQuery }); Query batching 是怎么工作的Query batching 是传输层机制,需要服务器的支持(比如 graphql-server,如果服务器不支持,请求会失败. 如果服务器打开了 Query batching,多个请求会组合到一个数组中: [{ query: `query Query1 { someField }`,variables: {},operationName: 'Query1',},{ query: `query Query2 ($num: Int){ plusOne(num: $num) }`,variables: { num: 3 },operationName: 'Query2',}] 查询去除重复(Query deduplication)查询去重可以减少发送到服务器的查询数量,默认关闭,可通过 const apolloClient = new ApolloClient({ networkInterface: batchingNetworkInterface,queryDeduplication: true,}); 查询去重在多个组件显示相同数据的时候非常有用. 避免从服务器多次获取相同的数据. 接口这里有几个和网络请求相关的接口,通过这些接口,你可以自定义如何处理网络请求和响应 http://dev.apollodata.com/cor... (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |