T
TanStack•4w ago
national-gold

Invalidating using query client

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 loader = ({
    context: { queryClient },
}: LoaderArgs): Promise<GetTwoFaResponse> => {
    return queryClient.ensureQueryData({
        queryKey: ["two-fa"],
        queryFn: getTwoFa,
    });
};
7 Replies
national-gold
national-goldOP•4w ago
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 { 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,
});
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
adverse-sapphire
adverse-sapphire•4w ago
useSuspenseQuery?
national-gold
national-goldOP•4w ago
But doesn't it require me to use Suspense? @Manuel Schiller Like it works I wonder what are the caveats
adverse-sapphire
adverse-sapphire•4w ago
it wouldnt suspend if you preloaded the data in the loader
national-gold
national-goldOP•4w ago
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)
adverse-sapphire
adverse-sapphire•4w ago
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
national-gold
national-goldOP•4w ago
Ah okey thanks

Did you find this page helpful?