Interface réseau personnalisée Apollo-client pour faire différentes requêtes gql hors ligne/en ligne?

Question

Je développe une première application Expo/React Native hors ligne, en utilisant GraphQL + Apollo Client + Join Monster, et en stockant les données dans un client sqlite db.

Mon schéma (et le reste du code) ressemble beaucoup à celui-ci https://github.com/tslater/reactnative-relay-offline/blob/master/graphql/relay-schema/index.js sauf qu'au lieu d'utiliser Relay, j'utilise Apollo Client comme client GraphQL.

J'ai un NetworkInterface personnalisé qui ressemble à:

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

et cela fonctionne bien pour les requêtes hors ligne.

Cependant, je ne suis pas sûr de la façon de l'adapter afin de pouvoir faire des requêtes contre un serveur réel lorsque l'application détecte qu'elle a une connexion Internet. La requête gql que je publierais contre le serveur est légèrement différente de celle que j'émets contre la base de données locale, si cela est important. Est-ce que https://github.com/apollographql/apollo-link est quelque chose qui serait utile ici?

Answer 1

J'ai trouvé quelques excellents documents d'Apollo données qui traite exactement de cette question, http://dev.apollodata.com/core/network.html#CustomNetworkInterfaceExample

Je combiné cela avec le paquet react-native-offline pour me un accessoire isConnected, que je peux passer à côté de mon query variables, et a créé une nouvelle 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) 
}