Request sends Twice returns HTTP 500 Error

[ApetweBc]

I send a POST request to a API server and the request sent 2 times. The initial request succeed because the records are inserted in the database then I get HTTP 500 response from the server. I have attached the error response and added the payload request. In the forms I have deleted the some of the inputs to make it readable here.

Debug Console
Preview Tab

resource: [{code: "23000",…}]
0: {code: "23000",…}
code: "23000"
message: "SQLSTATE[23000]: [Microsoft][ODBC Driver 17 for SQL Server][SQL Server]Violation of PRIMARY KEY constraint 'PK_Customers'. Cannot insert duplicate key in object 'dbo.Customers'. The duplicate key value is (James-1520). (SQL: insert into [dbo].[Customers] ([CustomerID], [SalesPerson], [LabName], [CreatedBy], [Deleted]) values (James-1520, 0, 1, James, James, Dr, , Kwaku Clinic, 115 Ave, Toronto, AB, M5B 2P7, , Canada, 6833733, james@test.com, More, 1, Prospects Form, 0))"
trace: [,…]
message: "Batch Error: Not all requested records could be created."
status_code: 500

Server Logs
[2022-06-30T16:34:27.114490+00:00] local.INFO: [RESPONSE] {"Status Code":500,"Content-Type":null}
[2022-06-30T16:34:27.115436+00:00] local.INFO: [RESPONSE] {"Status Code":200,"Content-Type":null}

Example code

Base URL

import { create } from "apisauce";


const apiClient = axios.create({
  baseURL: "http://****",
  headers: {
    "X-API-KEY":
      "45566****",
    // "X-pplication-Name": "testMore",
    // "Access-Control-Allow-Origin": "*",
    // "Access-Control-Allow-Methods": "GET, POST, PUT, PATCH, DELETE, OPTIONS",
    // "Access-Control-Allow-Headers": "Content-Type, Authorization",
    // "Access-Control-Allow-Credentials": true,
    "Content-Type": "application/json",
    Accept: "application/json",
    "access-control-allow-credentials": true,
    "access-control-allow-methods": "*",
    "access-control-allow-origin": "*",
    "access-control-allow-headers": "*",
    "cache-control": "no-cache",
    "cors-enabled": false,
  },
  // params: {},
});

export default apiClient;

Endpoint

import apiClient from "./apiBaseUrl";
const addCustomers = "_table/Customers/";
const addProspects = (_prospect) => {
  const resource = JSON.stringify([
    {
      labID: _prospect.labID,
      LabName: _prospect.labName,
      // deleted the  following lines because they are not needed
      Deleted: _prospect.deleted,
    },
  ]);
  console.log(resource);
  apiClient.post(
    addCustomers,
    resource
  
  );
  return apiClient.post(addCustomers, resource);
};

export default addProspects;

Form

/ Validation schema for the form
const validateSchema = Yup.object().shape({
  firstName: Yup.string().required().label("First Name"),
});

// Customer Id and Padding for the it
const strl = 30;
const initialNumber = 10;
const randomNumber = Math.floor(Math.random() * 100);
const custID = initialNumber + randomNumber + strl.toString().padStart(2, 3);

const Prospects = () => {
  // Function to handle the submit of the form
  const handleSubmit = async (values) => {
    const result = await apiEndPoints({
      ...values,
    });

    if (result.status >= 400 && result.status < 500) {
      console.log("400 Errors " + result.originalError);

    } else if (result.status >= 500) {

      console.log(result.config);
    } else if (result.problem) {

      console.log(result.config);
    } else {
      console.log("200 Success " + result.status);
    }
  };

  // Initial values for the form
  const initialValues = {
    active: false,
    prospect: true,
    customerID: custID,
    firstName: "",
 
  };

  return (
    <>

      <Layout>
        <div>
          <Formik
            initialValues={{
              ...initialValues,
            }}
            onSubmit={handleSubmit}
            validationSchema={validateSchema}
            enableReinitialize={true}
          >
            {({
              values,
              handleChange,
              handleBlur,
              handleSubmit,
            }) => (
              <form onSubmit={handleSubmit}>
                <Toast />
             
                  <div>
                    <label htmlFor="" className="relative block">
                      <span className="my-3"> Dr FirstName </span>
                      <input
                        type="text"
                        name="firstName"
                        id=""
                        onChange={handleChange}
                        onBlur={handleBlur}
                        value={values.firstName}
                      />
                    </label>
                  </div>
         
                <button
                  type="submit"
                  onClick={handleSubmit}
                >
                  Submit
                </button>
              </form>
            )}
          </Formik>
        </div>
      </Layout>
    </>
  );
};

export default Prospects;

Expected behavior

Expect only 1 request to be sent
Response of 200

Environment

• ApiSauce Version [2.1.5]
• Adapter [XHR/HTTP]
• Browser [Chrome, Edge]
• Browser Version [ Edge 103.0.1264.37 (Official build) (64-bit), Chrome 03.0.5060.66 (Official Build) (64-bit)]
• Node.js Version
• OS: [Windows 10]
• React 18.0.1

Screenshots

[rahulsale]

is this resolved?

[ApetweBc]

No, I switched to fetch API