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.