Fetch stuck in (pending) iOS

[Johnsgaard]

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

1. git clone [email protected]:Johnsgaard/fogtown.git
2. npm install
3. 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

[Johnsgaard]

[mekanics]

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:

• https://github.com/facebook/react-native/issues/20405
• https://github.com/facebook/react-native/issues/41637

[mekanics]

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]

@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]

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]

@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]

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 😛.

[rodrigodiasf1984]

Any update on this? I've the same problem at the RN074.1

[hakonk]

I recently fixed a data race in RCTNetworkTask related to the status of the task. Probably a long shot, but do you have any thoughts on whether this fix may affect the issue you are describing here: https://github.com/facebook/react-native/issues/44694 ?

[hakonk]

If not, it would be interesting to know how the mentioned example behaves with breakpoints enabled to see how it ends up being stuck in pending mode.

[hakonk]

@Johnsgaard FYI 👆

[Johnsgaard]

@hakonk I will take a look ASAP. Do you have a version number?

[hakonk]

@Johnsgaard it's not released yet, so I guess you need to fetch the branch in the PR I submitted

[Johnsgaard]

@hakonk I can't seem to install react-native#fix/data-race-RCTNetworkTask branch. Will you update me when this merges and I will try to update my react-native version and test this.

[hakonk]

@Johnsgaard did you set my fork of the repo instead of Facebook's?

[hakonk]

@Johnsgaard it's been merged into main now: https://github.com/facebook/react-native/commit/b1ec698dc4baf34ba2e31b7ad43dff97c229bf99

[Johnsgaard]

@hakonk thanks! I will give it a go.

[jaaywags]

Was this part of the 0.74.4 or 0.74.5 release?

I am having (I think) the same issue in my React Native Expo app.

"expo": "~51.0.22"
"react-native": "0.74.5", (just upgraded from 0.74.3)

I even tried expo version 51.0.26.

How can I try applying your PR changes to my app if they are not released yet?

UPDATE: I am sorry. IDK why but I just deleted my android emulator and created a new one and now all my api calls work. None of them were working before (android only). They just got "stuck" which is why I landed here. They worked fine on ios simulator and now on the new emulator.

[hakonk]

@jaaywags My PR only pertains to iOS. Not sure if it did resolve the issue @Johnsgaard experienced. Since then, I have had other PRs related to fixing data races merged. I believe 0.74.5 should contain all relevant to this issue. I have however not checked whether they fix this issue. I was merely curious whether the fixes could fix this as well.