Server Action only works when queryFn isn't a reference

[jschuur]

Describe the bug

In a Next.js 14 app directory project with React Query 5 inside a client component, if I use reference (queryFn: getProjects) for the query function instead of an inline function that calls a function, I get this error:

Only plain objects, and a few built-ins, can be passed to Server Actions. Classes or null prototypes are not supported.

Doing it this way works:

useQuery({
  queryKey: ['projects'],
  queryFn: () => getProjects(),
});

Is this a bug?

I understand what a plain object is, and getProjects does return a promise to a serialisable object.

Your minimal, reproducible example

https://codesandbox.io/p/sandbox/gracious-golick-fq3ss9

Steps to reproduce

My useQuery call is abstracted away inside a custom hook that starts with 'use client';:

'use client';

import { useQuery } from '@tanstack/react-query';

import { getProjects } from '@/db/queries';

export default function useProjects() {
  return useQuery({
    queryKey: ['projects'],
    // works if inline function not if 'queryFn: getProjects'
    queryFn: () => getProjects(),
  });
}

This hook is used in a client component ('use client';). The error also happens if I use useQuery directly in the client component and skip the custom hook.

getProjects comes from a file prefixed with 'use server'; (the query is run by Drizzle on Turso):

'use server';

import 'server-only';

import { db } from '@/db/';
import { projects } from '@/db/schema';

export const getProjects = async () => db.select().from(projects);

I use the HydrationBoundary pattern, but even if I remove that from page.tsx and just create a client side query client, I get the same error too, unless I use an inline query function.

Expected behavior

useQuery accepts both a function reference and an inline function for queryFn.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

• OS: macOS
• Browser: Chrome
• Version: 118.0.5993.117

Tanstack Query adapter

react-query

TanStack Query version

v5.4.3

TypeScript version

v5.2.2

Additional context

The error only kicks in after a few seconds, so it looks like React Query is doing it's default attempt at trying a few times and backing off in between attempts.

[weisisheng]

Seeing the same and your fix is also not working for me. Oddly, I am still getting stale data from yesterday although console.log showing correct pull from database.

tanstack/react-query 5.0.5, next.js 13.5.6

*edit: ignore my second statement, for some reason, google chrome was doing some very aggressive caching. will follow this item progress.

[TkDodo]

The QueryFunction itself gets a QueryFunctionContext passed, which is an object that contains a bunch of things. By passing the function as a reference, you're basically doing:

queryFn: (...args) => getProjects(args)

TypeScript is fine with this even though getProjects doesn't take any args.

If you use that syntax, you're getting the same error. I've narrowed it down to one of our arguments being an AbortSignal, which is not a plain object so it likely cannot be passed to a server action. So, this notation won't work.

[reinaldo-vombo]

Dude you just save my life

[davidchalifoux]

Thanks for figuring this out, it was driving me crazy.

[kam-st]

Why is this still an issue. Why is this not in docs. Spent 5 hours resolving this issue.

[TkDodo]

I haven't seen you contribute a PR to the docs yet...

[kam-st]

Would, happily do so. Where would you like it referenced in documentation.

[TkDodo]

Somewhere in the advanced server rendering guide

[adriangalilea]

I've run into issue with server actions in:

    "react": "rc",
    "react-dom": "rc",
    "next": "canary",

None of the solutions provided worked for me, just putting it out there, will update if I have more info.

[zain-bin-ramzan]

I was getting the same error, and I solved it by using two wrapper functions: one named handleAsyncAction and the other handleClientAction. This approach serves two purposes for me. First, I don't want to pass inline functions to the query function. Second, I want the exact same error in my client-side component to be thrown in the server action because I am using React Query for client-side data fetching (and the error thrown in the server/action is not propagated to the client-side component in production). At the same time, I don’t want to change my main logic for data fetching. For the places where I need the data on the initial page load, I am relying on Next.js only.

useGetCards.ts

import { useQuery, UseQueryOptions } from '@tanstack/react-query';

import paymentService from '@/services/payment.service';
import { AddedCardType } from '@/types';

import { GET_CARDS_KEY } from './constants';

type Options = Omit<UseQueryOptions<AddedCardType[], Error>, 'queryKey'>;
export function useGetCards(options: Options = {}) {
  const { retry = false, retryOnMount = true, refetchOnMount = true } = options;

  const {
    isLoading,
    data: cards,
    error,
  } = useQuery({
    queryKey: [GET_CARDS_KEY],
    queryFn: paymentService().getCards,
    retry,
    retryOnMount,
    refetchOnMount,
  });

  return { isLoading, error, cards };
}

payment.service.ts

'use client';
import {
  getCardsAction,
} from '@/server/actions';
const getBanks = handleClientAction(getBanksAction);
export default () => ({
  getCards,
});

payment.actions.ts

export const getCardsAction = handleAsyncAction(async () => {
  const res: Response = await fetch(
    `${process.env.BACKEND_BASE}/payments/authorization`,
    {
      method: REQUEST_METHODS.GET,
      headers: {
        ...getAuthorizationHeader(),
      },
    }
  );

  if (!res.ok) {
    const errorResponse = await getApiError(res);
    throw new Error(errorResponse.error);
  }

  const { authorizations: cards }: { authorizations: AddedCardType[] } =
    await res.json();

  return cards;
});

src/server/helper.ts

export const handleAsyncAction = <Args extends any[], Result>(
  asyncFn: (...args: Args) => Promise<Result>
) => {
  return async (
    ...args: Args
  ): Promise<{ error?: string; success?: Result }> => {
    try {
      const success = await asyncFn(...args);
      return { success };
    } catch (error: any) {
      return { error: error.message || 'An unknown error occurred' };
    }
  };
};

services/helper.ts

'use client';
export const handleClientAction = <Args extends any[], Success>(
  // eslint-disable-next-line no-unused-vars
  asyncFn: (...args: Args) => Promise<{ success?: Success; error?: string }>
) => {
  return async (...args: Args): Promise<Success> => {
    const filteredArguments = args.filter((item) => {
      const isObj = item instanceof Object;
      if (isObj && 'queryKey' in item) {
        return false;
      }
      if (isObj && 'meta' in item) return false;
      return true;
    }) as Args;
    const { success, error } = await asyncFn(...filteredArguments);
    if (success !== undefined) return success;
    throw new Error(error || 'An unknown error occurred');
  };
};