7

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

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

6 Answers 6

3

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

Sign up to request clarification or add additional context in comments.

1 Comment

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
0

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

Comments

0

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

Comments

0

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

Comments

0

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

Comments

-2

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.

3 Comments

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.
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
I don't currently have time to provide a better answer, sorry, as I would need to potentially spend many hours to get a better understanding of what's happening under the covers, and I don't have the luxury of that time at the moment. What I can say is that if my "non answer", as you called it, was here when I was trying to fix the problem, it would have saved me many hours, so, as a community service, I decided to post what I had discovered, as is.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.