[TypeScript] How to type guard to avoid "possibly undefined"

[alinjie]

Hi!

First off, thanks for an awesome library!

What is the best wayu to type guard and avoid query.data to possibly be undefined?
In the examples I see that status === "loading" and error are checked before using that data object, but replicating the same thing in TypeScript causes this

Example CodeSandbox

Any suggestions are appreciated!

[bviebahn]

status could also be idle in which case data would be undefined.

[alinjie]

This does the trick. Thanks a lot 😄

 if (todosQuery.isLoading || todosQuery.isIdle) {
    return <h1>Loading...</h1>;
  }

[alinjie]

status could also be idle in which case data would be undefined.

Any suggestions on how to handle this when running multiple queries in the same component?

Updated example

[bviebahn]

If you use the loading and idle states directly without saving them in another variable it works. Sometimes typescript is not that clever. Or maybe there's are reason I don't know. This works:

if (todosQuery.isIdle || jokeQuery.isIdle || todosQuery.isLoading || jokeQuery.isLoading) {
    return <h1>Loading...</h1>;
  }

  if (todosQuery.error || jokeQuery.error) {
    const error = todosQuery.error || jokeQuery.error;
    return <h1>{error!.message}</h1>;    // don't know why non-null assertion is necessary here...
  }

[alinjie]

I see. There seems to be an ongoing issue addressing this. This is also why the non-null assertion fails, I guess.

Thanks again!

[ideffix]

When you need to load data once e.g. on the application start, I personally like to use "Gate" component. The role of the gate is to stop futher rendering as long as data is not loaded yet. When data is finally loaded I use context&customHook to read my initial data. At this point Im sure that my data will not be undefined. You can check a PoC here:
https://stackblitz.com/edit/react-ts-x65k5x?file=index.tsx