React Query + Router
When using TanStack Query together with TanStack Router, I am not able to show fresh data even though my context is a query client, and I am invalidating the query client on mutation. Any clue?
My __root.tsx:
My main.tsx
And my Test.tsx
myQuery:
And I have this functionality on a onClick button:
My __root.tsx:
interface MyRouterContext {
queryClient: QueryClient;
}
export const Route = rootRouteWithContext<MyRouterContext>()({
component: App,
});My main.tsx
const queryClient = new QueryClient({
defaultOptions: { queries: { refetchOnWindowFocus: false } },
});
const router = createRouter({
routeTree,
defaultPreload: "intent",
context: { queryClient },
});And my Test.tsx
export const Route = createFileRoute("/Test")({
component: Test,
loader: ({ context: { queryClient } }) => queryClient.ensureQueryData(myQuery),
pendingComponent: Spinner,
errorComponent: Error,
});myQuery:
export const myQuery = {
queryKey: ["test"],
queryFn: () => getSomething(),
};And I have this functionality on a onClick button:
const { queryClient } = Route.useRouteContext();
<button onClick={() => queryClient.invalidateQueries(["test"])}>Click me</button>
