Invalidating using query client

[lofty adder]

Hi, I am using query client as a cache management with a router but having such a loader and using data from it with useLoaderData doesn't work with queryClient.invalidateQueries -> simply it's ignored (I guess becuase I use this data as: const twoFa = useLoaderData({ from: "...." }) and queryClient doesn't know tht this query is ever used so it doesn't invalidate it.

One possibly solution for this is instead of consuming the data using useLoaderData is consuming it using useQuery but then we lose typesafety - queryClient doesn't know that we ensured that the data is there. What's the preffered way of doing that?

export const loader = ({
    context: { queryClient },
}: LoaderArgs): Promise<GetTwoFaResponse> => {
    return queryClient.ensureQueryData({
        queryKey: ["two-fa"],
        queryFn: getTwoFa,
    });
};

export const Route = createFileRoute("/_settings-l/settings/security")({
    component: () => {
        const { data: twoFa } = useQuery({
            queryKey: ["two-fa"],
            queryFn: getTwoFa,
        });

        // no type safety here but invalidate queries works.
    },
    loader,
});

export const Route = createFileRoute("/_settings-l/settings/security")({
    component: () => {
        const twoFa = useLoaderData({ from: "/_settings-l/settings/security" });

        // type safety here but invalidate queries doesn't work
    },
    loader,
});

I could ofc use option 2 and router.invalidate but it's kind of strange to mix two different apis

[pine jungle]

useSuspenseQuery?

[lofty adder]

But doesn't it require me to use Suspense?

@pine jungle

Like it works

I wonder what are the caveats

[pine jungle]

it wouldnt suspend if you preloaded the data in the loader

[lofty adder]

Okey from what I see if I "forget" to preload the data then it just Suspends the component and returns null untill data is fetched

strange behaviour but okey I guess it's react internals that do it? I thought Suspense must be wrapping the compoennt (page in this example)

[pine jungle]

returns null untill data is fetched
no, the suspense fallback will be rendered

which is the pending component, unless you use a custom <Suspense> boundary

router adds Suspense boundaries

[lofty adder]

Ah

okey