TypeScript + useQuery - Type guarding

[alinjie]

The documentation states The query results are no longer discriminated unions, which means you have to check the actual data and error properties., whereas before checking if isLoading, isIdle and isError was sufficient in order to make sure the data variable was not undefined (#748).

Since this no longer works, could you provide an example on how to properly make sure the data variable is not undefined before using it?

Thanks in advance!

[boschni]

Hi @alinjie! You could do it like this for example:

function Component() {
  const { data, error } = useQuery('key', queryFn)
  if (error) return <div>Error</div>
  if (!data) return <div>Loading</div>
  return <div>Data: {data}</div>
}

[alinjie]

Hi @boschni! Thanks for your reply.

This is what I ended up doing, but this approach will depend on checking the error first?
If data is checked before error and an error actually occur, data will still be undefined and the error won't be rendered, right? Please, correct me if I'm wrong.

[boschni]

It is recommended to first check for the error because there could still be data when an error occurs.

[alinjie]

Alright, I'll roll with it. Thanks for your help @boschni!