foreign-sapphire

How do you handle undefined or missing useQuery results with Typescript?

I have this pattern in my components all the time:

const MyComponent = () => {
  const { data, isLoading } = useQuery( ... );

  if (isLoading) return <div>Loading...</div>

  // Here typescript complains about data being possibly undefined
  const theThingINeed = data.something;

  return ( ... )
}

const MyComponent = () => {
  const { data, isLoading } = useQuery( ... );

  if (isLoading) return <div>Loading...</div>

  // Here typescript complains about data being possibly undefined
  const theThingINeed = data.something;

  return ( ... )
}

How do you solve this elegantly in all your components?

if (!data) {
  return <EmptyState />
}

if (!data) {
  return <EmptyState />
}

if (!data) {
  throw new Error("didn't find your data");
}

if (!data) {
  throw new Error("didn't find your data");
}

Most of the time I'm sure the data itself exists, and so if I check that loading is over, then I should have my data defined. Should I still have a fallback all the time somehow or is there something else I'm missing?

5 Replies