Apollo Network Error on Android Device (React Native)

Question

So I'm playing around with Expo + React Native + yoga graphql server + Apollo Client, data fetching with queries works in browser, when from Expo I click on "Run in Browser", but it throws a network error if I try to run the app on android simulator/qr code from real phone. P.S. I read similar posts and issues on github so I managed to make my graphql endpoint reachable from "outside" with nat and no-ip. (so it's not the localhost problem). Here's the error thrown in the console.log(error):

Network error: Network request failed
* http://192.168.1.55:19001/node_modules/expo/AppEntry.bundle?platform=android&dev=true&minify=false&hot=false:159227:30 in ApolloError
- node_modules/@apollo/client/apollo-client.cjs.js:681:35 in ObservableQuery.prototype.getCurrentResult
- 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 in useDeepMemo
- node_modules/@apollo/client/apollo-client.cjs.js:5258:4 in 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:6 in updateFunctionComponent - 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 in 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
* [native code]:null in renderRoot - node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:18709:28 in runRootCallback * [native code]:null in runRootCallback - node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:5642:32 in runWithPriority$argument_1 - node_modules/scheduler/cjs/scheduler.development.js:643:23 in unstable_runWithPriority - node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:5638:22 in flushSyncCallbackQueueImpl - 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 - node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:11484:17 in dispatchAction * [native code]:null in dispatchAction - node_modules/@apollo/client/apollo-client.cjs.js:5174:26 in obsQuery.subscribe$argument_0.error - node_modules/zen-observable/lib/Observable.js:139:8 in notifySubscription * http://192.168.1.55:19001/node_modules/expo/AppEntry.bundle?platform=android&dev=true&minify=false&hot=false:165854:23 in onNotify - node_modules/zen-observable/lib/Observable.js:239:11 in error * [native code]:null in forEach - 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 in onError - node_modules/@apollo/client/apollo-client.cjs.js:2424:20 in invoke - node_modules/@apollo/client/apollo-client.cjs.js:2785:24 in info.listeners.forEach$argument_0 * [native code]:null in forEach - node_modules/@apollo/client/apollo-client.cjs.js:2783:34 in queries.forEach$argument_0 * [native code]:null in forEach - node_modules/@apollo/client/apollo-client.cjs.js:2781:8 in QueryManager.prototype.broadcastQueries * http://192.168.1.55:19001/node_modules/expo/AppEntry.bundle?platform=android&dev=true&minify=false&hot=false:161498:45 in - node_modules/promise/setimmediate/core.js:37:14 in tryCallOne - node_modules/promise/setimmediate/core.js:123:25 in setImmediate$argument_0 - node_modules/react-native/Libraries/Core/Timers/JSTimers.js:146:14 in _callTimer - node_modules/react-native/Libraries/Core/Timers/JSTimers.js:194:17 in _callImmediatesPass - node_modules/react-native/Libraries/Core/Timers/JSTimers.js:458:30 in callImmediates * [native code]:null in callImmediates - node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:407:6 in __callImmediates - node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:143:6 in __guard$argument_0 - node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:384:10 in __guard - node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:142:17 in __guard$argument_0 * [native code]:null in flushedQueue * [native code]:null in callFunctionReturnFlushedQueue

what am I doing wrong? :-(

Answer 1

So it turns out that if you want to make your graphql endpoint accessible from the "external world" you have to make this under https because expo server runs on a secure connection and it will refuse to load data from an insecure one. I've been trying to implement ssl over graphql-yoga server but at the end of the day it was much faster to deploy the graphql endpoint to heroku or prisma cloud where https is offered out of the box! The stack error I showed above, though, had nothing to do with Apollo not fetching the data, as it still pops out even now! I hope this helps other people spare some time!