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

20 messages · Page 1 of 1 (latest)

night pasture
#

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:
```ts
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>
     );
}```
Stack Overflow
Supabase and NextJS Route API Handling Error: Only plain objects, a...

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

undone coralBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

hushed fog
# 
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

night pasture
#

I tried this and I am still having the same error: ```ts

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 ```ts
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)
    }```
hushed fog
#

what error

hushed fog
#

it should return data insteand of Response.json({ data })

night pasture
#

I am trying to display the fetched data from route.ts to my component

hushed fog
#

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

night pasture
#

So it is just alright not to create an API Route Handler?

hushed fog
#

no need

# 
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>
  );
}
#

just this code is needed

night pasture
hushed fog
#

does it work for you

night pasture