javascript - Supabase "TypeError: fetch failed" - Stack Overflow

admin管理员组

文章数量:1315226

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

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

• javascript
• next.js
• supabase
• supabase-database
• supabase-js

Share Improve this question Follow asked Jun 7, 2023 at 15:30 Vaibhav JainVaibhav Jain 8111 silver badge55 bronze badges 1

• 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. – Rakozay Commented Jun 8, 2023 at 21:28

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 2

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

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

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

Turns out I used the wrong port within my nextjs-project. I tried port 8443 but nextjs was unable to municate 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./vercel/next.js/discussions/10935#discussionment-7859142

In my case, this issue was caused by using . instead of .co in the URL of the Supabase endpoint.

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.

本文标签： javascriptSupabase quotTypeError fetch failedquotStack Overflow