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

useLoaderData

useLoaderData

useLoaderData doesn't work with

queryClient.invalidateQueries

queryClient.invalidateQueries

queryClient.invalidateQueries

queryClient.invalidateQueries -> simply it's ignored (I guess becuase I use this data as:

const twoFa = useLoaderData({ from: "...." })

const twoFa = useLoaderData({ from: "...." })

const twoFa = useLoaderData({ from: "...." })

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

useLoaderData

useLoaderData

useLoaderData is consuming it using

useQuery

useQuery

useQuery

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,
    });
};

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,
    });
};

Invalidating using query client

Similar Threads

Similar Threads

Similar Threads