Supabase Fetch Error
Answered
Common paper wasp posted this in #help-forum
Common paper waspOP
Been trying to add Supabase to my project for the last hour or so following their docs and cannot get a read on my table.
I have the database created, a table added, added a dummy row and just want to retrieve it but it's failing with a TypeError fetch failed. Does anyone know why?
I created all the files the NextJS connection guide says when you click Connect on your dashboard and I just get "null" for data.
I have the database created, a table added, added a dummy row and just want to retrieve it but it's failing with a TypeError fetch failed. Does anyone know why?
import { createClient } from "@/lib/supabase/server";
import { cookies } from "next/headers";
export default async function Guestbook() {
const cookieStore = cookies();
const supabase = createClient(cookieStore);
const { data: guestbook, error } = await supabase
.from("guestbook")
.select("*");
console.log(guestbook);
console.log(error);
return (
<form method="POST" className="mt-8 relative max-w-[500px] gap-2">
<span className="sr-only"> Comment </span>
<div className="flex space-x-4">
<input
type="text"
name="comment"
placeholder="Say something!"
aria-label="your comment"
id="comment"
required
aria-required="true"
className="bg-neutral-800 p-2 focus:ring-1 focus:outline-none focus:ring-lime-400 focus-visible:ring-lime-400 ring-1 ring-zinc-700 rounded-sm w-full"
/>
<button
type="submit"
className="bg-neutral-800 rounded-sm px-4 py-2 hover:bg-accent-primary hover:text-neutral-900 transition-colors duration-200"
>
Send
</button>
</div>
</form>
);
}I created all the files the NextJS connection guide says when you click Connect on your dashboard and I just get "null" for data.
84 Replies
Pygmy Nuthatch
could be rls
Madeiran sardinella
Hi, whats the error?
@Pygmy Nuthatch could be rls
Common paper waspOP
I have it enabled and disabled. Never worked with RLS before though so I'm blind. I read their docs about it and set a simple read all policy
@Madeiran sardinella Hi, whats the error?
Common paper waspOP
TypeError: fetch failed
That's it lol
Pygmy Nuthatch
so no error is logged in the vs code console not the client one
Common paper waspOP
No that's what's logged in the vs code console
No error client side
Pygmy Nuthatch
i see maybe
show the lib /supabase
Common paper waspOP
Sure
import { createServerClient, type CookieOptions } from "@supabase/ssr";
import { cookies } from "next/headers";
export const createClient = (cookieStore: ReturnType<typeof cookies>) => {
return createServerClient(
process.env.NEXT_PUBLIC_SUPABASE_URL!,
process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
{
cookies: {
get(name: string) {
return cookieStore.get(name)?.value;
},
set(name: string, value: string, options: CookieOptions) {
try {
cookieStore.set({ name, value, ...options });
} catch (error) {
// The `set` method was called from a Server Component.
// This can be ignored if you have middleware refreshing
// user sessions.
}
},
remove(name: string, options: CookieOptions) {
try {
cookieStore.set({ name, value: "", ...options });
} catch (error) {
// The `delete` method was called from a Server Component.
// This can be ignored if you have middleware refreshing
// user sessions.
}
},
},
}
);
};server.ts
import { createBrowserClient } from "@supabase/ssr";
export const createClient = () =>
createBrowserClient(
process.env.NEXT_PUBLIC_SUPABASE_URL!,
process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
); client.tsPygmy Nuthatch
see it allready has the cookie stor so dont pass it
const supabase = createClient(cookieStore);
to
const supabase = createClient();
Common paper waspOP
It says it expected 1 argument, if I delete it
Pygmy Nuthatch
import { createServerClient } from '@supabase/ssr'
import { cookies } from 'next/headers'
export function createClient() {
const cookieStore = cookies()
// Create a server's supabase client with newly configured cookie,
// which could be used to maintain user's session
return createServerClient(
process.env.NEXT_PUBLIC_SUPABASE_URL!,
process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
{
cookies: {
get(name: string) {
return cookieStore.get(name)?.value
},
set(name, value, options) {
try {
cookieStore.set({ name, value, ...options })
} catch (error) {
// The
// This can be ignored if you have middleware refreshing
// user sessions.
}
},
remove(name, options) {
try {
cookieStore.set({ name, value: '', ...options })
} catch (error) {
// The
// This can be ignored if you have middleware refreshing
// user sessions.
}
},
},
}
)
}
import { cookies } from 'next/headers'
export function createClient() {
const cookieStore = cookies()
// Create a server's supabase client with newly configured cookie,
// which could be used to maintain user's session
return createServerClient(
process.env.NEXT_PUBLIC_SUPABASE_URL!,
process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
{
cookies: {
get(name: string) {
return cookieStore.get(name)?.value
},
set(name, value, options) {
try {
cookieStore.set({ name, value, ...options })
} catch (error) {
// The
set method was called from a Server Component.// This can be ignored if you have middleware refreshing
// user sessions.
}
},
remove(name, options) {
try {
cookieStore.set({ name, value: '', ...options })
} catch (error) {
// The
delete method was called from a Server Component.// This can be ignored if you have middleware refreshing
// user sessions.
}
},
},
}
)
}
Common paper waspOP
Still erroring xD
Pygmy Nuthatch
works on my prjct with supabase
Common paper waspOP
Hmmmm
Pygmy Nuthatch
check the env
but it wuould tell you if it was incorrect
Common paper waspOP
Yeah I got a .env.local
Pygmy Nuthatch
try to see if there is a typo or somethyng
in the url or anon
Common paper waspOP
Nope no typos
Pygmy Nuthatch
show the fetch error
from the console
Common paper waspOP
My middleware maybe?
Pygmy Nuthatch
id be very surprized that should only affect auth
Common paper waspOP
True
Sure fetch error from console one eec
Sec
Uh. There isn't one?
Pygmy Nuthatch
wdym
Common paper waspOP
No error
Just the one in vs code
Pygmy Nuthatch
ya that one
show pls
the vs one
Common paper waspOP
Discord is blocked at work lol
Pygmy Nuthatch
is it on local host
Common paper waspOP
Ye
Pygmy Nuthatch
maybe the authorized domains
Common paper waspOP
I don't remember changing that?
Pygmy Nuthatch
this is a error from next js not the supabase
try reinstalling it with npm
maybe a deprecated dep
as i said it works with me so the setup is correct
Common paper waspOP
So just delete node modules?
Pygmy Nuthatch
you can try @supabase/ssr@latest
then delete
and the package lock
not the package!!!
.json
Common paper waspOP
Alright let's see now
Pygmy Nuthatch
This is next 14 right?
Common paper waspOP
Yes
Pygmy Nuthatch
Try to run it on vercel
Answer
Pygmy Nuthatch
Not local host
Common paper waspOP
Deploy to Vercel?
Pygmy Nuthatch
Yes
Common paper waspOP
Sure it isn't finished but let me try haha
Pygmy Nuthatch
Its a question of it fetching the supabase from a vercel server ond not ur computer
Just a location thing
Common paper waspOP
Deploying now
Pygmy Nuthatch
Oh yeah and try to put the error in a p tag so you can see it once it render
Use json.stringify
As a object is not a valid child
Common paper waspOP
Deployment failed. Sigh
Pygmy Nuthatch
You have to set the env
Variables
In the project
Common paper waspOP
Okay finally. No I had some linter errors lol
I can see it logging my row from Supabase in the Vercel logs now
But I also now have a new issue lmao
Pygmy Nuthatch
What
Common paper waspOP
My blog posts aren't being generated lol
And I'm having a bunch of issues with Clerk. Something about CORS I think
Common paper waspOP
I gave up. I just blew up the guestbook page that was using Clerk and Supabase. I had literally been fighting with it for hours
Not worth it