Returning query options in loaderDeps to prevent duplication

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

export const Route = createFileRoute('/posts')({
  // Use the `loader` option to ensure that the data is loaded
  loader: () => queryClient.ensureQueryData(postsQueryOptions),
  component: () => {
    // Read the data from the cache and subscribe to updates
    const {
      data: { posts },
    } = useSuspenseQuery(postsQueryOptions)

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

export const Route = createFileRoute("/")({
  component: RouteComponent,
  validateSearch: v.object({
    page: v.optional(v.fallback(v.number(), defaultValues.page), defaultValues.page),
    limit: v.optional(v.fallback(v.number(), defaultValues.limit), defaultValues.limit),
  }),
  loaderDeps: ({ search }) => articlesQueryOptions({ limit: search.limit, offset: search.page - 1 }),
  loader: ({ context: { queryClient }, deps }) => queryClient.ensureQueryData(deps),
  search: { middlewares: [stripSearchParams(defaultValues)] },
});

function RouteComponent() {
  const articlesQuery = useSuspenseQuery(Route.useLoaderDeps());
}