Handling undefined for returned data object from @tanstack/react-query's useQuery hook with TS linting rule 'strict' set to true

Question

I'm working on a new project where the Typescript linting rule strict is set to true. With this rule, Typescript is no longer sure of the type of the returned data from the useQuery hook from the @tanstack/react-query package as it can be the actual type or undefined.

hooks/useFiles.ts

import { useQuery } from '@tanstack/react-query';
import { fileApi } from '@/utils/apiClient';
import { ListFileResponse } from '@types/files';

type useFilesProps = {
    page?: number;
    limit?: number;
};

export const useFiles = ({ page = 1, limit = 20 }: useFilesProps ) => {
    return useQuery<ListFileResponse>({
        queryKey: ['files'],
        queryFn: () => fileApi.listFiles({ page, limit }).then((res) => res.data),
    });
};

views/fileOverview.ts

export const FileOverview = () => {
    const { data: fileData } = useFiles({ page, limit });

    console.log(fileData);
    ...

Here fileData is ListFileResponse or undefined.

After adding checks for isLoading and isError I still get the same result.

const { data: fileData, isLoading: isFileLoading, isError: isFileError } = useFiles({ page, limit });

if (isFileLoading) return <p>Loading</p>;
if (isFileError) return <p>Error</p> ;

console.log(fileData);

What extra check do I have to do to make the TS linting convinced that fileData is not undefined?

Ro Milton · Accepted Answer · 2024-02-04 23:17:19Z

0

The reason TS doesn't narrow the type in your example is because you destructured the query object, and it can't keep track of the relationship any more.

To fix, don't destructure the query:

const filesQuery = useFiles({ page, limit });

if (!filesQuery.isSuccess) return <p>Something</p> ;

console.log(filesQuery.fileData); //TS knows this is not undefined now

Source: https://tkdodo.eu/blog/react-query-and-type-script#type-narrowing

edited Feb 4, 2024 at 23:17

answered Feb 4, 2024 at 22:21

Ro Milton

2,54616 silver badges11 bronze badges

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

Collectives™ on Stack Overflow

Handling undefined for returned data object from @tanstack/react-query's useQuery hook with TS linting rule 'strict' set to true

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