Duplicate API calls are getting called on mutation trigger in React Native RTK-Query

55 Views Asked by At

I am triggering mutation on the press of a button but two api calls are going and therefore 2 data entries are getting created.

What can be the possible reason for this?

Please provide any suggestions, I am using React Native.

Following is the endpoint definition.

export const incomeApiSlice = apiSlice
  .enhanceEndpoints({addTagTypes: ['INCOME']})
  .injectEndpoints({
  endpoints: builder => ({
    getIncome: builder.query({
      query: () => ({
        url: '/incomes/',
        method: 'GET',
      }),
      providesTags: ['INCOME']
    }),
    addIncome: builder.mutation({
      query: (payload) => ({
        url: '/incomes/',
        method: 'POST',
        body: payload,
      }),
      invalidatesTags: ['INCOME']
    })
  }),
});

export const { useGetIncomeQuery, useAddIncomeMutation } = incomeApiSlice;

And this is how I am using it in the component.

const handleAddIncome = async (values) => {

    console.log("AddIncomeForm: values:", values);

    try {
      // const response = await createIncome(values).unwrap();
      const response = await createIncome(values)

      console.log("AddIncomeForm: handleAddIncome::response: ", response);

      typeof onSubmit === 'function' && onSubmit();

    } catch (error) {

      console.log("AddIncomeForm: handleAddIncome::error: ", error);

    }

  }

  // code omitted

<Formik
      initialValues={initialValues}
      validationSchema={validationSchema}
      onSubmit={handleAddIncome}
    >
      {
        function AddIncomeFormik(formik) {

// code omitted


<ButtonAR
  buttonStyles={{ paddingVertical: 0 }}
  containerStyles={{ marginBottom: RFValue(32) }}
  onPress={formik.handleSubmit}
  disabled={!formik.isValid || !formik.dirty || isLoading}
  loading={isLoading}
>
  Submit
</ButtonAR>


// code omitted

Any kind of help is appreciated.

0

There are 0 best solutions below