<Suspense> fallback component not rendered when refetch()

[mafelipez]

Hi ✋,
I have this example (Tanstack query V5.36.0), where I try to understand why <Suspense> fallback are not rendered when I call refetch() :

import {
    QueryClient,
    QueryClientProvider,
    queryOptions,
    useSuspenseQuery,
} from '@tanstack/react-query';
import React, { Suspense } from 'react';

const fetchDataQuery = () =>
    queryOptions({
        queryKey: ['data'],
        queryFn: async () => {
            return new Promise((resolve) => {
                setTimeout(
                    () =>
                        resolve([
                            {
                                lines: [
                                    {
                                        name: 'test 1',
                                        description: 'test 1 description',
                                    },
                                    {
                                        name: 'test 2',
                                        description: 'test 2 description',
                                    },
                                ],
                                description: '',
                                label: 'Shop 1',
                                uuid: 'd23ac002-5444-4bf4-8f5b-0dbff30f73f9',
                            },
                            {
                                lines: [
                                    {
                                        name: 'shop name 2',
                                        description: 'shop name 2 description',
                                    },
                                ],
                                description: '',
                                label: 'Shop 2',
                                uuid: '443ac002-5444-4bf4-8f5b-0dbff30f73f9',
                            },
                        ]),
                    3000
                );
            });
        },
    });

const TableComponent = ({ index }: { index: number }) => {
    const { data, refetch } = useSuspenseQuery(fetchDataQuery());

    const onClick = () => {
        console.log('onClick TableComponent index = ', index);
        return refetch();
    };
    return (
        <>
            <table>
                <thead>
                    <th>Name</th>
                    <th>Description</th>
                </thead>
                <tbody>
                    {data[index]?.lines.map((field: any) => {
                        return (
                            <tr key={field.name}>
                                <td>{field.name}</td>
                                <td>{field.description}</td>
                            </tr>
                        );
                    })}
                </tbody>
            </table>
            <button onClick={onClick}>Refetch table</button>
            <hr />
        </>
    );
};

const PanelComponent = ({ index }: any) => {
    const { data, refetch } = useSuspenseQuery(fetchDataQuery());

    const onClick = () => {
        console.log('onClick PanelComponent index = ', index);
        refetch();
    };

    return (
        <section>
            <header>{data[index]?.label}</header>
            <button onClick={onClick}>Refetch panel</button>
            <TableComponent index={index} />
        </section>
    );
};

const PanelSuspenseComponent = ({ index }: { index: number }) => {
    return (
        <Suspense fallback={<div>Loading Panel (index = {index})...</div>}>
            <PanelComponent index={index} />
        </Suspense>
    );
};

const PanelsComponent = () => {
    const { data } = useSuspenseQuery(fetchDataQuery());
    return data.map((group: any, index: number) => {
        return <PanelSuspenseComponent index={index} key={group.uuid} />;
    });
};

const PageTitleComponent = () => {
    const { data, refetch } = useSuspenseQuery(fetchDataQuery());

    const onClick = () => {
        console.log('onClick PageTitleComponent');
        return refetch();
    };

    return (
        <>
            <header>
                <button onClick={onClick}>Refetch {data.length} panels</button>
            </header>
            <hr />
        </>
    );
};

const queryClient = new QueryClient();

const Page = () => {
    return (
        <QueryClientProvider client={queryClient}>
            <Suspense fallback={<div>Loading Page title...</div>}>
                <PageTitleComponent />
            </Suspense>
            <Suspense fallback={<div>Loading by default Panels...</div>}>
                <PanelsComponent />
            </Suspense>
        </QueryClientProvider>
    );
};

export default Page;

It's a simple page, that fetch data from a single query and display it on a panel that contains table.
The main objective is to test if I can have 3 different loadings when I call refetch() on :

• TableComponent -> reload only the concerned table
• PanelComponent -> reload only the concerned panel
• PageTitleComponent -> reload the full page (2 Suspense of the Page component)

<Suspense> fallback components are rendered on the initial loading but never following a call to refetch(). I certainly misusing this feature, but I don't see my error(s) 😓
I haven't found a way to debug the problem, by catch/observe Promise called by <Suspense /> children components 😢 .
Can you help me to understand this issue ?
Thanks in advance 🙏

[TkDodo]

fallback components are rendered on the initial loading but never following a call to refetch()

This is on purpose because we only suspend when there is no other way - meaning we have no data to show. Stale data is always preferred to a loading spinner. If we wouldn’t do that, our automatic refetches (e.g. on window focus) would also re-suspend, which isn’t good.

calling refetch on a button click has a very specific use-case: re-fetching with the same arguments. I don’t see this too often in the wild. What’s usually the case is that clicking the button changes something that serves as an input to the query, and then, if new data for that input doesn’T yet exist, we suspend.

If you really want to force it, you have to remove data before refetching:

<button onClick={() => {
  queryClient.removeQueries(fetchDataQuery())
  refetch()
})>hard refetch</button>

[mafelipez]

Thanks for this quick response @TkDodo 🙏