React-query: Show loading spinner while fetching data

Question

Using react-query in new project and having small issue. Requirement is to show loading spinner on empty page before data is loaded and than after user fetches new results with different query to show spinner above previous results.

First case is pretty easy and well documented:

  const { isLoading, error, data } = useQuery(["list", query], () =>
    fetch(`https://api/list/${query}`)
  );

  if (isLoading) return <p>Loading...</p>;

  return <div>{data.map((item) => <ListItem key={item.id} item={item}/></div>

But, cant figure out second case - because, after query changes react-query doing fetch of new results and data from useQuery is empty as result I get default empty array and in that case falls to that condition - if (isLoading && !data.length )

  const { isLoading, error, data=[] } = useQuery(["list", query], () =>
    fetch(`https://api/list/${query}`)
  );

  if (isLoading && !data.length ) return <p>Loading...</p>;

  return <div>
    {data.map((item) => <ListItem key={item.id} item={item}/>
    {isLoading && <Spinner/>}
  </div>

To show return <p>Loading...</p> only when I dont have data yet, after I have previous data I want to show that data with Spinner as indication that new data is coming. — Kuzyo Yaroslav
– Kuzyo Yaroslav, Commented Jun 25, 2020 at 19:01
make a console for data and check whether it's returning any object initially data returning will be undefined — pageNotfoUnd
– pageNotfoUnd, Commented Jun 25, 2020 at 19:17

rphlmr · Accepted Answer · 2020-06-30 08:38:44Z

When you have no cache (first query fetch or after 5 min garbage collector), isLoading switch from true to false (and status === "loading").

But when you already have data in cache and re-fetch (or use query in an other component), useQuery should return previous cached data and re-fetch in background. In that case, isLoading is always false but you have the props "isFetching" that switch from true to false.

In your example, if the variable "query" passed on the array is different between calls, it's normal to have no result. The cache key is build with all variables on the array.

const query = "something"
const { isLoading, error, data } = useQuery(["list",query], () =>
    fetch(`https://api/list/${query}`)
  );

const query = "somethingElse"
const { isLoading, error, data } = useQuery(["list",query], () =>
    fetch(`https://api/list/${query}`)
  );

In that case, cache is not shared because "query" is different on every useQuery

Build Though · Accepted Answer · 2022-03-07 10:57:16Z

3

You can use is isFetching for every time new data is fetched

const { isFetching, isError, isSuccess, data } = useQuery('key', fnc())
if (isFetching) {
    return <LoaderSpinner />
}
else if (isError) {
    return "error encountered"
}
return (
    { isSuccess && data?.map((item) => <li>{item?.name}</li>)}
)

edited Mar 7, 2022 at 10:57

answered Feb 7, 2022 at 12:20

Build Though

4526 silver badges11 bronze badges

1 Comment

Jesper van den Munckhof Over a year ago

But then cached data doesn't make sense anymore since isFetching is also true when fetching data with existing cached data. I think that isLoading is the better option here.

Code ninja · Accepted Answer · 2023-02-19 03:22:56Z

The problem with this code is that it is not checking if the data array is empty before attempting to map over it. If the data array is empty, this code will throw an error. To fix this, the code should check if the data array is empty before attempting to map over it.

const { isFetching, isError, isSuccess, data } = useQuery('key', fnc());
if (isFetching) {
    return <LoaderSpinner />
} else if (isError) {
    return "error encountered"
} else if (isSuccess && data?.length) {
    return data?.map((item) => <li>{item?.name}</li>)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Collectives™ on Stack Overflow

React-query: Show loading spinner while fetching data

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related