Use enabled prop for type narrowing | TanStack | Page 1

fallen jacinth Apr 25, 2024, 10:43 AM

#

Simple question: Would it be feasible to use the 'enabled' prop to narrow down the type of variables used in the fetch function?

Codesandbox to show the issue:
https://codesandbox.io/p/sandbox/billowing-thunder-qwdy98?file=%2Fsrc%2FApp.tsx%3A2%2C37

weary trout Apr 25, 2024, 11:12 AM

#

The problem with this is that in both cases id refers to the id in the props which can be undefined. There's no connection between the enabled check and the id you pass to the queryFn. TS simply can not narrow this property.

#

Read this https://tkdodo.eu/blog/react-query-and-type-script#type-safety-with-the-enabled-option

React Query and TypeScript

Combine two of the most powerful tools for React Apps to produce great user experience, developer experience and type safety.

faint nymph Apr 25, 2024, 11:24 AM

#

use the skipToken:
https://tanstack.com/query/latest/docs/framework/react/typescript#typesafe-disabling-of-queries-using-skiptoken

TanStack Query Docs

#Use enabled prop for type narrowing