2017-08-15 9 views
1

私は、GraphQL + Apollo Client + Join Monsterを使用してオフラインで最初のExpo/Reactネイティブアプリを開発し、sqlite dbクライアント側にデータを保存しています。オフライン/オンライン時に異なるgqlクエリを作成するためのApollo-clientカスタムネットワークインターフェイス

私のスキーマ(およびその他のコード)は、Relayを使用する代わりにhttps://github.com/tslater/reactnative-relay-offline/blob/master/graphql/relay-schema/index.jsと非常によく似ていますが、私はGrapholクライアントとしてApollo Clientを使用しています。

私は次のようになりますカスタムネットワークインターフェースがあります。

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

と、これはオフラインのクエリに適していますが。

しかし、実際のサーバーがインターネットに接続されていることが検出されたときに、実際のサーバーに対してクエリを実行できるようにするには、これをどのように適応させるべきかわかりません。サーバーに対して発行するgqlクエリは、ローカルデータベースに対して発行するものとは少し異なります(重要な場合)。 https://github.com/apollographql/apollo-linkここに参考になるものがありますか?

答えて

1

私は私が私が私のquery variablesと一緒に渡すことができますisConnected小道具を取得するためにreact-native-offlineパッケージでこれを組み合わせて、新しいを作成しhttp://dev.apollodata.com/core/network.html#CustomNetworkInterfaceExample

、まさにこの問題を扱うアポロデータからいくつかの優れたドキュメントを見つけました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) 
} 
関連する問題