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.

[ziqin]

Faced with the same problem 🙋‍♂️

When using queryOptions, the goal is usually to reuse the same options in both a route loader and a component. However, the loader shouldn't wrap the server function with useServerFn, whereas the component should. This discrepancy makes it impossible to share the same options object directly.

[barry166]

You can avoid most of the duplication by making the shared queryOptions call the server function directly, then only wrap it with useServerFn in component-only mutation/event code.

export const resourceParticipationsQuery = (resourceId: string) =>
  queryOptions({
    queryKey: ['resourceParticipations', resourceId],
    queryFn: () => getResourceParticipationsFn({ data: { resourceId } }),
  })

Then both the loader and useQuery(resourceParticipationsQuery(resourceId)) can use the same options. useServerFn() is the React hook wrapper; the server function itself is already the isomorphic callable you want for loaders and query factories.