En mi aplicación React , estoy usando la consulta RTK para obtener datos. Tengo más de 10 puntos finales de API y una ruta para cada uno de los puntos finales.
Quiero mostrar una línea horizontal en la parte superior de la página para indicar que se está realizando la obtención de datos.
Por el momento, he hecho esto.
const ArticlePage = () => { const { id} = useParams(); const { data, isFetching, isLoading } = useFetchArticleByIdQuery(id); return ( <Layout> {(isFetching || isLoading) && <LinearProgressIndicator />} <PageHead /> {data && <ArticleContent article={data} />} </Layout> ); };También he probado esto.
const ArticlePage = () => { const { id} = useParams(); const { data, isFetching, isLoading } = useFetchArticleByIdQuery(id); return ( <Layout> <LinearProgressIndicator shouldDisplay={(isFetching || isLoading)} /> <PageHead /> {data && <ArticleContent article={data} />} </Layout> ); }; Es engorroso usar lo mismo en todas las más de 10 rutas. Entonces, ¿hay alguna forma de mostrar <LinearProgressIndicator /> una vez para los más de 10 puntos finales?
Puedes escribir un selector para eso:
const isLoading = useAppSelector((state) => { return Object.values(state.api.queries).some((query) => { return query && query.status === QueryStatus.pending; }); });