Supabase "TypeError: fetch failed"

Question

I am making a to-do list application with Supabase and NextJS-13 and while fetching the lists from Supabase, the server gave me this error

Error Image

My List table on Supabase has three columns:

• id

• created_at

• list_name

Supabase generates the id and createdat fields values so I only pass list name field from the client

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 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 tried setting persistSession=false in my createClient options but it still gave the other fetch error.

• I also tried setting storageKey parameters for local storage, but it also failed.

• Changed localhost to 127.0.0.1 based on this a StackOverflow thread

• Downgraded nodejs version from 20.2 to 18.15

• removed node_modules and reinstalled the dependencies

I expected it to just fetch the list names from the database and show them on the webpage.

If you need any other information, just ask and I will provide.
Thank you

Answer 1

I have solved this problem for myself:

The problem happens, when I send File to Supabase Storage.

To solve the problem, I send Array Buffer:

let array_buffer = await image.arrayBuffer();

Answer 2

I had the same issue and turns out my supabase project was paused due to inactivity, once reactivated it worked perfectly.