TanStackT
TanStack•2y ago•
3 replies
full-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} />
}


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} />
}


Is this behavior working as intended or am I doing something wrong?

Any help would be greatly appreciated.
Was this page helpful?