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

Colophony

I'm not sure but here is what I think without knowing too much; if you don't have a session and call this endpoint from the client then the fetching from the Lists table fails since the client expects a session to be there in order to fetch the other case is that you do have a session but you don't send the necessary auth token to the endpoint so it can't validate it. It might be an idea to check whether 1) Whether the request sent includes the auth token 2) Whether the supabase client (createClient) consumes the auth token automatically and validates it. – Cranium

Answer 1

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

Suki

This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review – Dealing

Answer 2

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();

Monomorphic

Answer 3

If you are using Supabase locally, make sure it is running.

npx supabase status

If it is not running go ahead and start it.

npx supabase start

Resiniferous