<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 🙏