In my React app, I am using RTK query to fetch data. I have 10+ API endpoints and a route for each one of the endpoints.

I want to show a horizontal line at the top of the page to indicate that the data fethcing is going on.

At the moment, I have done this.

const ArticlePage = () => {
  const { id} = useParams();
  const { data, isFetching, isLoading } = useFetchArticleByIdQuery(id);

  return (
    <Layout>
      {(isFetching || isLoading) && <LinearProgressIndicator />}
      <PageHead />
      {data && <ArticleContent article={data} />}
    </Layout>
  );
};

I have also tried this.

const ArticlePage = () => {
  const { id} = useParams();
  const { data, isFetching, isLoading } = useFetchArticleByIdQuery(id);

  return (
    <Layout>
      <LinearProgressIndicator shouldDisplay={(isFetching || isLoading)} />
      <PageHead />
      {data && <ArticleContent article={data} />}
    </Layout>
  );
};

It is cumbersome ot use the same thing on all the 10+ routes. So is there any way to show <LinearProgressIndicator /> once for all the 10+ endpoints?

In my React app, I am using RTK query to fetch data. I have 10+ API endpoints and a route for each one of the endpoints.

I want to show a horizontal line at the top of the page to indicate that the data fethcing is going on.

At the moment, I have done this.

const ArticlePage = () => {
  const { id} = useParams();
  const { data, isFetching, isLoading } = useFetchArticleByIdQuery(id);

  return (
    <Layout>
      {(isFetching || isLoading) && <LinearProgressIndicator />}
      <PageHead />
      {data && <ArticleContent article={data} />}
    </Layout>
  );
};

I have also tried this.

const ArticlePage = () => {
  const { id} = useParams();
  const { data, isFetching, isLoading } = useFetchArticleByIdQuery(id);

  return (
    <Layout>
      <LinearProgressIndicator shouldDisplay={(isFetching || isLoading)} />
      <PageHead />
      {data && <ArticleContent article={data} />}
    </Layout>
  );
};

It is cumbersome ot use the same thing on all the 10+ routes. So is there any way to show <LinearProgressIndicator /> once for all the 10+ endpoints?

• javascript
• reactjs
• react-redux
• rtk-query

Share Improve this question Follow edited Mar 18, 2022 at 7:55 mahan asked Mar 18, 2022 at 7:50 mahanmahan 15.1k88 gold badges6767 silver badges9898 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

You can write a selector for that:

  const isLoading = useAppSelector((state) => {
    return Object.values(state.api.queries).some((query) => {
      return query && query.status === QueryStatus.pending;
    });
  });