如何在“GraphQL链接模式（客户端和服务器）的反应母语

Posted 2021-05-07

我试图连接使用端点和订阅端点服务器和客户端。我下面阿波罗文档。我无法揣摩出我错了。

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

答案

您需要设置与订阅的网络接口。

尝试这个：

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