Multiple components, using same data from same query (React.Suspense)

[strarsis]

I want to use react-query in an app that fetches some categories from a REST API.
While it is fetching, skeletons are shown as placeholders (using React Suspense).

Now there are two places on the page/component that have to fetch the same data:
The category details on the page, and a breadcrumb trail that includes the category name and icon.
So a skeleton is shown for the breadcrumb trail and one for the category details and
the actual displaying components are shown when the data was fetched.

Both components are wrapped in a component that uses <React.Suspense with their respective skeleton placeholder.
Each component uses useQuery with the same key and the same fetch function so react-query hopefully will fetch only once and cache the results.

I am not sure if this is the right approach. While it loads fine (skeletons disappear, components are shown),
react-query does multiple requests to the same resources while no App state is changed (at least intentionally).
Also after a moment the components show that the categories are empty (this happens with the empty default before actually fetching).

I also find the need to wrap the whole component into a wrapper component for using <React.Suspend a bit tedious. But apparently React requires the component that uses the query to not use <React.Suspend but rather its parent component.

I really like the React.Suspense approach, it reminds me of React Async (which sadly isn't actively developed now and has open issues with TypeScript) and it is very elegant to show skeletons while loading. react-query also allows to prefetch at app startup, which is also great and naturally improves the app responsiveness. It feels "logical" to me - except for the part where components have to share the same query and need an extra wrapper.

Help would be greatly appreciated!

[TkDodo]

Each component uses useQuery with the same key and the same fetch function so react-query hopefully will fetch only once and cache the results.

yes, it should.

While it loads fine (skeletons disappear, components are shown),
react-query does multiple requests to the same resources while no App state is changed (at least intentionally).
Also after a moment the components show that the categories are empty (this happens with the empty default before actually fetching).

can you show that in a codesandbox reproduction?

I also find the need to wrap the whole component into a wrapper component for using <React.Suspend a bit tedious. But apparently React requires the component that uses the query to not use <React.Suspend but rather its parent component.

useQuery throws the Promise to the nearest suspense boundary, so yes, this is just how suspense works.

[strarsis]

@TkDodo: Thanks for your answer! I try to prepare a sandbox.

The problem is that the page component (Ionic Framework page) should pass a route parameter (category slug) to the list component:
ViewCategory.tsx:

import { IonPage, IonContent } from "@ionic/react";
import { Suspense } from "react";
import { useParams } from "react-router";

import ItemsContentList from "../components/list/category/content/category/ItemsContentList";
import ListSkeleton from "../components/list/items/skeleton/ListSkeleton";

const ViewCategory: React.FC = () => {
    const params = useParams<{ slugCategory: string }>();
    return (
        <IonPage id="view-category-page">
            <IonContent>
                <Suspense fallback={<ListSkeleton />}>
                    <ItemsContentList categorySlug={params.slugCategory} />
                </Suspense>
            </IonContent>
        </IonPage>
    );
}
export default ViewCategory;

ItemsContentList.tsx:

import { IonLabel, IonList } from '@ionic/react';
import { useCategory } from '../hooks';
import ListItem from '../components/list/items/ListItem';
import { Item } from '../data/Items';

interface ItemsContentListProps {
    categorySlug: string;
}
const ItemsContentList: React.FC<ItemsContentListProps> = ({ categorySlug }) => {
    const category = useCategory(categorySlug);
    return (
        category && category.items && category.items.length > 0 ? (
            <IonList>
                {category.item.map((item: Item) => <ListItem key={item.id} item={item} />)}
            </IonList>
        ) : (
            <IonLabel color="secondary">No items.</IonLabel>
        )
    );
}
export default ItemsContentList;

useCategory:

import { useQuery } from "react-query";
import { fetchCategories } from "./data/api";
const { data: categories } = useQuery('categories', fetchCategories);
    if (!categories) {
        return [];
    }
    return categories;
}

When I try this setup I get a React error and when I retry it works.
So there appears to be some kind of race condition with the params hook or something else.

[strarsis]

So I found a "solution" - but it is rather a workaround as I discovered there is another way in Ionic to pass the route parameters,
hence avoiding the usage of useParams in the page component:
https://ionicframework.com/docs/react/navigation#url-parameters
Or I have used some example for a much older Ionic Framework version and did it wrong...

<React.Suspense is awesome and intuitive. However, that the hook to be waited on must be used inside the element inside the <React.Suspense element is a bit odd for me. But hooks shouldn't be passed down to other elements. So the slug/id approach is the right way I suppose.

[TkDodo]

So there appears to be some kind of race condition with the params hook or something else.

maybe the params you are getting are "not ready" yet, so you'll get undefined on the first render pass?

If that's the case, you can use the enabled option to disable your query until the slug is ready.