T
TanStack•2w ago
harsh-harlequin

Next.js (16.0.3) | useMutation | An unexpected response was received from the server.

Hey guys, I am trying to move from next 15.3.4 -> 16.0.3 and react 19 -> 19.2 and I have been experiencing some errors that I can't figure out how to solve. What was working before the version bump, now throws the error you can see commented out and skips the onSuccess. The only way I have managed to bypass the problem is to switch to onSettled but that doesn't feel like the right solution...
  // use-device-list.ts
  const create = useMutation({
    mutationFn: async (device: Device) => {
      if (!data) return;
      await createDeviceAction(device, data.user.id);
    },
    onError: (error) => {
      console.log(error);
      // Error: An unexpected response was received from the server.
      //   at fetchServerAction (server-action-reducer.ts:196:11)
    },
  //onSettled: () => works
    onSuccess: () => {
      return queryClient.invalidateQueries({ queryKey: ['devices'] });
    },
  });
  // use-device-list.ts
  const create = useMutation({
    mutationFn: async (device: Device) => {
      if (!data) return;
      await createDeviceAction(device, data.user.id);
    },
    onError: (error) => {
      console.log(error);
      // Error: An unexpected response was received from the server.
      //   at fetchServerAction (server-action-reducer.ts:196:11)
    },
  //onSettled: () => works
    onSuccess: () => {
      return queryClient.invalidateQueries({ queryKey: ['devices'] });
    },
  });
  // data/server/device.ts
  'use server'

  export const createDeviceAction = async (data: Device, userId: User['id']) => {
    if (!userId || !data) return;

    try {
      const device = await prisma.device.create({ data });
      return device;
    } catch (error) {
      if (error instanceof PrismaClientKnownRequestError)
        throw Error(error.message);
    }
  };
  // data/server/device.ts
  'use server'

  export const createDeviceAction = async (data: Device, userId: User['id']) => {
    if (!userId || !data) return;

    try {
      const device = await prisma.device.create({ data });
      return device;
    } catch (error) {
      if (error instanceof PrismaClientKnownRequestError)
        throw Error(error.message);
    }
  };
Thank you if you got the time to read this and please let me know if I should provide more details.
1 Reply
harsh-harlequin
harsh-harlequinOP•2w ago
Hello again! I managed to solve it by founding this github thread: https://github.com/vercel/next.js/issues/50659#issuecomment-1846046743 Apparently my middleware was overwriting the request headers. Hope its useful to others as well.
GitHub
vercel/next.js
The React Framework. Contribute to vercel/next.js development by creating an account on GitHub.

Did you find this page helpful?