React-Native useMutation: Promise/hook not returning

[dota-coach]

Issue Description

When GraphQL errors occur in my useMutation hooks in react-native, then the hook does not return.

Two comments:

• When I run the same react components/customized hooks in the browser, it works fine
• The onError link reports the error, but Apollo somehow does not propagate the error to the useMutation hook

Here is my use of the mutation hook:

export const anonymousAccept = gql`
  mutation anonymousAccept($code: String!) {
    anonymousAccept(code: $code) {
      invitee
      inviter
    }
  }
`;

export function useAnonymousAccept() {
  const [anonymousAcceptQuery, {loading, error, data}] =
    useMutation(anonymousAccept);

  React.useEffect(() => {
    Logger.log(`useAnonymousAccept(): Error: `, error);
  }, [error]); // Note: The error never gets logged.

  React.useEffect(() => {
    Logger.log(`useAnonymousAccept(): loading: `, loading);
  }, [loading]);

  React.useEffect(() => {
    Logger.log(`useAnonymousAccept(): data: `, data);
  }, [data]);

  const accept = (
    code: string,
  ): Promise<
    FetchResult<{anonymousAccept: {invitee: string; inviter: string}}>
  > => {
    return anonymousAcceptQuery({variables: {code}});
  };

  return {accept, acceptLoading: loading, acceptData: data, acceptError: error};
}

Error reported by onError link:

createClient.errorLink.onError.graphQLErrors(): {"path":["anonymousAccept"],"data":null,"errorType":null,"errorInfo":null,"locations":[{"line":2,"column":3,"sourceName":null}],"message":"CantInviteOneself"}

Package.json:

{
  "name": "skelly",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start",
    "test": "jest",
    "i18n": "node src/i18n/generate_i18n.js",
    "crowdin": "crowdin download && node src/i18n/generate_i18n.js"
  },
  "dependencies": {
    "@apollo/client": "^3.8.1",
    "@aws-appsync/utils": "^1.2.4",
    "@aws-sdk/chunked-blob-reader-native": "^3.310.0",
    "@aws-sdk/client-appsync": "^3.344.0",
    "@aws-sdk/client-cognito-identity-provider": "^3.344.0",
    "@aws-sdk/client-kinesis-video": "^3.363.0",
    "@aws-sdk/client-kinesis-video-signaling": "^3.363.0",
    "@aws-sdk/client-lambda": "^3.344.0",
    "@aws-sdk/client-ses": "^3.369.0",
    "@aws-sdk/credential-providers": "^3.344.0",
    "@aws-sdk/lib-dynamodb": "^3.344.0",
    "@aws-sdk/node-http-handler": "^3.344.0",
    "@react-native-async-storage/async-storage": "^1.18.0",
    "@react-native-community/datetimepicker": "^7.0.1",
    "@react-native-community/netinfo": "^9.3.9",
    "@react-native-firebase/analytics": "^18.3.0",
    "@react-native-firebase/app": "^18.3.0",
    "@react-native-firebase/messaging": "^18.3.0",
    "@react-navigation/bottom-tabs": "^6.5.7",
    "@react-navigation/drawer": "^6.6.2",
    "@react-navigation/native": "^6.1.6",
    "@react-navigation/native-stack": "^6.9.12",
    "@react-navigation/stack": "^6.3.16",
    "@reduxjs/toolkit": "^1.9.3",
    "@rneui/themed": "^4.0.0-rc.7",
    "@types/react-native": "^0.72.0",
    "@types/react-native-datepicker": "^1.7.1",
    "@types/react-native-webrtc": "^1.75.5",
    "amazon-kinesis-video-streams-webrtc": "^2.0.4",
    "apollo3-cache-persist": "^0.14.1",
    "aws-appsync-auth-link": "^3.0.7",
    "aws-appsync-react": "^4.0.15",
    "aws-appsync-subscription-link": "^3.1.2",
    "axios": "^1.3.4",
    "country-list": "^2.3.0",
    "date-fns": "^2.29.3",
    "graphql": "15.8.0",
    "http2": "^3.3.7",
    "install": "^0.13.0",
    "jwt-decode": "^3.1.2",
    "npm": "^9.6.4",
    "qrcode": "^1.5.3",
    "react": "18.2.0",
    "react-intl": "^6.3.2",
    "react-native": "0.72.5",
    "react-native-apollo-devtools-client": "^1.0.4",
    "react-native-base64": "^0.2.1",
    "react-native-callkeep": "^4.3.9",
    "react-native-canvas": "^0.1.39",
    "react-native-draggable-flatlist": "^4.0.1",
    "react-native-fast-image": "^8.6.3",
    "react-native-gesture-handler": "^2.9.0",
    "react-native-get-random-values": "^1.8.0",
    "react-native-image-picker": "^5.3.1",
    "react-native-keyboard-aware-scroll-view": "^0.9.5",
    "react-native-localize": "^3.0.2",
    "react-native-mmkv": "^2.6.3",
    "react-native-month-year-picker": "^1.9.0",
    "react-native-notifications": "^5.0.0",
    "react-native-paper": "^5.6.0",
    "react-native-qrcode-svg": "^6.2.0",
    "react-native-reanimated": "3.3.0",
    "react-native-safe-area-context": "^4.5.0",
    "react-native-screens": "^3.20.0",
    "react-native-securerandom": "^1.0.1",
    "react-native-sound": "^0.11.2",
    "react-native-svg": "^13.14.0",
    "react-native-url-polyfill": "^1.3.0",
    "react-native-uuid": "^2.0.1",
    "react-native-vector-icons": "^9.0.0",
    "react-native-voip-push-notification": "^3.3.1",
    "react-native-webrtc": "^111.0.3",
    "react-native-zip-archive": "^6.0.9",
    "react-redux": "^8.0.5",
    "redux": "^4.2.1",
    "redux-devtools-extension": "^2.13.9",
    "redux-persist": "^6.0.0",
    "skelly-app": "^1.0.24"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@react-native/eslint-config": "^0.72.2",
    "@react-native/metro-config": "^0.72.11",
    "@tsconfig/react-native": "^3.0.2",
    "@types/lodash": "^4.14.194",
    "@types/qrcode": "^1.5.2",
    "@types/react": "^18.0.24",
    "@types/react-native-base64": "^0.2.0",
    "@types/react-native-canvas": "^0.1.10",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.2.1",
    "babel-plugin-module-resolver": "^5.0.0",
    "eslint": "^8.19.0",
    "jest": "^29.2.1",
    "metro-react-native-babel-preset": "0.76.8",
    "prettier": "^2.4.1",
    "react-native-flipper": "^0.207.0",
    "react-test-renderer": "18.2.0",
    "redux-flipper": "^2.0.2",
    "typescript": "^5.0.0"
  },
  "engines": {
    "node": ">=16"
  }
}

Additional comment: I was previously on graphql version 16 and had the same issue

Link to Reproduction

Please have a first look. If my comments are not helpful enough I'll try to build a minimal reproduction.

Reproduction Steps

No response

[phryneas]

Thanks for the bug report!

This could be related to a React-Native specific timing bug that we are fixing in #11252.

We will release a 3.8.5 with the bugfix in the next few days. Once that's out, could you please try it out and report back?

If that doesn't fix the issue, please create that minimal reproduction.

[dota-coach]

Thanks for your feedback. I'll check once your fix is deployed and then revert back.

[dennis-gonzales]

+1 able to replicate

[dota-coach]

Issue was solved with release 3.8.5. Thanks a lot!

[phryneas]

Two bugs with one stone - great 🎉

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