Typescript fetch data from server and loading state

Question

I am pretty new to typescript and am not sure how to best go about this rather common scenario. I fetch data and pass it into a template component as such:

const ProfilePage: FC = (): JSX.Element => {
  const { data, isDataLoading } = useProfileData();

  return (
    <ProfileTemplate
      data={!isDataLoading && data}
    />
  );
};

This is the ProfileTemplate component

import { profile_data, Maybe } from '../api-client';

type ProfileProps = {
  data: Maybe<profile_data>;
}

export const ProfileTemplate: FC<ProfileProps> = ({ data }): JSX.Element => {
  ...
  <StaticField label="First Name" text={data.first_name} />
  <StaticField label="Last Name" text={data.last_name} />
  ...
}

Calling it as such results in Type 'false | Maybe<profile>' is not assignable to type 'Maybe<profile>'. I can remove the conditional which checks isDataLoading first, however I then get object is possibly null errors in my <StaticField> components.

first_name and last_name can be null or empty in the database. Although I realize that's not what's causing the object is possibly null errors, rather an empty profile_data object, when no data has been returned from the server yet.

How should I best handle this situation?

My `<StaticField>` component looks like so: interface Props {
  label: string;
  text?: Maybe<string>;
}

export const StaticField: FunctionComponent<Props> = ({ label, text }): JSX.Element => {
  return (
    <Box>
      <Text color="gray.BlackCoral" className={classes.label}>
        {label}
      </Text>
      <Text>{text}</Text>
    </Box>
  );
};

What is in your useProfileData?

Ryan Le
– Ryan Le

2021-09-01 04:11:10 +00:00
Commented Sep 1, 2021 at 4:11 — Ryan Le
– Ryan Le, Commented Sep 1, 2021 at 4:11

Viet · Accepted Answer · 2021-09-01 04:09:11Z

1

You should handle like this to make sure ProfileTemplate always has data

{
  !isDataLoading && <ProfileTemplate data={data} />;
}

answered Sep 1, 2021 at 4:09

Viet

12.9k2 gold badges18 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ambe5960 Over a year ago

Thanks a lot! This is less than ideal because the function needs to return something. But thanks for sharing.

Daniel Duong · Accepted Answer · 2021-09-01 04:13:52Z

1

This line here is the problem

  data={!isDataLoading && data}

I suggest you refactor your code to have conditional render like so

if (isDataLoading || !data) {
    return null
}
return (
    <ProfileTemplate data={data}/>
);

However you can simply replace the data prop with a ternary It is always good practice to extract into constants

const data = isDataLoading ? data : undefined;
return (
    <ProfileTemplate data={data}/>
);

The second option still does not account for what should be rendered when you have data undefined So you would need a render of null inside ProfileTemplate

answered Sep 1, 2021 at 4:13

Daniel Duong

1,1126 silver badges11 bronze badges

1 Comment

ambe5960 Over a year ago

Thanks a lot! Definitely what I was looking for.

maazadeeb · Accepted Answer · 2021-09-01 04:29:07Z

0

If I understand it correctly, Maybe seems to have been defined like type Maybe<T> = T | null.

So, since you expect data to be either present or null, you can change your consumption logic to

<ProfileTemplate
  data={isDataLoading ? null : data}
/>

This will get rid of the error 'false | Maybe<profile>' is not assignable to type 'Maybe<profile>'.. This error shows up because in your existing code !isDataLoading && data can either evaluate to false or whatever the type of data is.

Secondly, since data can be null, using it to access data.first_name can be a problem. That's what TypeScript is trying to tell you. One way to "fix" it would be to use the optional chaining data?.first_name to tell the compiler that you'll access first_name iff data is defined.

answered Sep 1, 2021 at 4:29

maazadeeb

6,1122 gold badges32 silver badges41 bronze badges

1 Comment

ambe5960 Over a year ago

Awesome, thank you. I added optional chaining... And then in my <StaticField> component, should I have text typed as Maybe<string>? It errors out with just string, but is there any reason to not use Maybe in that case?

Collectives™ on Stack Overflow

Typescript fetch data from server and loading state

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related