React Native Apollo 错误：“网络错误：网络请求失败”答案

【问题标题】：React Native Apollo error: "Network error: Network request failed"React Native Apollo 错误：“网络错误：网络请求失败”
【发布时间】：2018-01-09 09:16:21
【问题描述】：

在 IOS 上，应用程序可以正常运行。但在 Android 上，我收到此错误。这是我在客户端和服务器中的配置。请帮忙！

错误： Error image

这是客户端的配置：

import ApolloClient, { createNetworkInterface } from 'apollo-client';
import { SubscriptionClient, addGraphQLSubscriptions } from 'subscriptions-transport-ws';

const networkInterface = createNetworkInterface({ uri: 'http://localhost:3000/graphql' });

const wsClient = new SubscriptionClient('ws://localhost:3000/subscriptions', {
  reconnect: true,
});

const networkInterfaceWithSubscriptions = addGraphQLSubscriptions(
  networkInterface,
  wsClient,
);

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

这是服务器上的配置：

import express from 'express';
import {
  graphqlExpress,
  graphiqlExpress,
} from 'graphql-server-express';
import bodyParser from 'body-parser';
import cors from 'cors';
import { execute, subscribe } from 'graphql';
import { createServer } from 'http';
import { SubscriptionServer } from 'subscriptions-transport-ws';
import { schema } from './schema';

const PORT = 3000;
const server = express();

server.use('*', cors({ origin: 'http://localhost:8081' }));
server.use('/graphql', bodyParser.json(), graphqlExpress({ schema }));
server.use('/graphiql', graphiqlExpress({
  endpointURL: '/graphql',
  subscriptionsEndpoint: 'ws://localhost:3000/subscriptions',
}));

// We wrap the express server so that we can attach the WebSocket for subscriptions
const ws = createServer(server);
ws.listen(PORT, () => {
  console.log('GraphQL Server is running');
  // Set up the WebSocket for handling GraphQL subscriptions
  new SubscriptionServer({
    execute,
    subscribe,
    schema
  }, {
    server: ws,
    path: '/subscriptions',
  });
});

我正在使用 react-apollo：1.4.10，apollo-client：1.9.0-0

【问题讨论】：

标签： android networking react-native graphql apollo

【解决方案1】：

我遇到了同样的问题，我在这里找到了解决方案https://github.com/apollographql/apollo-client/issues/1757

基本上你需要在createNetworkInterface函数中使用你电脑的ip地址，所以改一下：

const networkInterface = createNetworkInterface({ uri: 'http://localhost:3000/graphql' });

到这里：

const networkInterface = createNetworkInterface({ uri: 'http://YOURIPADDRESS:3000/graphql' });

【讨论】：

我尝试设置IP地址，它在真实设备上工作。但是在android模拟器上，它不起作用。
啊，是的，对不起，我忘了说我使用的是真实设备。

【解决方案2】：

基本上，您必须将 lochalhost 替换为您机器的 IP 地址。该问题已在此处报告，https://github.com/apollographql/apollo-client/issues/1757

要检查您的 IP 地址，请参阅此视频https://www.youtube.com/watch?v=TRFtQzx0Y0M

【讨论】：

是的，必须使用实际机器本地ip地址，而不是localhost或127.0.0.1

【解决方案3】：

由于我在模拟器上工作，因此将 localhost 更改为 127.0.0.1 对我有用：

const link = new HttpLink({ uri: 'http://127.0.0.1:3500/graphql' });

const client = new ApolloClient({
  link,
  cache
})

【讨论】：

【解决方案4】：

您应该在 CMD for windows 中使用 ipconfig 检查您的 ipv4 地址。你会找到两个ipv4地址，复制第二个。然后在你的graphql url中替换'localhost'。像这样

const LOCAL_SYSTEM_IP_ADDRESS = '192.168.1.6';
const PORT = '3000';
export const Config = {
  GRAPHQL_URL: `http://${LOCAL_SYSTEM_IP_ADDRESS}:${PORT}/graphql`,
};

【讨论】：

【解决方案5】：

在 Android 设备或模拟器上，“localhost”和“127.0.0.1”指的是运行应用程序的设备或模拟器，而不是连接的/主机。您可以将端口从设备/模拟器转发到您的开发机器，并继续在您的设备上使用“localhost”。

例如：

# For service running on port 8000
adb reverse tcp:8000 tcp:8000

端口不需要匹配。这在运行多个服务或多个应用程序时很有用。

# To use localhost:8080 in your app, with a service running on 8000
adb reverse tcp:8080 tcp:8000

在安装/启动应用程序时添加自动运行的命令可能很有用

// In your package.json
{
  // ...
  scripts: {
    // "android": "react-native run-android", becomes
    "android": "adb reverse tcp:8000 tcp:8000 ; react-native run-android",
    // ...

【讨论】：