isFetching, isLoading, isPending, isError... how to best structure component? (esp. w/ TS)

There are a lot of convenience booleans (isFetching, isLoading, isPending) returned from useQuery() which signal the state of

status

status

. I'm a bit confused which ones to use especially in TS where I want

data

data

to be defined (and not <data> | undefined) and handle all states around the async request ("loading", "error", "date").

This is the pattern that makes most sense to me:

function MyComponent() {
  const { data, isPending, isError } = useQuery(...);

  if (isPending) {
    return "Loading...";
  }

  if (isError) {
    return "Error";
  }

  return (
     <div>
       // TS strict sees data as defined (not <data> | undefined) due to type narrowing from isPending/isError above
       {data}
     </div>
  )
}

function MyComponent() {
  const { data, isPending, isError } = useQuery(...);

  if (isPending) {
    return "Loading...";
  }

  if (isError) {
    return "Error";
  }

  return (
     <div>
       // TS strict sees data as defined (not <data> | undefined) due to type narrowing from isPending/isError above
       {data}
     </div>
  )
}

What patterns do you all typically use?

TanStack•11mo ago•

2 replies

sacred-rose

isFetching, isLoading, isPending, isError... how to best structure component? (esp. w/ TS)

There are a lot of convenience booleans (isFetching, isLoading, isPending) returned from useQuery() which signal the state of

status

status

. I'm a bit confused which ones to use especially in TS where I want

data

data

to be defined (and not <data> | undefined) and handle all states around the async request ("loading", "error", "date").

This is the pattern that makes most sense to me:

function MyComponent() {
  const { data, isPending, isError } = useQuery(...);

  if (isPending) {
    return "Loading...";
  }

  if (isError) {
    return "Error";
  }

  return (
     <div>
       // TS strict sees data as defined (not <data> | undefined) due to type narrowing from isPending/isError above
       {data}
     </div>
  )
}

function MyComponent() {
  const { data, isPending, isError } = useQuery(...);

  if (isPending) {
    return "Loading...";
  }

  if (isError) {
    return "Error";
  }

  return (
     <div>
       // TS strict sees data as defined (not <data> | undefined) due to type narrowing from isPending/isError above
       {data}
     </div>
  )
}

What patterns do you all typically use?

isFetching, isLoading, isPending, isError... how to best structure component? (esp. w/ TS)

Similar Threads

isFetching, isLoading, isPending, isError... how to best structure component? (esp. w/ TS)

Similar Threads

Similar Threads

Similar Threads