Android 设备上的 Apollo 网络错误（React Native）

Posted 2023-02-19

【中文标题】Android 设备上的 Apollo 网络错误（React Native）

【英文标题】：Apollo Network Error on Android Device (React Native)

【发布时间】：2020-08-22 16:24:26

【问题描述】：

所以我在玩 Expo + React Native + yoga graphql server + Apollo Client，通过查询获取数据在浏览器中工作，当我从 Expo 中点击“在浏览器中运行”时，如果我点击“在浏览器中运行”，它会引发网络错误尝试在真手机上的 android 模拟器/二维码上运行该应用程序。附言我在 github 上阅读了类似的帖子和问题，因此我设法使用 nat 和 no-ip 从“外部”访问我的 graphql 端点。 （所以这不是本地主机问题）。这是 console.log(error) 中抛出的错误：

网络错误：网络请求失败 * http://192.168.1.55:19001/node_modules/expo/AppEntry.bundle?platform=android&dev=true&minify=false&hot=false:159227:30 在 ApolloError - ObservableQuery.prototype.getCurrentResult 中的 node_modules/@apollo/client/apollo-client.cjs.js:681:35 - node_modules/@apollo/client/apollo-client.cjs.js:4957:17 in _this.getQueryResult - node_modules/@apollo/client/apollo-client.cjs.js:5083:24 in - node_modules/@apollo/client /apollo-client.cjs.js:5235:22 在使用DeepMemo - node_modules/@apollo/client/apollo-client.cjs.js:5258:4 在 useBaseQuery * http://192.168.1.55:19001/node_modules/expo/AppEntry.bundle?platform=android&dev=true&minify=false&hot=false:157867:42 in - node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:10696:27 in renderWithHooks - node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:12842: updateFunctionComponent 中的 6 - node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:20459:25 in beginWork$$1 - node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:19370： 24 在 performUnitOfWork - node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:19347:39 in workLoopSync - node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:18997:22 in renderRoot * [本机代码]：renderRoot中的null - node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:18709:28 in runRootCallback * [本机代码]：runRootCallback 中的 null - node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:5642:32 in runWithPriority$argument_1 -不稳定的runWithPriority中的node_modules/scheduler/cjs/scheduler.development.js:643:23 -flushSyncCallbackQueueImpl 中的 node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:5638:22 - node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:5627:28 in flushSyncCallbackQueue- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:18556:30 in scheduleUpdateOnFiber - dispatchAction 中的 node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:11484:17 * [本机代码]：dispatchAction 中的 null - obsQuery.subscribe$argument_0.error 中的 node_modules/@apollo/client/apollo-client.cjs.js:5174:26 - node_modules/zen-observable/lib/Observable.js:139:8 在 notifySubscription * http://192.168.1.55:19001/node_modules/expo/AppEntry.bundle?platform=android&dev=true&minify=false&hot=false:165854:23 在 onNotify - node_modules/zen-observable/lib/Observable.js:239:11 出错 * [本机代码]：forEach 中的 null - node_modules/@apollo/client/apollo-client.cjs.js:956:4 in iterateObserversSafely * http://192.168.1.55:19001/node_modules/expo/AppEntry.bundle?platform=android&dev=true&minify=false&hot=false:159700:31 在 onError - 调用中的 node_modules/@apollo/client/apollo-client.cjs.js:2424:20 - info.listeners.forEach$argument_0 中的 node_modules/@apollo/client/apollo-client.cjs.js:2785:24 * [本机代码]：forEach 中的 null - query.forEach$argument_0 中的 node_modules/@apollo/client/apollo-client.cjs.js:2783:34 * [本机代码]：forEach 中的 null - QueryManager.prototype.broadcastQueries 中的 node_modules/@apollo/client/apollo-client.cjs.js:2781:8 * http://192.168.1.55:19001/node_modules/expo/AppEntry.bundle?platform=android&dev=true&minify=false&hot=false:161498:45 在 - tryCallOne 中的 node_modules/promise/setimmediate/core.js:37:14 - setImmediate$argument_0 中的 node_modules/promise/setimmediate/core.js:123:25 - _callTimer 中的 node_modules/react-native/Libraries/Core/Timers/JSTimers.js:146:14 - _callImmediatesPass 中的 node_modules/react-native/Libraries/Core/Timers/JSTimers.js:194:17 - node_modules/react-native/Libraries/Core/Timers/JSTimers.js:458:30 在 callImmediates * [本机代码]：callImmediates 中的 null - __callImmedates 中的 node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:407:6 - __guard$argument_0 中的 node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:143:6 - __guard 中的 node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:384:10 - __guard$argument_0 中的 node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:142:17 * [本机代码]：flushedQueue中的null * [native code]:null in callFunctionReturnFlushedQueue

我做错了什么？ :-(

【参考方案1】：

所以事实证明，如果你想让你的 graphql 端点可以从“外部世界”访问，你必须在 https 下进行，因为 expo 服务器在安全连接上运行，它会拒绝从不安全的连接加载数据。我一直在尝试在 graphql-yoga 服务器上实现 ssl，但归根结底，将 graphql 端点部署到开箱即用的 https 的 heroku 或 prisma 云要快得多！但是，我在上面显示的堆栈错误与 Apollo 没有获取数据无关，因为即使现在它仍然会弹出！我希望这可以帮助其他人腾出一些时间！

【讨论】：

虽然晚了，但对如何解决在本地主机上托管的外部设备上的测试有任何希望吗？当我用模拟器而不是在我的外部设备上测试它时很好。