React native Apollo客户端自定义网络接口,以在脱机/联机时进行不同的gql查询?

React native Apollo客户端自定义网络接口,以在脱机/联机时进行不同的gql查询?,react-native,offline,graphql,react-apollo,apollo-client,React Native,Offline,Graphql,React Apollo,Apollo Client,我正在开发一个离线的first Expo/React原生应用程序,使用GraphQL+Apollo Client+Join Monster,并将数据存储在sqlite db客户端 我的模式(以及代码的其余部分)看起来非常类似于此模式,只是没有使用中继,而是使用Apollo客户端作为我的GraphQL客户端 我有一个自定义的networkInterface,看起来像: import schema from './graphql/relay-schema' class LocalNetworkIn

我正在开发一个离线的first Expo/React原生应用程序,使用GraphQL+Apollo Client+Join Monster,并将数据存储在sqlite db客户端

我的模式(以及代码的其余部分)看起来非常类似于此模式,只是没有使用中继,而是使用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})
这对于离线查询非常有效


然而,我不确定如何调整它,以便在应用程序检测到它有互联网连接时能够对真实的服务器进行查询。我将针对服务器发出的gql查询与针对本地db发出的gql查询略有不同,如果这很重要的话。这里有什么有用的吗?

我从阿波罗数据中找到了一些非常好的文档,这些文档正好处理了这个问题

我将其与软件包相结合,得到了一个
isConnected
道具,我可以将其与我的一起传递,并创建了一个新的
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)
}