CODEWITHSUNDEEP
javascriptreactjsreact-query
Kuzyo Yaroslav
Kuzyo Yaroslav

Reputation: 123

React-query: Show loading spinner while fetching data

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>

Upvotes: 11

Views: 42958

Answers (3)

Code ninja
Code ninja

Reputation: 190

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>

Upvotes: 0

Build Though
Build Though

Reputation: 442

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

Upvotes: 3

rphlmr
rphlmr

Reputation: 918

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

Upvotes: 25

Related Questions