supabase in Next JS returning an empty array when data is in relevant tables

Question

It seems I am always returning an empty array when trying to pull data from my tables. This is how I am doing it, after following the docs and several tutorials.

const [tableData, setTableData] = useState([]);

  async function getTableData() {
    let { data, error } = await supabase
      .from('SignalJourneyAudienceConstraints')
      .select('*');

    setTableData(data);
    console.log(tableData);
  }

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

I have data in the table as so.

The only thing I can think of is the naming of the table??

I have also tried the following

let { data: SignalJourneyAudienceConstraints, error } = await supabase
  .from('SignalJourneyAudienceConstraints')
  .select('*')

But getting an error ReferenceError: data is not defined and in VSC I'm getting All destructured elements are unused.ts(6198) with the above.

I have always seen tutorials just use data though.

don't destructure the response, store it in variable and console log it and see the params. — himeshp, Feb 28 '22 at 13:27
if you read the supabase docs this is how they do it. They destructure all their calls — mrpbennett, Jun 28 '23 at 18:56

score 17 · Accepted Answer · answered Feb 28 '22 at 14:03

17

I had to turn off RLS on my tables.

answered Feb 28 '22 at 14:03

mrpbennett

1,527
15
40

score 2 · Answer 2 · answered May 31 '22 at 06:58

2

you should disable RLS (not secure) or define policy for your table . (every table in your project has its own policies and should create ruls seprately)

answered May 31 '22 at 06:58

Mojito

51
3

score 2 · Answer 3 · answered Jun 08 '23 at 06:06

2

I was getting back no records even with RLS turned off. Turns out NextJS was caching the response.

Hard-refreshing (using cmd-shift-r or holding down the refresh button in Chrome) worked for me.

answered Jun 08 '23 at 06:06

Kaiden

188
3
8

score 1 · Answer 4 · answered Jul 23 '23 at 02:59

Open your supabase project dashboard. Then go to the "Authentication" menu on the side left. Then open "Configuration" -> "Policies".

Then create "New Policy" for your table.

And put true inside the "USING expression" column.

Please see my screenshot below;

It will give you an authorization to access the Public table that using RLS. RLS is important to used, because on production it make your table cannot edit by anyone. And you can set the "Allowed Operation" (see the second screenshot) only for SELECT.

So, It doesn't matter if the anon key is scattered. That was only can see the content but cannot change it up.

supabase in Next JS returning an empty array when data is in relevant tables

4 Answers4