reactjs - Mengendalikan 'undefined' untuk objek data yang dikembalikan dari 'useQuery' hook @tanstack/react-query dengan peraturan linting TS 'strict' diset kepada true

Saya sedang bekerja pada projek baru di mana peraturan linting Typescript strict ditetapkan kepada true. Dengan peraturan ini, Typescript tidak lagi pasti tentang jenis data yang dikembalikan daripada hook useQuery dari pakej @tanstack/react-query kerana ia boleh menjadi jenis sebenar atau tidak ditakrifkan.

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/ikhtisarFail.ts

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

    console.log(fileData);
    ...

Di sini fileData adalah ListFileResponse atau undefined.

Selepas menambah semakan untuk isLoading dan isError, saya masih mendapat keputusan yang sama.

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);

Apa pemeriksaan tambahan yang perlu saya lakukan untuk meyakinkan TS linting bahawa fileData tidak undefined?

Jawapan #1

Sebab TS tidak mengecilkan jenis dalam contoh anda adalah kerana anda telah menyahstruktur objek query, dan ia tidak boleh menjejak hubungan itu lagi.

Untuk membetulkan, jangan nyahstrukturkan pertanyaan:

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

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

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

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