invalidate `ensureQueryData` used in `beforeLoad`

Is there a way to invalidate ensureQueryData data in beforeLoad so that any page that consumes the data via Route.useRouteContext can be updated?

__root.tsx
export const Route = createRootRouteWithContext<RouterContext>()({
  async beforeLoad({ context }) {
    return await context.queryClient.ensureQueryData(authQueryOptions())
  },
  component: RootComponent,
})


index.tsx

function Index() {
  const { auth } = Route.useRouteContext()
  const user = auth?.user
  return (
    <div>
      Index: {user}
    </div>
  )
}
Was this page helpful?