What is the reasoning for useQuery/useMutation etc to _not_ return a union of states?

[paulyokuda]

useQuery/useMutation both return fields like { data, isLoading, isError } = useQuery( ... ), which forces consumers to have ordered checks for these things e.g.

if (isError) return <ErrorState />;
if (isLoading) return <LoadingState />;

// Even when you get to this block, data is still typed as `| undefined` when I wouldn't expect it to be
if (data) return <MyComponent data={data} />;

// Do I just return null here?
return null;

One pattern I've found to be nice for these things is to have the data object be a tagged union ('loading', 'error', 'loaded') since my data can only be in one of those states at a time. Two questions:

• Is there a reason things aren't implemented this way?
• Is there a better pattern than the ordered conditionals to best handle rendering?

[Ionshard]

I am not affiliated with the project, but I can answer this question ... the result is already a discriminated union and should already narrow the type when you use the isLoading and isError states.

Given this example:

import { useQuery } from '@tanstack/react-query';
import { VFC } from 'react';

type WidgetData = {
  id: number;
  name: string;
};

const api = {
  getWidgetData: (id: number): Promise<WidgetData> => Promise.resolve({ id, name: 'Widget' }),
};

const getWidgetData = (id: number) => ({
  queryKey: ['getWidgetData', id],
  queryFn: () => api.getWidgetData(id),
});

export type MyWidgetProps = {
  id: number;
};
export const MyWidget: VFC<MyWidgetProps> = ({ id }) => {
  const { data, isLoading, isError } = useQuery(getWidgetData(id));

  if (isLoading) return <Loader />;

  if (isError) return <ErrorPanel />;

  return <MyWidgetContent widget={data} />;
};

// Examples to make compiler happy
const Loader = () => <div>Loading</div>;
const ErrorPanel = () => <div>Error</div>;
const MyWidgetContent = ({ widget }: { widget: WidgetData }) => <div>{widget.name}</div>;

You can see that data is correctly narrowed down to remove undefined when passed to the MyWidgetContent component.

Original type of data:

[paulyokuda]

Oh interesting, appreciate the reply @Ionshard! I think this problem breaks down a bit in cases where we pass an onSuccess callback to useQuery (to do things like set global state management ie recoil, redux) since now the data becomes decoupled from the isError and isLoading. But maybe the solution there is to set the full object that useQuery returns and then in all the places that read this global state can use the rendering pattern you mentioned?

[TkDodo]

@paulyokuda please show a typescript playground example of what you are experiencing, because callbacks shouldn't affect the discriminated union.

where we pass an onSuccess callback to useQuery (to do things like set global state management ie recoil, redux)

Please also note that the callbacks on useQuery are deprecated and will be removed in the next major version. syncing data to redux or recoil is an anti pattern that you probably shouldn't need.

[paulyokuda]

@TkDodo here's a forked example to look at: https://codesandbox.io/s/typescript-react-query-forked-vfr6nq?file=/src/App.tsx

I added a comment in App.tsx#39 where the problem still exists. Is there something I'm missing?

Please also note that the callbacks on useQuery are deprecated and will be removed in the next major version. syncing data to redux or recoil is an anti pattern that you probably shouldn't need

This is a good shout! I assumed it was somewhat of an anti pattern since it adds more sources of truth instead of relying on the react query cache

[TkDodo]

you're using react-query v3, not @tanstack/react-query v4. We've removed the idle state in v4. Everything I said is for v4+. The last update to v3 was a year ago ...