T
TanStack•2y ago
sunny-green

Data is still undefined even after declaring isPending and isError in React Query V5

Hello, I just recently upgraded to React Query V5 and I noticed that the behavior of isPending and isError has changed. Previously, I was able to define them as guard clauses and data would always be defined afterwards: 
typescript
// React Query v4
function SomeCOmponent() {
    const {data, isLoading, isError} = useQuery({
        queryKey: ["some-key"],
        queryFn:  // some request
    })
   if (isLoading) return <p>Loading</p>
   if (isError) return <p>Error </p>

   // At this point, data would ALWAYS be defined
   return  <SomeOtherComponent data={data} />
}
typescript
// React Query v4
function SomeCOmponent() {
    const {data, isLoading, isError} = useQuery({
        queryKey: ["some-key"],
        queryFn:  // some request
    })
   if (isLoading) return <p>Loading</p>
   if (isError) return <p>Error </p>

   // At this point, data would ALWAYS be defined
   return  <SomeOtherComponent data={data} />
}
Now I get the following message: 
typescript
// React Quey v5
function SomeCOmponent() {
    const {data, isPending, isError} = useQuery({
        queryKey: ["some-key"],
        queryFn:  // some request
    })
   if (isPending) return <p>Loading</p>
   if (isError) return <p>Error </p>

   // Data can still be undefined here
   return  <SomeOtherComponent data={data} />
}
typescript
// React Quey v5
function SomeCOmponent() {
    const {data, isPending, isError} = useQuery({
        queryKey: ["some-key"],
        queryFn:  // some request
    })
   if (isPending) return <p>Loading</p>
   if (isError) return <p>Error </p>

   // Data can still be undefined here
   return  <SomeOtherComponent data={data} />
}
Is this behavior working as intended or am I doing something wrong? Any help would be greatly appreciated.
2 Replies
genetic-orange
genetic-orange•2y ago
It's very likely a bug, since without destructuring I get that data isn't undefined after the 2 checks (both in v4 and v5)
fair-rose
fair-rose•2y ago
Please show a typescript playground because imo this hasn't changed between v4 and v5

Did you find this page helpful?