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

Posted 2023-03-10

【中文标题】如何在“GraphQL for react-native”中链接模式（客户端和服务器）

【英文标题】：How to link schema (client and server) in “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>
    )
      ;
  

【参考方案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>
    )
      ;