Error de consulta RTK / isError / isSuccess no se están actualizando.
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,>
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 establecerisError
como true yerror
con un mensaje apropiado.Aquí te muestro cómo puedes modificar tu código para manejar esto:
En este código, primero creamos una variable de estado
isError
y la inicializamos comofalse
. Luego, en el hookuseEffect
, sidata
es undefined, establecemosisError
comotrue
. Por último, renderizamos un mensaje de error o el texto basado en el valor deisError
.