CODEWITHSUNDEEP
javascriptnext.jssupabasesupabase-databasesupabase-js
Vaibhav Jain
Vaibhav Jain

Reputation: 81

Supabase "TypeError: fetch failed"

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:

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 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

Upvotes: 7

Views: 6245

Answers (5)

Mick
Mick

Reputation: 7

In my case, this was caused by my forgetting to call preventDefault on form submission.

I haven't dug into to understand exactly why this manifested as an AuthRetryableFetchError, but leaving this here in case it can save someone else some time diagnosing.

Upvotes: -2

Dirk Nietfeld
Dirk Nietfeld

Reputation: 1

Turns out I used the wrong port within my nextjs-project. I tried port 8443 but nextjs was unable to communicate over https locally.

To solve the problem use a connection string with port 8000

const supabase = createClient("http://localhost:8000", "eyJhbG...");
const { data } = await supabase.from('users').select();

Another option is to run the local nextjs project with parameter

next dev --experimental-https

See https://github.com/vercel/next.js/discussions/10935#discussioncomment-7859142

Upvotes: 0

Matt
Matt

Reputation: 35271

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

Upvotes: 0

Blu
Blu

Reputation: 21

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

Upvotes: 2

user8046323
user8046323

Reputation: 51

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

Upvotes: 0

Related Questions