apollo-client: useLazyQuery throw error when error data is null or undefined

Issue Description

After I upgraded to version 3.8, I noticed that if I call the function returned by useLazyQuery hook and the data field of the error is null, my app instantly crash even if I wrapped the function call in try and catch block.

Simulator Screenshot - iPhone 14 - 2023-08-14 at 22 17 55

Link to Reproduction

https://github.com/quocluongha/rn-apollo-test

Reproduction Steps

  1. Install React Native CLI.
  2. Run npm install or yarn install.
  3. Run npm run start or yarn start.
  4. Run npm run android / yarn android for Android or npm run ios / yarn ios for iOS.
  5. Press the “Get Data” button.

About this issue

  • Original URL
  • State: closed
  • Created a year ago
  • Reactions: 1
  • Comments: 23 (9 by maintainers)

Most upvoted comments

@quocluongha thanks for the ping! I have to admit, I missed your reproduction - when you originally filed the issue, I was on vacation (I’m @plausible-phry), and I scrolled by it every time after.

With your reproduction, I can see the error, and it seems to be an internal timing problem that for some curious reason only happens in React Native.

I am working on a fix (still digging for the original reason of this!), but here is a workaround you can already use: you need to add a link that slightly delays the onComplete callback:

-import {ApolloClient, ApolloProvider, InMemoryCache} from '@apollo/client';
+import {ApolloClient, ApolloProvider, HttpLink, InMemoryCache, Observable, ApolloLink} from '@apollo/client';
 import {loadDevMessages, loadErrorMessages} from '@apollo/client/dev';
 import React from 'react';
 import {StyleSheet} from 'react-native';
 import {TestScreen} from './TestScreen';
 
+const delayCompletionLink = new ApolloLink((operation, forward) => {
+  const observable = forward(operation);
+  const observer = new Observable(obs => {
+    observable.subscribe({
+      next(r) {
+        obs.next(r);
+      },
+      error(e) {
+        obs.error(e);
+      },
+      complete() {
+        setTimeout(() => {
+          obs.complete();
+        }, 100);
+      },
+    });
+  });
+  return observer;
+});
+
 const client = new ApolloClient({
-  uri: 'https://hasura.sukimashopping.com/v1/graphql',
   cache: new InMemoryCache(),
+  link: delayCompletionLink.concat(
+    new HttpLink({uri: 'https://hasura.sukimashopping.com/v1/graphql'}),
+  ),
 });

I think I might have solved this.

Could you please try the build from #11249 ?

npm i @apollo/client@0.0.0-pr-11249-20230925145112

This seemed to fix the error for me.

I think I might have solved this.

Could you please try the build from #11249 ?


npm i @apollo/client@0.0.0-pr-11249-20230925145112

I’ll give it a try tomorrow!

I think I might have solved this.

Could you please try the build from #11249 ?

npm i @apollo/client@0.0.0-pr-11249-20230925145112

In our case we are using onError callback. It seems I need to delay on Error as well. I feel like it’s related to Hermes engine. @phryneas