react native - Apollo-client custom network interface to make different gql queries when offline/online? -
i'm developing offline-first expo/react native app, using graphql + apollo client + join monster, , storing data in sqlite db client-side.
my schema (and rest of code) looks similar 1 https://github.com/tslater/reactnative-relay-offline/blob/master/graphql/relay-schema/index.js except instead of using relay, using apollo client graphql client.
i have custom networkinterface looks like:
import schema './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}) and works offline queries.
however, i'm unsure of how adapt in order able make queries against real server when app detects has internet connection. gql query issue against server different 1 issue against local db, if matters. https://github.com/apollographql/apollo-link helpful here?
i found excellent documentation apollo data deals issue, http://dev.apollodata.com/core/network.html#customnetworkinterfaceexample
i combined react-native-offline package me isconnected prop, can pass alongside query variables, , created new hybridnetworkinterface:
import {createnetworkinterface} 'apollo-client' import {createlocalnetworkinterface} './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 } useafter(afterwares) { this.networkinterface.useafter(afterwares) this.localinterface.useafter(afterwares) return } } export function createhybridnetworkinterface(opts) { return new hybridnetworkinterface(opts) }
Comments
Post a Comment