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
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”,