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 } }),
  })
}

[travisbreaks]

useServerFn is a React hook, so it can only be called inside React components, not inside queryOptions (which runs in loaders and other non-React contexts).

The fix: call the server function directly in queryOptions instead of wrapping it with useServerFn. Server functions are plain async functions; the hook wrapper just adds React-specific niceties (pending state, error boundaries). In a loader or queryOptions factory, you don't need those.

const userQueryOptions = (id: string) => queryOptions({
  queryKey: ['user', id],
  queryFn: () => fetchUser({ data: id }), // call server fn directly, no hook
})

useServerFn is useful in event handlers and components where you want React transitions. For data fetching in loaders, skip it.