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.