useQuery loading state always true

[Johnsgaard]

Issue Description

I am having issues grabbing data from my endpoint when I use apollo/client inside an expo application.

I have configured a brand new app with the following dependencies:

{
  "name": "my cool app name here",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@apollo/client": "^3.9.5",
    "@expo/metro-runtime": "~3.1.3",
    "expo": "~50.0.7",
    "expo-status-bar": "~1.11.1",
    "graphql": "^15.8.0",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.73.4",
    "react-native-web": "~0.19.6"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "react-native-fetch-api": "^3.0.0",
    "react-native-polyfill-globals": "^3.1.0"
  },
  "private": true
}

metro.config.json:

const { getDefaultConfig } = require('@expo/metro-config');

const config = getDefaultConfig(__dirname);

config.resolver.sourceExts.push(
  'cjs'
);

module.exports = config;

Network request is always (pending) and never resolves.

I can grab data from my endpoint via curl, fetch, and oddly enough I can get the apollo/client to work if I switch my react-native imports to react-native-web and run it in the web browser.

I am not sure if this is a React 18 issue, an apollo/client issue but I cannot seem to use apollo/client with a vanilla configuration of expo even when I follow the documentation on installation.

Link to Reproduction

https://docs.expo.dev/get-started/installation/

Reproduction Steps

1. Install expo
2. Configure apollo/client
3. setup client
4. const { data, loading, error } = useQuery(YOUR_QUERY);
5. console.log(data, loading, error);

// output
undefined true undefined

@apollo/client version

3.9.5

[phryneas]

That is indeed weird.

Can you reproduce that behaviour with https://github.com/apollographql/rn-apollo-client-testbed, too?

Ideally, I'd need to see this actually happening, so I really need a reproduction that I can execute on my machine.

[Johnsgaard]

I didn't attempt within rn-apollo-client-testbed. I did manage to clone it down and attempted to get the query to work but this kinda defeats the purpose of getting a graphql endpoint fully functioning on a raw react-native project. I would be curious to see if you can reproduce it by npx create-expo-app FreshApp and then configuring a basic Apollo Client and hitting a public endpoint like https://api.github.com/graphql.

There is a bit too much boilerplate with the testbed and quirks to get it running in development. If it was as simple as cloning installing and running npm run dev but I get something like No development build etc etc.

I am attempting to hit a public facing endpoint which has no problem retrieving data via iQL and other methods. I am curious if this is metro getting in my way or if it is apollo/client.

Oddly enough, I attempted this with Tanstack react-query and produced the same results (always pending). So maybe it has something to do with react-native 0.73.4?

I appreciate the rapid response on this though!

[Johnsgaard]

https://github.com/Johnsgaard/fogtown-rn

here is a public repo with the most basic setup you can have.

git clone [email protected]:Johnsgaard/fogtown-rn.git
cd fogtown-rn
npm install
npm run ios

assuming you have the expo cli

[Johnsgaard]

Also, as a side note. I have gotten a graphql api to work with a previous project but I used apollo-boost at the time.

Here was the previous dependencies for that project:

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject",
    "test": "jest --watchAll"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "@apollo/react-hooks": "^3.1.3",
    "@expo/vector-icons": "^12.0.0",
    "@react-native-community/masked-view": "0.1.10",
    "@react-navigation/bottom-tabs": "^5.0.0",
    "@react-navigation/native": "^5.0.0",
    "@react-navigation/stack": "^5.0.0",
    "@react-navigation/web": "~1.0.0-alpha.9",
    "apollo-boost": "^0.4.7",
    "bad-words": "^3.0.4",
    "expo": "^41.0.0",
    "expo-asset": "~8.3.1",
    "expo-auth-session": "^3.2.3",
    "expo-constants": "~10.1.3",
    "expo-font": "~9.1.0",
    "expo-haptics": "~10.0.0",
    "expo-linear-gradient": "~9.1.0",
    "expo-linking": "~2.2.3",
    "expo-notifications": "~0.11.6",
    "expo-random": "~11.1.2",
    "expo-web-browser": "~9.1.0",
    "graphql": "^14.6.0",
    "jwt-decode": "^2.2.0",
    "moment": "^2.24.0",
    "prop-types": "^15.7.2",
    "react": "^16.13.1",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-41.0.0.tar.gz",
    "react-native-autoheight-webview": "^1.4.2",
    "react-native-gesture-handler": "~1.10.2",
    "react-native-keyboard-aware-scroll-view": "^0.9.2",
    "react-native-linear-gradient": "^2.5.6",
    "react-native-reanimated": "~2.1.0",
    "react-native-safe-area-context": "3.2.0",
    "react-native-screens": "~3.0.0",
    "react-native-snap-carousel": "^4.0.0-beta.4",
    "react-native-spacer": "^1.7.0",
    "react-native-svg": "12.1.0",
    "react-native-svg-animations": "^0.2.5",
    "react-native-swipe-gestures": "^1.0.5",
    "react-native-swipe-list-view": "^2.5.0",
    "react-native-web": "~0.13.12",
    "react-native-webview": "11.2.3",
    "react-native-webview-autoheight": "^1.0.6",
    "unimodules-permissions-interface": "~6.1.0"
  },
  "devDependencies": {
    "@babel/core": "~7.9.0",
    "babel-preset-expo": "8.3.0",
    "jest-expo": "^41.0.0"
  },
  "private": true
}

[phryneas]

It works for me with Android

iOS is hanging, though.

The thing is: Apollo Client doesn't contain any code that would execute differently between iOS or Android.
Since it works on Android, and you are seeing the same problem with TanStack Query on iOS, I would assume that this is some kind of bug with React Native and iOS.
Unfortunately, that's out of our control. You'd have to bring that up over in the React Native or Expo repositories.

Since there is nothing we can do about it, I'm closing this issue here. I hope you find a fix soon!

[github-actions]

Do you have any feedback for the maintainers? Please tell us by taking a one-minute survey. Your responses will help us understand Apollo Client usage and allow us to serve you better.

[Johnsgaard]

Thank you for taking a look! I hope so too!

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
For general questions, we recommend using StackOverflow or our discord server.