Router + Query integration // route invalidation

loaderDeps = ({ search }) => search,
loader: ({ context: { queryClient }, deps, params }) => 
  queryClient.ensureQueryData({
    queryKey: [params, deps],
    queryFn: () => fetch(`/api/${params}?${deps}`) // pardon me here, i'm lazy to code all
 })

function Component() {
  const data = Route.useLoaderData()
}

await router.invalidate({ filter: ({ routePath }) => routePath = '/xxx' })
await queryClient.invalidateQueries({ queryKey: ['/xxx'] })

function Component() {
  const params = Route.useParams()
  const search = Route.useSearch()
  
  const { data } = useSuspenseQuery({
    queryKey: [params, deps],
    queryFn: () => fetch(`/api/${params}?${deps}`) // pardon me here, i'm lazy to code all
 })    
}

function createQuery(params: any, search: any) {
  return {
    queryKey: [],
    queryFn: async () => {}
  }
}

// then
loader: ({ context: { queryClient }, deps, params }) => 
  queryClient.ensureQueryData(createQuery(params, deps))

// and
function Component() {
  const params = Route.useParams()
  const search = Route.useSearch()
  
  const { data } = useSuspenseQuery(createQuery(params, search))    
}