Ionic 6 react with react-query fetching API does not work on real android device after build(production) but works on emulator and browser(development))

I have a form that submits data to a server using react-hook-form like this:

<FormProvider {...methods}>
          <form onSubmit={handleSubmit(onIndividualSignup)}>
            <Swiper
              onSwiper={(swiper) => setSlidesRef(swiper)}
              speed={400}
              initialSlide={0}
              preventInteractionOnTransition={true}
            >
              <SwiperSlide>
                <FirstInfo next={nextSlide} />
              </SwiperSlide>
              <SwiperSlide>
                <SecondInfo prev={prevSlide} isLoading={isLoading} />
              </SwiperSlide>
            </Swiper>
          </form>
        </FormProvider>

Here I’m using the swiper/react package to create a multi-step form that works well.

Also using react-query to fetch data and Axios . To make my code reusable, I decided to create a hook for it.

export const useSignupMutation = () =>
  useMutation(
    async (user: IndividualForm) => {
      const response: AxiosResponse = await axios.post(
        `${API_URL}/api/v1/users/signup`,
        user,
        {
          headers: {
            "Content-Type": "application/json",
          },
        }
      );
      return response;
    },
    {
      onError(err) {
        console.log(err);
        Toast.show({
          text: String(err),
          duration: "long",
        });
      },
    }
  );

On Signing up for the form.

const onSignup: SubmitHandler<FormData> = (formData) => {
    console.log(formData);
    const { userType, email, fullName, username, password } = formData;

    mutate(
      { userType, email, fullName, username, password },
      {
        onSuccess: (data) => {
          queryClient.setQueryData("IndividualData", formData);
          const token: string = data.data?.token;
          setStorage("token", token);
          presentToast({
            message: "Please verify your email to continue",
            position: "bottom",
            color: "primary",
            duration: 4000,
            cssClass: "toast-container",
          });
          dismissToast();
          history.push("/page/Auth/VerifyEmail");
        },
        onError: (error) => {
          const err = error as AxiosError;
          presentToast({
            color: "danger",
            message: `${err.response?.data}`,
            position: "bottom",
            duration: 4000,
            cssClass: "toast-container",
          });
          dismissToast();
        },
      }
    );
  };

The API is consumed on Emulator and Browser but does not work on Real Android devices.

The Error comes below

Also tried setting some configs on capacitor.config.ts

server: {
    androidScheme: "http",
    allowNavigation: ["https://my-api.com"],
    cleartext: true,
  },

We are stuck here please help, thanks in advance

What is the actual error? A screenshot showing “undefined” is not useful debugging information.

When testing, attach your Android device to a desktop PC via USB and then open up the Chrome Dev Tools on the desktop PC and check what the actual errors are.

Also please don’t cross-post to other threads; if you ask for help on another thread, it could be considered spam.

Sorry about cross-posting, I saw that most people skipped my post to answer others, that is why I did that.

The Error is in the Screenshot, Minified react error…

The problem still states that Fetching API using Axios and react-query does not fetch on Physical Andriod devices… What are the suggested settings to make it work?

server: {
    androidScheme: "http",
    allowNavigation: ["https://my-api.com"],
    cleartext: true,
  },

“does not fetch” – what does that mean?

react-query + axios, two widely used libraries, definitely work on Android devices. So you need to find the actual root error to see why it is not working in your case.

A “minified react error” is not the root error. As you can see in your screenshot, there is a link to get more information about the error. You need to go to the link and check out the info. But more importantly, you need to debug via Chrome to see what other errors are occurring. Is your fetch request being sent out on the android device? What is the response you are getting?

It could be that you are missing a CSRF token when talking to your server, but that error won’t show up as a react error because it is a network error. So you need to test the Android app installed on a device using the desktop Chrome dev tools to debug and find the error; if you do that, you might be able to solve the problem easily yourself.

I can say that you generally don’t need to do anything special to get Android networking to work; I do not have any server options set in capacitor.config.ts and everything works fine in my app with Ionic, axios, and react-query on Android.

Hi, tried your solution, it works, in development but what I’m trying to say is that when the app is built for a release version, it does not work. Like it works in Dev but does not work on the production.

When I have that react-query icon, that dev mode, but when it not there that is production…

I know what I’m saying please, maybe you don’t understand me.

It is as if when I build a release APK version, the API is not fetching, or trying to fetch but stop, how do I debug a production APK?

Thanks for the time.

The above screenshot works well, but when I build it, it shows and try to fetch the API like initial question, it produces the above error.

Also, a piece of evidence to prove my point.

Video evidence of the experiment

https://www.awesomescreenshot.com/video/8388449?key=04ee8d43831e51cc8ba7a21e018dae8d

Thanks in advance

It is as if when I build a release APK version, the API is not fetching, or trying to fetch but stop, how do I debug a production APK?

See debugging android and Chrome in the Ionic docs.

Install the release APK to your android device and then connect it via USB debugging and debug from Chrome on a desktop.

You can use the Network tab of the Chrome DevTools to see whether the app is getting the expected responses from the network (and sending requests as intended).

Hi @ptmkenny

After Debugging, this is the result, the API sents a 200 status which means it is ok, no errors

The error below is what I don’t understand now

Well, what does the linked error say? There’s a URL right there…

You can’t expect people in this forum to manually type in a URL from a screenshot.

Of course, it’s even better if you can find a way to get the error to occur on an unminified version of the app; that would let you click the first line of the error to see specifically in your code what is going wrong.

Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=object&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

The link for the error.

I think it is telling me I’m not sending a react component

I think it’s telling you you’re passing an object when you should be passing a string. What line of code is this? When you’re debugging, you can’t just look at the error; you have to look at the line of code that is causing the error.

Looking at your code, one thing that might cause this is:

    {
      onError(err) {
        console.log(err);
        Toast.show({
          text: String(err),
          duration: "long",
        });
      },

react-query returns an object, so err is an object, not a string. Learn more about react-query error handling.

Basically here, I’m just trying to use a toast to get the error, it has nothing to do with the error, just trying to convert the obj to a string so I can use the Toast Plugin to display the error.