useLoaderPreloadedQuery.tsx

const useLoaderPreloadedQuery<Query> = () => {
  const preloadedQueryRef = useLoaderData() as PreloadedQuery<Query>;
// clean up is important as we are using loadQuery directly without useQueryLoader
  / which will handle to dispose auto.
  useEffect(() => () => preloadedQueryRef.dispose(), [preloadedQueryRef]);
  
  return preloadedQueryRef
}