Previous request was cancelled due to a new request - iOS

[MariusCatanoiu]

Hello. I get this error after upgrading from 12.10.4 to 12.15.1

Environment:

react-native-iap: 12.15.1
react-native: 0.72.5
Platforms (iOS, Android, emulator, simulator, device): iphone, real devices

Previous request was cancelled due to a new request

Flow: I put the app in background and return after some time.

[Gunndroid]

+1 also having this issue suddenly. Trying to run getSubscriptions, getProducts, one after another, using await before my functions.

`
useEffect(() => {
const fetchSubscriptions = async () => {
try {
const fetchedSubscriptions = await getSubscriptions({
skus: subscriptionIds,
});
setSubscriptions(
fetchedSubscriptions.sort(
(a, b) =>
subscriptionIds.indexOf(a.productId) -
subscriptionIds.indexOf(b.productId),
),
);
} catch (err) {
console.warn(err);
}
};

const fetchProducts = async () => {
  try {
    const fetchedProducts = await getProducts({skus: productIds});
    setProducts(
      fetchedProducts.sort(
        (a, b) =>
          productIds.indexOf(a.productId) - productIds.indexOf(b.productId),
      ),
    );
    setLoading(false);
  } catch (err) {
    console.warn(err);
  }
};

const fetchAllData = async () => {
  setLoading(true);
  await fetchSubscriptions();
  await fetchProducts();
  setLoading(false);
};

fetchAllData();

}, [])`

[ps-dmaksimovic]

I am also having this issue now, although I didn't change anything in the IAP part of my app lately. I now realize based on the comment above, that the only change has that I upgraded to [email protected].

[email protected]
platform iOS

[Gunndroid]

The solution that worked for me was to use async await functionality and make sure to call getProducts and getSubscriptions one after another from an onPress rather than a useEffect.

[ng-ha]

useEffect works fine for me. Just make sure to use async await (or then) to avoid parallel requests.

[Gunndroid]

I think I've finally managed to remove the error, its because I had multiple subscriptions and the fetch was running multiple times. I had to add this flag.

const [isFetchingSubscriptions, setFetchingSubscriptions] = useState(false);

const fetchSubscriptions = async () => {
if (isFetchingSubscriptions) return; // Prevent multiple requests flag

console.log('fetchSubscriptions');
setFetchingSubscriptions(true);

try {
  setLoading(true);
  const fetchedSubscriptions = await getSubscriptions({
    skus: subscriptionIds,
  });
  setSubscriptions(
    fetchedSubscriptions.sort(
      (a, b) =>
        subscriptionIds.indexOf(a.productId) -
        subscriptionIds.indexOf(b.productId),
    ),
  );
  console.log('fetchSubscriptions success');
} catch (err) {
  console.error('Error fetching subscriptions:', err);
  Alert.alert('Error', 'Failed to fetch subscriptions. Please try again.');
} finally {
  setLoading(false);
  setFetchingSubscriptions(false);
}

};

[ps-dmaksimovic]

I am also using useEffect but 2x, so I end up with:

const isConnected = useConnectionToIap();

const { products } = useProducts(isConnected);
const { subscriptions } = useSubscriptions(isConnected)

Both hooks wait until isConnected becomes true. Since it seems like await getProducts() must not run at the same time with await getSubscriptions() (based on comments above), I solved it like this:

const { products } = useProducts(isConnected);
const { subscriptions } = useSubscriptions(isConnected && products);

[hsource]

I'm pretty sure this won't be fixed. I think this is an explicit behavior from #2604 to fix other issues, so we should just work within its constraints.

[MariusCatanoiu]

Yes. I already made a workaround and it's fine. I will close the issue