Next.js Discord

Discord Forum

Supabase and NextJS Route API Handling Error: Only plain objects, and a few built-ins, can be passed

Answered
Jenn posted this in #help-forum
Open in Discord
JennOP
I am using NextJS and Supabase and this is the error that it shows:
⨯ Error: Only plain objects, and a few built-ins, can be passed to Client Components from Server Components. Classes or null prototypes are not supported. at stringify () digest: "1376061893"

Also in: https://stackoverflow.com/questions/77589133/supabase-and-nextjs-route-api-handling-error-only-plain-objects-and-a-few-buil

app/api/Orders/route.ts:
  import { createServerComponentClient } from "@supabase/auth-helpers-nextjs";
    import { NextApiRequest, NextApiResponse } from "next";
    import { cookies } from "next/headers";
    import { NextResponse } from "next/server";
    
    export async function GET (request: NextApiRequest) {
      const cookieStore = cookies()
      const supabase : any = createServerComponentClient({ cookies: () => cookieStore })
      const {data: {session }} = await supabase.auth.getSession();  
    
      const {data, error } = await supabase
      .from('orders')
      .select()
      .eq('id', session?.user.id)
    
    
       if (error == null) {
            return NextResponse.json({ data });
        }
        return NextResponse.json({ error: error.message });
    
    }

Calling it here: components/Orders/ViewOrders.tsx:
import OrderList from "./OrderList";

export default async function ViewOrdersByWaterStation({}) {
 

        try{
          const response = await fetch(`http://localhost:3000/api/Orders`,{
            method: 'GET',
            headers: {
              'Content-Type': 'application/json',
            },
          })

          const data = await response.json()
      
          return Response.json({ data })

        }catch(err){
          console.log(err)
        }
    return ( 
        <div>
         <OrderList orders={orders} />
        </div>
     );
}
Answered by Ray
import OrderList from "./OrderList";

export default async function ViewOrdersByWaterStation({}) {
  const cookieStore = cookies();
  const supabase: any = createServerComponentClient({
    cookies: () => cookieStore,
  });
  const {
    data: { session },
  } = await supabase.auth.getSession();

  const { data, error } = await supabase
    .from("orders")
    .select()
    .eq("id", session?.user.id);

  return (
    <div>
      <OrderList orders={data} />
    </div>
  );
}
View full answer

18 Replies

Ray
import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs'
import { NextResponse } from 'next/server'
import { cookies } from 'next/headers'

import type { Database } from '@/lib/database.types'

export async function POST(request: Request) {
  const { title } = await request.json()
  const cookieStore = cookies()
  const supabase = createRouteHandlerClient<Database>({ cookies: () => cookieStore })
  const { data } = await supabase.from('todos').insert({ title }).select()
  return NextResponse.json(data)
}
you should use createRouteHandlerClient instead of createServerComponentClient in route handler
JennOP
I tried this and I am still having the same error: 
export async function GET (request: Request) {
  const requestUrl = new URL(request.url)
  const cookieStore = cookies()
  const supabase = createRouteHandlerClient({ cookies: () => cookieStore })
  const {data: {session }} = await supabase.auth.getSession();

  const {data, error } = await supabase
  .from('orders')
  .select(
    `
      order_id,
      created_at,
      customers(firstName, lastName, address),
      order_items(
        quantity,

        water_type(name)
      )
    `
  )
  .eq('water_station_user_id', session?.user.id)


  return NextResponse.json(data)

}
And then 
    try{
          const response = await fetch(`http://localhost:3000/api/Orders`,{
            method: 'GET',
            headers: {
              'Content-Type': 'application/json',
            },
          })

          const data = await response.json()
      
          return Response.json({ data })

        }catch(err){
          console.log(err)
        }
Ray
what error
it should return data insteand of Response.json({ data })
JennOP
I am trying to display the fetched data from route.ts to my component
Ray
does the route handler for the page only?
import { cookies } from 'next/headers'
import { createServerComponentClient } from '@supabase/auth-helpers-nextjs'

import type { Database } from '@/lib/database.types'

export default async function ServerComponent() {
  const cookieStore = cookies()
  const supabase = createServerComponentClient<Database>({ cookies: () => cookieStore })
  const { data } = await supabase.from('todos').select()
  return <pre>{JSON.stringify(data, null, 2)}</pre>
}


you can just fetch the data from supabase in the page component directly
JennOP
So it is just alright not to create an API Route Handler?
Ray
no need
Ray
import OrderList from "./OrderList";

export default async function ViewOrdersByWaterStation({}) {
  const cookieStore = cookies();
  const supabase: any = createServerComponentClient({
    cookies: () => cookieStore,
  });
  const {
    data: { session },
  } = await supabase.auth.getSession();

  const { data, error } = await supabase
    .from("orders")
    .select()
    .eq("id", session?.user.id);

  return (
    <div>
      <OrderList orders={data} />
    </div>
  );
}
Answer
Ray
just this code is needed
Ray
does it work for you
@Ray does it work for you
JennOP
yes, it does work this way