Apollo客户端自定义网络界面在离线/在线时进行不同的gql查询？

Question

我正在使用GraphQL + Apollo Client + Join Monster开发离线优先的Expo/React Native应用程序，并将数据存储在sqlite数据库客户端。

我的模式（和其他代码）看起来非常类似于这个https://github.com/tslater/reactnative-relay-offline/blob/master/graphql/relay-schema/index.js，除了代替使用中继，我使用Apollo客户端作为我的GraphQL客户端。

我有一个自定义的NetworkInterface看起来像：

import schema from './graphql/relay-schema' 

class LocalNetworkInterface implements NetworkInterface { 
    constructor(schema) { 
    this.schema = schema 
    } 
    query(request) { 
    const { query, variables } = request 
    return graphql(
     this.schema, 
     printAST(query), 
     null, 
     null, 
     variables, 
    ) 
    } 
    getSchema() { 
    return this.schema 
    } 
} 

export function createLocalNetworkInterface(options) { 
    const { schema } = options 
    return new LocalNetworkInterface(schema) 
} 

const networkInterface = createLocalNetworkInterface({ schema }) 
const client = new ApolloClient({networkInterface}) 

，这非常适用于离线查询。

但是，我不确定如何适应这种情况，以便能够在应用程序检测到它具有Internet连接时对真实服务器进行查询。我对服务器发出的gql查询与我在本地数据库中发出的问题略有不同，如果这很重要的话。是https://github.com/apollographql/apollo-link在这里会有帮助吗？

Answer 1

我发现从阿波罗数据的一些优秀的文档与此问题涉及准确，http://dev.apollodata.com/core/network.html#CustomNetworkInterfaceExample

我与react-native-offline包，给我拿个isConnected道具，我可以通过旁边我query variables结合这一点，并创建了一个新的HybridNetworkInterface：

import {createNetworkInterface} from 'apollo-client' 
import {createLocalNetworkInterface} from './LocalNetworkInterface' 

export class HybridNetworkInterface { 
    constructor(opts) { 
    this.localInterface = createLocalNetworkInterface(opts) 
    this.networkInterface = createNetworkInterface(opts) // createNetworkInterface 
    } 
    query(request) { 
    if (request.variables && request.variables.isConnected) { 
     return this.networkInterface.query(request) 
    } 
    return this.localInterface.query(request) 
    } 
    use(middlewares) { 
    this.networkInterface.use(middlewares) 
    this.localInterface.use(middlewares) 
    return this 
    } 
    useAfter(afterwares) { 
    this.networkInterface.useAfter(afterwares) 
    this.localInterface.useAfter(afterwares) 
    return this 
    } 
} 

export function createHybridNetworkInterface(opts) { 
    return new HybridNetworkInterface(opts) 
}