I'm a bit late here, but I want to share how I "solved" this in my Next JS app, so hopefully someone else does not have to spend as long time as I did.

What I tried:

• Replacing the server action with an api instead and use fetch.
• All kinds of different params.

What I noticed was that refeshing the same page worked fine in the production build. So I tried adding a delay before the server action is executed in the query, and that seems to have worked for developer mode.

const useMyQuery = () => {
  const {
    data,
    isLoading
  } = useQuery({
    queryKey: ['my-query'],
    queryFn: async () => {
      await new Promise((resolve) => setTimeout(resolve, 1));
      // HACK: this somehow fixes the issue where the query doesn't complete
      return await theServerAction();
    }
  });

  return {
    data,
    isLoading
  };
}