Working with Typescript Interfaces- error: property does not exist

user_11712376 0
Viewed 2559

I built this interface

export interface UserInfo {
    success?: boolean,
    user?: User,
    employer?: Employer,
    hr?: Hr
}

Now when I do this

let data = await loginUser(loginData);
console.log(data.success);

loginUser method code:

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;

I get this error

Property 'success' does not exist on type '{ data: UserInfo; } | { error: FetchBaseQueryError | SerializedError; }'.

I am a newbie with typescript, and I want to access UserInfo object from { data: UserInfo; } but I am not being able to do so. Can anyone help?

redux-toolkit redux typescript reactjs javascript
3 Answers

This happens because the property "success" exists only on type UserInfo. Since it's a union type the compiler can't be sure whether the function returns a data object (with UserInfo type) or an error object (FetchBaseQueryError | SerializedError)

In order to access the success property of the response, you can firstly check if it exists

if("success" in data){
    console.log(data.success)
}

Read more about union types here:
https://www.typescriptlang.org/docs/handbook/unions-and-intersections.html https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#union-types

user_162334250

The actual issue is found inside the transformResponse function, and how it 'tunnels' the response data further.

transformResponse: (rawResult : UserInfo) => {
  return rawResult
}

rawResult most likely is not of type UserInfo, but a { data: UserInfo }. And that's exactly what you see in the error you get.

So to fix it, the function should look like this:

transformResponse: (rawResult: { data: UserInfo }) => {
  return rawResult.data
}

And then you code should work as expected, without any other ifs.

let data = await loginUser(loginData);
console.log(data.success);
user_57805360

try use loginUser(loginData).unwrap() in component

user_197488360
Related