how to send queryClient's cache to the client?

export const Route = createFileRoute('/user/$userId/friends')({
  loader: async ({ context: { queryClient }, params }) => {
    const list = await queryClient.ensureQueryData(getUserFriendsQuery({
      userId: Number(params.userId),
      page: 1,
    }))
    return {
      list,
    }
  },
  component: RouteComponent,
})

const PER_PAGE = 100
export function getUserFriendsQuery(options: {
  userId: number
  page: number
}) {
  return {
    queryKey: ['friends', options],
    queryFn: async (ctx: QueryFunctionContext) => {
      const response = await callSomeServerFn({
        data: { limit: PER_PAGE, offset: options.page * PER_PAGE },
        signal: ctx.signal,
      })
      // response: { items: FriendRelation[], users: UserInfo[] }
      for (const user of response.user) {
        ctx.client.setQueryData(['user', user.id], user)
      }
      return response.items
    },
  }
}