I'm currently developing a to-do list application using Supabase and NextJS-13. However, when I tried fetching the lists from Supabase, the server returned an error.
The List table on Supabase consists of three columns:
id
created_at
list_name
Supabase automatically generates values for the id and created_at fields, so I only provide the list name field from the client side.
This is my Database.ts file
import { createClient } from "@supabase/supabase-js";
const supabase_url = process.env.NEXT_PUBLIC_SUPABASE_URL!;
const supabase_api_key = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!;
const options = {
auth: {
persistSession: true,
storageKey: "supabase",
},
};
const supabase = createClient(supabase_url, supabase_api_key, options);
export default supabase;
export async function getLists() {
let { data: lists, error } = await supabase.from("Lists").select("*");
if (error) {
console.log(error);
return [];
}
return lists;
}
export async function addList({ list_name }: { list_name: string }) {
const { data, error } = await supabase
.from("Lists")
.insert([{ list_name: list_name }])
.select();
if (error) {
console.log(error);
return;
}
return data;
}
export async function deleteList(list_id: number) {
const { error } = await supabase.from("Lists").delete().eq("id", list_id);
if (error) {
console.log(error);
} else {
console.log("Deleted", list_id);
}
}
And here's route.ts for /api/lists route
import { getLists } from "@/app/utils/Database";
import { NextResponse } from "next/server";
export async function GET() {
let lists = await getLists();
if (!lists) {
lists = [];
}
return NextResponse.json(lists);
}
I attempted changing
persistSession=falsein my createClient options but it still resulted in another fetch error.I also tried setting the
storageKeyparameter for local storage, yet it was unsuccessful.Based on this StackOverflow thread, I changed localhost to 127.0.0.1
Furthermore, I downgraded my nodejs version from 20.2 to 18.15
I removed node_modules and reinstalled the dependencies as well
My expectation was to simply fetch the list names from the database and display them on the webpage.
If you require any additional information, feel free to ask, and I'll gladly provide it.
Thank you