How to fix error type void is not assignable to type using react and typescript?

Question

i have the code like below which works.

const { loading, data, error, refetch } = useItemDetailsQuery({
    variables,
    notifyOnNetworkStatusChange: true,
    fetchPolicy: 'network-only',
});

const details: Partial<Item> = data?.itemDetails
    ? data.itemDetails
    : {};

type Item = ItemDetailsQuery['itemDetails'];

type itemDetailsQuery = {
    itemDetails: Pick<
        Types.ItemDetails,
        | 'created'
        | 'description'
        | 'name'
    >
 };

Now with above code, the data in details doesnt get updated page refresh. so i am thinking to put the calculation logic of details in useMemo such that it calculates this logic when data changes and hence there would be no need to reload the page to view new data.

so i tried putting the logic in useMemo like so

const details: Partial<Item> = React.useMemo(
    () => { data?.itemDetails
        ? data.itemDetails
        : {}
    }, [data]
);

but this gives me error "Type 'void' is not assignable to type 'Partial<Pick<ItemDetails, "created", "description", "name"}>"

I am not sure how to fix this problem. could someone help me with this. thanks.

I am new to using react and typescript. In the process of learning.

I think you need to return data from inside function of memo otherwise it will return type void to details which is item time. — Priyank Kachhela
– Priyank Kachhela, Commented Jul 26, 2021 at 7:12
@PriyankKachhela: thanks that fixed the issue. also is it okay to put the logic in useMemo to solve page reload issue? thanks — stackuser
– stackuser, Commented Jul 26, 2021 at 7:16

Đỗ Nhật Quang · Accepted Answer · 2022-04-06 10:22:54Z

1

you forgot the return in useMemo. Without return in the curry function, the value of details will be undefined type as void.

const details: Partial<Item> = React.useMemo(
    () => { 
        return data?.itemDetails
        ? data.itemDetails
        : {}
    }, [data]
);

answered Apr 6, 2022 at 10:22

Đỗ Nhật Quang

8526 silver badges12 bronze badges

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

Collectives™ on Stack Overflow

How to fix error type void is not assignable to type using react and typescript?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related