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

doesn't work with

queryClient.invalidateQueries

queryClient.invalidateQueries

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

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

is consuming it using

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

TanStack•5mo ago•

16 replies

dead-brown

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

doesn't work with

queryClient.invalidateQueries

queryClient.invalidateQueries

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

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

is consuming it using

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

Invalidating using query client

Similar Threads

Invalidating using query client

Similar Threads

Similar Threads

Similar Threads