Construí esta interfaz
export interface UserInfo { success?: boolean, user?: User, employer?: Employer, hr?: Hr }Ahora cuando hago esto
let data = await loginUser(loginData); console.log(data.success);código del método loginUser:
import {createApi, fetchBaseQuery} from "@reduxjs/toolkit/query/react"; import {BASE_API_ENDPOINT, LOGIN_API_ENDPOINT} from "../../constants/apis"; import {LoginData, UserInfo} from "../../models/apis/UserData"; export const loginApi = createApi({ reducerPath: 'loginReducer', baseQuery: fetchBaseQuery({ baseUrl: BASE_API_ENDPOINT }), endpoints: (builder) => ({ loginUser: builder.mutation<UserInfo, LoginData> ({ query: (data: LoginData) => ({ url: LOGIN_API_ENDPOINT, method: "POST", body: data }), transformResponse: (rawResult : UserInfo) => { return rawResult } }) }) }) export const { useLoginUserMutation } = loginApi;me sale este error
La propiedad 'éxito' no existe en el tipo '{ datos: UserInfo; } | { error: FetchBaseQueryError | error serializado; }'.
Soy un novato con mecanografiado y quiero acceder al objeto UserInfo desde { data: UserInfo; } pero no puedo hacerlo. ¿Alguien puede ayudar?
Esto sucede porque la propiedad "éxito" existe solo en el tipo UserInfo. Dado que es un tipo de unión, el compilador no puede estar seguro de si la función devuelve un objeto de datos (con el tipo UserInfo) o un objeto de error (FetchBaseQueryError | SerializedError)
Para acceder a la propiedad de éxito de la respuesta, primero puede verificar si existe
if("success" in data){ console.log(data.success) } Lea más sobre los tipos de unión aquí:
https://www.typescriptlang.org/docs/handbook/unions-and-intersections.html https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#union-types
intente usar loginUser(loginData).unwrap() en el componente
El problema real se encuentra dentro de la función transformResponse y cómo "canaliza" más los datos de respuesta.
transformResponse: (rawResult : UserInfo) => { return rawResult } rawResult probablemente no sea del tipo UserInfo , sino { data: UserInfo } . Y eso es exactamente lo que ves en el error que obtienes.
Entonces, para solucionarlo, la función debería verse así:
transformResponse: (rawResult: { data: UserInfo }) => { return rawResult.data } Y luego su código debería funcionar como se esperaba, if ningún otro condicionante.
let data = await loginUser(loginData); console.log(data.success);