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) 
}