Fetching multiple resources in Loader using ensureQueryData

// src/routes/posts.tsx

const postsQueryOptions = queryOptions({
  queryKey: ['posts'],
  queryFn: () => fetchPosts(),
})

const userQueryOptions = queryOptions({
  queryKey: ['user'],
  queryFn: () => fetchUser(),
})

export const Route = createFileRoute({
  loader: async () => {
    await Promise.all([
      queryClient.ensureQueryData(postsQueryOptions),
      queryClient.ensureQueryData(userQueryOptions),
    ])
  },
  component: () => {
    const { data: posts } = useSuspenseQuery(postsQueryOptions)
    const { data: user } = useSuspenseQuery(userQueryOptions)

    return (
      <div>
        {posts.map((post) => (
          <Post key={post.id} post={post} />
        ))}
      </div>
    )
  },
})