Loaders, useServerFn and queryOptions

[isc30]

Hi, I'm trying to figure out how to use queryOptions together with useServerFn.

I'm trying to follow the pattern of creating predefined queries and use them from react:

export const resourceParticipationsQuery = ({
  resourceId,
}: {
  resourceId: string
}) => {
  const queryFn = useServerFn(getResourceParticipationsServerFn)
  return queryOptions({
    queryKey: ['resourceParticipations', resourceId],
    queryFn: async () => await queryFn({ data: { resourceId } }),
  })
}

This works on the client, but crashes when used on the loader.

loader: () => {
  void queryClient.prefetchQuery(
      resourceParticipationsQuery({ resourceId })
    )
}

I have tried creating a helper using createIsomorphicFn to handle both cases but it doesn't seem like it works well either.
Is there a "proper" way of doing this without code duplication?

The only solution that works reliably seems to duplicate the code:

// to be used from react
export const useResourceParticipationsQuery = ({
  resourceId,
}: {
  resourceId: string
}) => {
  const queryFn = useServerFn(getResourceParticipationsFn)
  return queryOptions({
    queryKey: ['resourceParticipations', resourceId],
    queryFn: async () => await queryFn({ data: { resourceId } }),
  })
}

// to be used from loader
export const getResourceParticipationsQuery = ({
  resourceId,
}: {
  resourceId: string
}) => {
  return queryOptions({
    queryKey: ['resourceParticipations', resourceId],
    queryFn: async () =>
      await getResourceParticipationsFn({ data: { resourceId } }),
  })
}