I’m using Supabase for the 1st time. Looking to replace a CRM that I pay $20 a month for so wanted to create my own invoice tracker. Partly to save money but also for a bit of fun.

I’ve written some code that seems to be clean. There are no errors in the console and I get a 200 when hitting my supabase URL.

The problem is that it returns nothing even though there are 2 entries in the table. Running a select * from invoices in Supabase returns the 2 entries I’d expect.

Can anyone point me in the right direction as to why my returned arrays are empty please?

import { useEffect, useState } from "react";
import { supabase } from "./client";

function App() {
  const [invoices, setInvoices] = useState([]);

  useEffect(() => {
    getInvoices();
  }, []);

  async function getInvoices() {
    const { data } = await supabase.from("invoices").select("*");
    setInvoices(data);
    console.log("Fetched invoices:", data);
  }

  return (
    <div>
      <h1>Hello World</h1>
      <ul>
        {invoices.map((invoice) => (
          <li key={invoice.id}>{invoice.family}</li>
        ))}
      </ul>
    </div>
  );
}