es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Error de consulta RTK / isError / isSuccess no se están actualizando.

11 Jul, 2023 Programación

Estoy intentando usar error / isError para validar si la solicitud ha fallado, pero siempre está indefinido.

Este es mi servicio (he configurado la URL como: ‘non_exists_url’)

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
import {
  ICompanyDeleteRequest,
  ICompanyDeleteResponse
} from '../../interfaces/companies.interface'
import { RootState } from '../redux/store'

export const companyApi = createApi({
  reducerPath: 'companyApi',
  baseQuery: fetchBaseQuery({
    baseUrl: 'http://localhost:1000/v1/',
    prepareHeaders: (headers, { getState }) => {
      const token = (getState() as RootState).authReducer.token
      if (token) {
        headers.set('authorization', `Bearer ${token}`)
      }
      return headers
    },
  }),
  endpoints: (builder) => ({
    deleteCompany: builder.query<icompanydeleteresponse, icompanydeleterequest="">({
      query: ({ companyId }) => ({
        url: 'non_exists_url',
        method: 'DELETE',
        headers: {
          'X-CompanyId': companyId,
        },
      }),
    })
  }),
})

export const { useDeleteCompanyQuery } = companyApi

Y esto es dentro del componente:

import styles from './deleteCompany.module.scss'
import { FC, useEffect, useState } from 'react'

export const DeleteCompany: FC = () => {

  const companyId = 1
  const { data, error, isError } = useDeleteCompanyQuery(companyId)

  useEffect(() => {
    console.log('data', data)
    console.log('error', error)
    console.log('isError', isError)
  }, [data, error, isError])

  return (
    <div>
      Some text
    </div>
  )
}

En las herramientas de desarrollo de la red veo un error 404, pero en la consola isError y error están indefinidos.

¿Alguna idea de lo que me estoy perdiendo?</icompanydeleteresponse,>

Tags:  

Answer

  1. Avatar for davy.ai
    davy.ai

    El problema podría ser que el hook useDeleteCompanyQuery no está devolviendo un error o isError porque no está siendo manejado correctamente por el componente. Una forma de manejar esto es comprobar si ‘data’ es undefined, lo cual significaría que la solicitud no tuvo éxito. En ese caso, puedes establecer isError como true y error con un mensaje apropiado.

    Aquí te muestro cómo puedes modificar tu código para manejar esto:

    import styles from './deleteCompany.module.scss'
import { FC, useEffect, useState } from 'react'

export const DeleteCompany: FC = () => {

  const companyId = 1
  const { data, error } = useDeleteCompanyQuery(companyId)
  const [isError, setIsError] = useState(false)

  useEffect(() => {
    if (!data) {
      setIsError(true)
    }
    console.log('data', data)
    console.log('error', error)
    console.log('isError ', isError )
  }, [data, error, isError ])

  return (
    <div>
      {isError ? <div>Error: {error.message}</div> : <div>Texto</div>}
    </div>
  )
}

    En este código, primero creamos una variable de estado isError y la inicializamos como false. Luego, en el hook useEffect, si data es undefined, establecemos isError como true. Por último, renderizamos un mensaje de error o el texto basado en el valor de isError.

Comments are closed.