1

Tengo un frontend hecho con vite/react, en esta parte de mi código quiero enviarle a una Api hecha en .Net mediante POST los datos.

Parte de mi componente:

const dispatch = useDispatch(); 
    const externalId = useSelector((state: RootState) => state.consumer.externalId);
    const governmentId = useSelector((state: RootState) => state.consumer.governmentId);
    const mail = useSelector((state: RootState) => state.consumer.mail);
    const name = useSelector((state: RootState) => state.consumer.name);
    const phoneNumber = useSelector((state: RootState) => state.consumer.phoneNumber);
    const pacMandateId = useSelector((state: RootState) => state.consumer.pacMandateId);
    const defaultAgent = useSelector((state: RootState) => state.consumer.defaultAgent);
    const sendMail = useSelector((state: RootState) => state.consumer.sendMail);
    const agentPhoneNumber = useSelector((state: RootState) => state.consumer.agentPhoneNumber);
    const silencedUntil = useSelector((state: RootState) => state.consumer.silencedUntil);
    const rfc = useSelector((state: RootState) => state.consumer.rfc);
    const taxZipCode = useSelector((state: RootState) => state.consumer.taxZipCode);
    const fiscalRegime = useSelector((state: RootState) => state.consumer.fiscalRegime);
    const defaultReceiptType = useSelector((state: RootState) => state.consumer.defaultReceiptType);
    const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const requiredFields = [externalId];
    const isValid = requiredFields.every((field) => field);

    if (!isValid) {
      alert("Por favor, completa todos los campos obligatorios.");
      return;
    }

    const request: CustomerRequest = {
        externalId,
        governmentId,
        mail,
        name,
        phoneNumber,
        pacMandateId,
        defaultAgent,
        sendMail,
        agentPhoneNumber,
        silencedUntil,
        rfc,
        taxZipCode,
        fiscalRegime,
        defaultReceiptType
    };

    try {
      // Llamada al servicio para crear el consumidor
      console.log("Datos a enviar: ", request);
      const response = await CustomerService.create(request);
      if(response.Success){
        console.log("Formulario enviado con éxito:", response);
      }else{
        console.error("Error de la API:", response);
      }
    } catch (error: any) {
      if (error.response) {
        // Aquí puedes ver el detalle del error que te devuelve la API
        console.error("Error de la API:", error.response.data);
        alert("Error al crear el consumidor: " + JSON.stringify(error.response.data));
      } else if (error.request) {
        console.error("No se recibió respuesta de la API:", error.request);
      } else {
        console.error("Error al configurar la solicitud:", error.message);
      }
    }};

Service:

    export const CustomerService = {
    create:async(data: CustomerRequest):Promise<ResponseBase<Customer>> => {
        try{
            debugger;
            const response = await ConsumerRepository.create(data);
            return response;
        }
        catch(ex){
            throw new Error('Error al guardar la información');
        }
    },
}

Repository:

export const ConsumerRepository = {
    create: async(request: CustomerRequest): Promise<ResponseBase<Customer>> => {
        try{
            debugger;
            const response = await http.post<CustomerRequest, ResponseBase<Customer>>(
                `/Customer/add`,
                request
            );
            return response;
        }
        catch(ex){
            throw new Error('Error al guardar la información');
        }
    },
}

API - Controller:

[HttpPost("add")]
public async Task<BaseResponse<CustomerDto>> Add(CustomerRequestDto request)
{
    return await _service.Add(request);
}

Request Modelo:

public class CustomerRequestDto
{
    [JsonProperty("external_id")]
    public string ExternalId { get; set; }

    [JsonProperty("government_id")]
    public string GovernmentId { get; set; }

    [JsonProperty("mail")]
    public string Mail { get; set; }

    [JsonProperty("name")]
    public string Name { get; set; }

    [JsonProperty("phone_number")]
    public string PhoneNumber { get; set; }

    [JsonProperty("pac_mandate_id")]
    public string PacMandateId { get; set; }

    [JsonProperty("default_agent")]
    public string DefaultAgent { get; set; }

    [JsonProperty("send_mail")]
    public bool SendMail { get; set; }

    [JsonProperty("agent_phone_number")]
    public string AgentPhoneNumber { get; set; }

    [JsonProperty("silenced_until")]
    public DateTime? SilencedUntil { get; set; }

    [JsonProperty("rfc")]
    public string RFC { get; set; }

    [JsonProperty("tax_zip_code")]
    public string TaxZipCode { get; set; }

    [JsonProperty("fiscal_regime")]
    public string FiscalRegime { get; set; }

    [JsonProperty("default_receipt_type")]
    public string DefaultReceiptType { get; set; }
}

El problema que estoy teniendo es que cuando mando de esta manera la respuesta que recibo es que me esta faltando el campo "request" como que engloba todo. Pero desde mi swagger lo unico que le envio a mi controlador es esto:

{
  "externalId": "string",
  "governmentId": "string",
  "mail": "string",
  "name": "string",
  "phoneNumber": "string",
  "pacMandateId": "string",
  "defaultAgent": "string",
  "sendMail": true,
  "agentPhoneNumber": "string",
  "silencedUntil": "2024-09-26T01:14:12.307Z",
  "rfc": "string",
  "taxZipCode": "string",
  "fiscalRegime": "string",
  "defaultReceiptType": "string"
}

Incluso probe desde el postman al endpoint mismo enviandole desde body -> raw esto:

{
    "externalId": "1234"
}

