useMutation stuck on loading and onComplete is not getting called - Expo React Native

Hi, I am building an Expo React Native App and when I use the useMutation hook the loading state is not updating and it gets stuck at true. Since it gets stuck on loading, the onComplete callback is not getting called.

loading: true
data: undefined

No errors coming from the server side.

Am I missing something?

Thank you for your help :slight_smile:

mutation.js

import { gql } from "@apollo/client";
export const SIGNUP_USER_TRACKING = gql`
  mutation SignupPatientSubmitAllowedTrackingSetting {
    signupPatientSubmitAllowedTrackingSetting {
      onboardingStage
      trackingSetting {
        allowTracking
      }
    }
  }
`;

App.js

  const [signupPatientSubmitAllowedTrackingSetting, { data, loading, error }] =
    useMutation(SIGNUP_USER_TRACKING, {
      errorPolicy: "all",
      onCompleted(data) {
        console.log(data);
      },
    });

  const handleTracking = async (answer) => {
    try {
     await signupPatientSubmitAllowedTrackingSetting({
        variables: {
          trackingSetting: { allowTracking: answer },
          onboardingStage: "TRACKING_SETTING",
        },
      });
    } catch (e) {
      console.log(e);
    }
  };

  if (loading) return <Loader show={true} />;
  if (error) return console.log(`Submission error! ${error.message} `);

client.js

import { ApolloClient, InMemoryCache, createHttpLink } from "@apollo/client";
import { setContext } from "@apollo/client/link/context";
import AsyncStorage from "@react-native-async-storage/async-storage";
import { BASE_URL } from "../constants";

const httpLink = createHttpLink({
  uri: BASE_URL,
});

const authLink = setContext(async (_, { headers }) => {
  
  const token = await AsyncStorage.getItem("token");
  
  return {
    headers: {
      ...headers,
      authorization: token ? `Bearer ${token}` : "" ,
    },
  };
});

export const client = new ApolloClient({
  link: authLink.concat(httpLink),
  cache: new InMemoryCache(),
});

“react”: “18.2.0”,
“react-native”: “0.72.3”,
“expo”: “^49.0.0”,

“@apollo/client”: “^3.7.14”,
“graphql”: “^15.8.0”,
“graphql-tag”: “^2.12.6”,

“babel-plugin-import-graphql”: “^2.8.1”,

1 Like

There doesn’t seem to be anything obviously wrong with this.
Can you add a console.log("test") after the await signupPatientSubmitAllowedTrackingSetting(...)?
Does that execute?

Hi Lenz,
yes, it executes

So signupPatientSubmitAllowedTrackingSetting finishes. This seems very weird. Could you try to create a reproduction of this, maybe based on GitHub - apollographql/rn-apollo-client-testbed so I can take a look at this?

Hi Lenz,

finally I’ve managed to find the problem: the request is not being finished.

Timing tab:
stalled
CAUTION: request is not finished yet!

Here are the logs.

Great that you found it! Yeah, that’s something you’ll probably have to investigate on the server side then.