Fetch stuck in (pending) iOS

Johnsgaard commented 9 months ago

Description

https://github.com/apollographql/apollo-client/issues/11608

I have opened an issue with apollo/client as I was under the assumption that it was an issue with that library. It turns out that this might be something that is more on the react-native / iOS specific side of things.

Steps to reproduce

git clone git@github.com:Johnsgaard/fogtown.git
npm install
npm run ios (assuming you have expo)

React Native Version

0.73.4

Affected Platforms

Runtime - iOS

Output of `npx react-native info`

System:
  OS: macOS 14.1.2
  CPU: (10) arm64 Apple M1 Pro
  Memory: 994.88 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 20.10.0
    path: ~/.nvm/versions/node/v20.10.0/bin/node
  Yarn: Not Found
  npm:
    version: 10.2.3
    path: ~/.nvm/versions/node/v20.10.0/bin/npm
  Watchman: Not Found
Managers:
  CocoaPods: Not Found
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.2
      - iOS 17.2
      - macOS 14.2
      - tvOS 17.2
      - visionOS 1.0
      - watchOS 10.2
  Android SDK: Not Found
IDEs:
  Android Studio: Not Found
  Xcode:
    version: 15.2/15C500b
    path: /usr/bin/xcodebuild
Languages:
  Java: Not Found
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.73.4
    wanted: 0.73.4
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Stacktrace or Logs

No stack trace. Network request on iOS is locked on (pending) when making a request.

Reproducer

https://github.com/Johnsgaard/fogtown

Screenshots and Videos

![Uploading Screenshot 2024-02-21 at 10.25.22 AM.png…]()

Johnsgaard commented 9 months ago

mekanics commented 8 months ago

I'm having the same issue, but with redux-toolkit & rtk query.

First I thought there was an issue with the pollingInterval of the queries, but at some point I was able to observe a request being sent, but never resolved in Flipper.

Reinstalling the app helps ... for a day or two.

Currently I'm using react-native v0.73.5 (upgraded while trying to solve that issue), but the problem already occurred with v0.72.7.

I wasn't able to see the request when using a proxy like proxyman.

Maybe it has something to do with:

mekanics commented 7 months ago

I was able to solve the issue in our project by replacing @babel/plugin-proposal-class-properties, which is deprecated, with @babel/plugin-transform-class-properties in the @react-native/babel-preset lib.

here is the patch I use

diff --git a/node_modules/@react-native/babel-preset/src/configs/main.js b/node_modules/@react-native/babel-preset/src/configs/main.js
index e921b1b..a45aafa 100644
--- a/node_modules/@react-native/babel-preset/src/configs/main.js
+++ b/node_modules/@react-native/babel-preset/src/configs/main.js
@@ -28,7 +28,7 @@ const defaultPlugins = [
   [require('@babel/plugin-syntax-flow')],
   [require('babel-plugin-transform-flow-enums')],
   [require('@babel/plugin-transform-block-scoping')],
-  [require('@babel/plugin-proposal-class-properties'), {loose}],
+  [require('@babel/plugin-transform-class-properties'), {loose}],
   [require('@babel/plugin-transform-private-methods'), {loose}],
   [require('@babel/plugin-transform-private-property-in-object'), {loose}],
   [require('@babel/plugin-syntax-dynamic-import')],

Johnsgaard commented 7 months ago

@mekanics Amazing 👏

I updated my @react-native/babel-preset but I still can't seem to get it to respond. I am wondering if I am doing something wrong when bundling the app for iOS. This will require an up-stream change I assume?

Are you using expo to bundle / simulate your app?

Johnsgaard commented 7 months ago

I also confirmed that the endpoint works inside the safari of the simulated iOS device:

I couldn't get the plugin change to work though 😕

mekanics commented 7 months ago

@mekanics Amazing 👏

I updated my @react-native/babel-preset but I still can't seem to get it to respond. I am wondering if I am doing something wrong when bundling the app for iOS. This will require an up-stream change I assume?

Are you using expo to bundle / simulate your app?

No I'm not using expo.

Is your issue always occurring? I'm asking because, I had a hard time testing/reproducing it. The problem only occurred after some time (mostly after a day or two).

Johnsgaard commented 7 months ago

Yeah, unfortunately I can't get it passed the (pending) step no matter what I do.

The strange thing is it works in android, curl requests are completely fine, but when I switch out the apollo-client to another api endpoint it returns in iOS. This makes me feel like it is a server configuration on my end but I can't figure it out for the life of me. I might just move my API to another host and see if that helps in anyway. Probably something to do with the SSL certs or something internal to apple that I have no idea how to resolve 😛.