Upgrading to Next 14 broke returning data through server actions?

Answered

Silky ant posted this in #help-forum

Silky antOP

2023-11-11T15:44:13.000Z

// actions.ts
"use server";

export async function getExercises() {
  const { userId } = auth();
  if (!userId) return [];

  const data = await db
    .select()
    .from(exercise)
    .where(eq(exercise.userId, userId))
    .orderBy(desc(exercise.id))
    .all();

  return data;
}

// inside client component
  const { data } = useQuery({
    queryKey: ["exercises"],
    queryFn: getExercises,
    initialData: exercises,
  });

// inside server component
  const exercises = await getExercises();

this used to work just fine in next 13, now i get errors everywhere

am I supposed to go back to api routes again? what's the best practice with them? any way to not write duplicated code?

Answered by Ray

if it works, try changing the queryFn to

async () => {
  return getExercises()
}

View full answer

121 Replies

@Silky ant ts // actions.ts "use server"; export async function getExercises() { const { userId } = auth(); if (!userId) return []; const data = await db .select() .from(exercise) .where(eq(exercise.userId, userId)) .orderBy(desc(exercise.id)) .all(); return data; } // inside client component const { data } = useQuery({ queryKey: ["exercises"], queryFn: getExercises, initialData: exercises, }); // inside server component const exercises = await getExercises(); this used to work just fine in next 13, now i get errors everywhere am I supposed to go back to api routes again? what's the best practice with them? any way to not write duplicated code?

aardani

2023-11-11T15:45:29.000Z

need more information. whats the browser console do

you shouldnt need to go back to api route since server action is stable

lets see what the error says

Silky antOP

2023-11-11T15:46:03.000Z

aardani

2023-11-11T15:47:05.000Z

is that the first error?

Silky antOP

2023-11-11T15:47:25.000Z

thats the whole console

aardani

2023-11-11T15:48:28.000Z

what if you comment

  const { userId } = auth();
  if (!userId) return [];

cant seem to see where the problem is. maybe identify which line causes the error?

Silky antOP

2023-11-11T15:50:18.000Z

i have tried that, didn't work

the function doenst erorr and data is correct

aardani

2023-11-11T15:52:26.000Z

try gettint the error from useQuery then

Silky antOP

2023-11-11T15:53:20.000Z

this also returns the correct data

aardani

2023-11-11T15:54:19.000Z

so is it really server action's fault?

seems like its something else

Silky antOP

2023-11-11T15:57:35.000Z

i think so
Uncaught (in promise) Error: Only plain objects, and a few built-ins, can be passed to Server Actions. Classes or null prototypes are not supported.

aardani

2023-11-11T15:57:49.000Z

what did you pass to server actions?

which server action is that?

Silky antOP

2023-11-11T15:58:10.000Z

the getExercises() function

shown above

aardani

2023-11-11T15:59:13.000Z

what is userId

no wait

what is exercise. where does it come from

Silky antOP

2023-11-11T16:01:17.000Z

i tried api route on client and copy pasting the function body in the server component and it seemed to work, it worked, page wasnt getting blocked but loading seemed to take very long compared to server action in 13

@aardani what is `userId`

Silky antOP

2023-11-11T16:01:21.000Z

a string

@aardani what is `exercise`. where does it come from

Silky antOP

2023-11-11T16:01:35.000Z

comes from drizzle, its a table

aardani

2023-11-11T16:02:03.000Z

comment out this part

Silky antOP

2023-11-11T16:02:40.000Z

i cant return data then

ok ive done this and it still errors

export async function getExercises() {
  const { userId } = auth();
  if (!userId) return [];

  // const data = await db
  //   .select()
  //   .from(exercise)
  //   .where(eq(exercise.userId, userId))
  //   .orderBy(desc(exercise.id))
  //   .all();

  // console.log(data);
  // console.log(userId);
  // console.log(exercise);

  // return data;
  return [];
}

aardani

2023-11-11T16:03:32.000Z

comment out auth()?

Silky antOP

2023-11-11T16:03:52.000Z

still errors even if all it does is return [

]

aardani

2023-11-11T16:05:01.000Z

what if you dont use getExercises()?

will the error persists?

Silky antOP

2023-11-11T16:05:56.000Z

nope

aardani

2023-11-11T16:06:38.000Z

try moving getExercises() into a new "use server" file

Silky antOP

2023-11-11T16:08:46.000Z

still doesnt work

changed to alias import, changed file location, no succes still

aardani

2023-11-11T16:11:59.000Z

try reproducing it in minimal reproduction repository if you need to

Silky antOP

2023-11-11T16:21:26.000Z

yeah its def an internal issue

with server actions on client

not sure if its intentional of them

brand new project

// page.tsx
"use client";

import { getExercises } from "./actions";
import { useQuery } from "@tanstack/react-query";

export default function Home() {
  const { data } = useQuery({
    queryKey: ["exercises"],
    queryFn: getExercises,
    initialData: [],
  });

  return <div>test</div>;
}

// layout.tsx
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import { Providers } from "./providers";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}

// providers.tsx
"use client";

import { useState } from "react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

export function Providers({ children }: { children: React.ReactNode }) {
  const [queryClient] = useState(() => new QueryClient());

  return (
    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
  );
}

// actions.ts
"use server";

export async function getExercises() {
  return [];
}

Miniature Bull Terrier

2023-11-11T16:25:43.000Z

https://github.com/vercel/next.js/issues/57622

You can't directly import server actions in 14 (bug or by design?)

You should make your page.tsx SSR (remove 'use client'), then create a sibling component that's use client

import your server actions in your page.tsx and pass it as a prop to the child client component

Silky antOP

2023-11-11T16:36:01.000Z

the page.tsx is actually server side on my actual app, but thank you I'll try passing it down as props