Help Using react-query

[evmartinelli]

I updated my react packages and now im getting error when I try to use this code:

Rest Call

import { CategoriesQueryOptionsType, Category } from "@framework/types";
import http from "@framework/utils/http";
import { API_ENDPOINTS } from "@framework/utils/api-endpoints";
import { useQuery } from "react-query";

export const fetchCategories = async ({ queryKey }: any) => {
	const [_key, _params] = queryKey;
	const {
		data: { data },
	} = await http.get(API_ENDPOINTS.CATEGORIES);
	return { categories: { data: data as Category[] } };
};
export const useCategoriesQuery = (options: CategoriesQueryOptionsType) => {
	return useQuery<{ categories: { data: Category[] } }, Error>(
		[API_ENDPOINTS.CATEGORIES, options],
		fetchCategories
	);
};

Usage

	const { data, isLoading, error } = useCategoriesQuery({
		limit: 10,
	});

{isLoading && !data?.categories?.data?.length -> error: Type error: Property 'categories' does not exist on type 'never'.

If I omit the "isLoading"" the error dissapear.

Can anyone help me, please?

[TkDodo]

Did you update to typescript 4.6 ?

[TkDodo]

I've put your code into typescript playground:

• no error on TS 4.5
• an error on TS 4.6

TS 4.6 has a new feature for better Control Flow Analysis for Destructured Discriminated Unions, which is exactly what's kicking in here. Since you are checking for isLoading, and react-query's types are defined as data being undefined if you are in loading state, the compiler now knows that the length check is unnecessary, because data cannot be an array during loading state :)

[evmartinelli]

thanks!!!