如何在“GraphQL for react-native”中链接模式（客户端和服务器）答案

【问题标题】：How to link schema (client and server) in “GraphQL for react-native如何在“GraphQL for react-native”中链接模式（客户端和服务器）
【发布时间】：2019-07-02 16:50:24
【问题描述】：

我正在尝试使用端点和订阅端点连接服务器和客户端。我正在关注 appolo 文档。我不知道我错在哪里。

import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View } from 'react-native';
import ApolloClient from "apollo-boost";
import gql from 'graphql-tag';
import { ApolloProvider } from "react-apollo";
import { WebSocketLink } from 'apollo-link-ws';
import { SubscriptionClient } from 'subscriptions-transport-ws';
import { HttpLink } from 'apollo-link-http';
import Navigator from './app/Navigator'
import { createStackNavigator, createAppContainer } from 'react-navigation';
const httpLink = new HttpLink({
  uri: 'https://api.graph.cool/simple/v1/cjrt2a37a5y4d0151eizuzi50'
})

const WsLink = new WebSocketLink({
  uri: 'wss://subscriptions.us-west-2.graph.cool/v1/cjrt2a37a5y4d0151eizuzi50',
  options: {
    reconnect: true
  }
})
const client = new ApolloClient(
  {
    httpLink: WsLink,
  }
)

export default class App extends Component {
  render() {
    return (
      <ApolloProvider client={client}>
        <Navigator />
      </ApolloProvider>
    )
      ;
  }
}

【问题讨论】：

标签： react-native graphql apollo

【解决方案1】：

您需要设置一个带有订阅的网络接口。

试试这个：

import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View } from 'react-native';
import ApolloClient, {createNetworkInterface} from "apollo-boost";
import gql from 'graphql-tag';
import { ApolloProvider } from "react-apollo";
import { SubscriptionClient } from 'subscriptions-transport-ws';
import Navigator from './app/Navigator'
import { createStackNavigator, createAppContainer } from 'react-navigation';

// Create regular NetworkInterface by using apollo-client's API:
const networkInterface = createNetworkInterface({
    uri: 'https://api.graph.cool/simple/v1/cjrt2a37a5y4d0151eizuzi50' // Your GraphQL endpoint
});


// Create WebSocket client
const wsClient = new SubscriptionClient(`wss://subscriptions.us-west-2.graph.cool/v1/cjrt2a37a5y4d0151eizuzi50`, {
    reconnect: true
});


// Extend the network interface with the WebSocket
const networkInterfaceWithSubscriptions = addGraphQLSubscriptions(
    networkInterface,
    wsClient
);


const client = new ApolloClient(
    {
      networkInterface: networkInterfaceWithSubscriptions
    }
)

export default class App extends Component {
  render() {
    return (
      <ApolloProvider client={client}>
        <Navigator />
      </ApolloProvider>
    )
      ;
  }
}

【讨论】：