Y llegó correctamente. Pero cuando quiero mandar del front me dice que me esta faltando el campo request. Es mas si agrego el campo request, si hiciera el cambio del modelo que envío en el submit de la siguiente manera:

const request: CustomerRequest = {
        request: {
            externalId,
            governmentId,
            mail,
            name,
            phoneNumber,
            pacMandateId,
            defaultAgent,
            sendMail,
            agentPhoneNumber,
            silencedUntil,
            rfc,
            taxZipCode,
            fiscalRegime,
            defaultReceiptType
        }
    };

Por algún motivo llega a la Api, pero todos los campos que debería recibir están vacíos. Alguno me podría ayudar sabiendo si me esta faltando alguna configuracion?

Por las dudas el http que estoy usando en el Repository es asi:

import axios, { AxiosResponse } from 'axios';

const headers = {
    'Content-Type': 'application/json'
};

const axiosInstance = axios.create({
    baseURL: import.meta.env.VITE_API_URL,
    headers: headers
});

axiosInstance.interceptors.request.use(
    config => {
        return config;
    },
    error => Promise.reject(error)
);

axiosInstance.interceptors.response.use(
    response => {
        return response;
    },
    async error => {
        return Promise.reject(error.response)
    }
);

const get = async <ResponseBody>(url: string): Promise<ResponseBody> => {
    const response: AxiosResponse<ResponseBody> = await axiosInstance.get<ResponseBody>(url);
    return response.data;
};

const getWithPagination = async <ResponseBody>(url: string, page: number, pageSize: number): Promise<ResponseBody> => {
    const response: AxiosResponse<ResponseBody> = await axiosInstance.get<ResponseBody>(url, {
        params: { page, pageSize }
    });
    return response.data;
};

const post = async<RequestBody, ResponseBody>(url: string, body: RequestBody): Promise<ResponseBody> => {
    const response: AxiosResponse<ResponseBody> = await axiosInstance.post<ResponseBody>(url, body);
    return response.data;
};

const put = async<RequestBody, ResponseBody>(url: string, body: RequestBody): Promise<ResponseBody> => {
    const response: AxiosResponse<ResponseBody> = await axiosInstance.put<ResponseBody>(url, body);
    return response.data;
};

const _delete = async<ResponseBody>(url: string): Promise<ResponseBody> => {
    const response: AxiosResponse<ResponseBody> = await axiosInstance.delete<ResponseBody>(url);
    return response.data;
};

export const http = {
    get,
    getWithPagination,
    post,
    put,
    delete: _delete
};
1
  • Donde tienes console.log("Datos a enviar: ", request); ¿Muestra la información que se necesita? Es decir justo antes de la petición async, confirma esto primero
    – g.4
    Commented el 26 sept. a las 3:47

2 respuestas 2

0

Como mencionaste al agregar la propiedad request los campos llegan vacíos. Esto pasa porque el objeto que estas enviando no está alineado con lo que la API espera. Tenes que modificar la forma en que construis el objeto request. Pambiar tu objeto request para que se envíe como un campo único en el cuerpo de la solicitud:

const request = {
    request: {
        externalId,
        governmentId,
        mail,
        name,
        phoneNumber,
        pacMandateId,
        defaultAgent,
        sendMail,
        agentPhoneNumber,
        silencedUntil,
        rfc,
        taxZipCode,
        fiscalRegime,
        defaultReceiptType
    }
};

o podes no cambiar el objeto que envías desde el frontend y modificar el controlador en tu api para aceptar el objeto en la raíz de la solicitud y ahi ver que el objeto que recibes tenga la estructura correcta.:

[HttpPost("add")]
public async Task<BaseResponse<CustomerDto>> Add([FromBody] CustomerRequestDto request)
{
    return await _service.Add(request);
}

Revisa que el endpoint de la api este configurado correctamente y este escuchando en la URL que estas llamando. Fijate que import.meta.env.VITE_API_URL tenga la URL correcta de tu API.

Para entender mejor que esta pasando, agrega logs en el controlador asi:

[HttpPost("add")]
public async Task<BaseResponse<CustomerDto>> Add([FromBody] CustomerRequestDto request)
{
    if (request == null)
    {
      
        Console.WriteLine("Request es nulo");
    }
    else
    {
        Console.WriteLine($"Request: {JsonConvert.SerializeObject(request)}");
    }
    return await _service.Add(request);
}

Saludos.

1
  • Gracias por tu respuesta, si yo quito la estructura de ``` const request = { request: { externalId, governmentId, mail, name, phoneNumber, pacMandateId, defaultAgent, sendMail, agentPhoneNumber, silencedUntil, rfc, taxZipCode, fiscalRegime, defaultReceiptType } }; ``` De mi front y dejo sin el request, directamente no llega a la api y me dice que falta request y es requerido, pero la api no tiene un cuerpo request antes de las demas propiedades Commented el 26 sept. a las 12:20
0

Si la API te pide que envíes un objeto envolviendo los campos en request, debes mantener la estructura que mencionas: const request = {

    request: {
        externalId,
        governmentId,
        mail,
        name,
        phoneNumber,
        pacMandateId,
        defaultAgent,
        sendMail,
        agentPhoneNumber,
        silencedUntil,
        rfc,
        taxZipCode,
        fiscalRegime,
        defaultReceiptType
    }
};

Esto hace que en tu backend la deserialización podría no estar bien configurada ara manejar esta estructura ya que podrías estar recibiendo un objeto vacio.

Saludos.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.