What TanStack Query Vue and Pinia Colada Teach Us About Typing Async State
TanStack Query Vue and Pinia Colada differ in how their APIs handle the state of asynchronous data fetching. For example, there are cases where, even after checking a query's status, `data` is still typed in TypeScript as potentially `undefined`. In this session, taking the API designs of these two data-fetching libraries as a starting point, I'll organize how the way types appear ends up being determined. Using TanStack Query Vue `useQuery` combined with type narrowing via `reactive`, and Pinia Colada's state design, as concrete examples, I'll look at the relationship between Vue `ref`, `toRefs`, `reactive`, and TypeScript's discriminated unions. Through this library comparison, I'll share design perspectives for handling async state in a type-safe way within Vue composables.
aoshi
What TanStack Query Vue and Pinia Colada Teach Us About Typing Async State
TanStack Query Vue and Pinia Colada differ in how their APIs handle the state of asynchronous data fetching. For example, there are cases where, even after checking a query's status, `data` is still typed in TypeScript as potentially `undefined`. In this session, taking the API designs of these two data-fetching libraries as a starting point, I'll organize how the way types appear ends up being determined. Using TanStack Query Vue `useQuery` combined with type narrowing via `reactive`, and Pinia Colada's state design, as concrete examples, I'll look at the relationship between Vue `ref`, `toRefs`, `reactive`, and TypeScript's discriminated unions. Through this library comparison, I'll share design perspectives for handling async state in a type-safe way within Vue composables.