Query Supabase Data with Remix Loaders

The supabase-js package allows us to connect to our Supabase project, and easily query and mutate data. In this lesson, we install supabase-js, set up environment variables for SUPABASE_URL and SUPABASE_ANON_KEY, and create a Supabase client to use across our application.

Additionally, we look at writing an RLS policy to enable read access to our messages table, use our Supabase client to select all messages, and display them in our Remix app on load.

Code Snippets

Install supabase-js

npm i @supabase/supabase-js

Use a Loader function to fetch data

export const loader = async () => {
  return null;
};

Fetch data with Supabase Client

const { data } = await supabase.from("messages").select();

Full component

import { useLoaderData } from "@remix-run/react";
import supabase from "utils/supabase";

export const loader = async ({}) => {
  const { data } = await supabase.from("messages").select();
  return { data };
};

export default function Index() {
  const { data } = useLoaderData();
  return <pre>{JSON.stringify(data, null, 2)}</pre>;
}

Enable read access with RLS policy

create policy "users can read messages" ON "public"."messages"
as permissive for select
to public
using (true);

SQL code snippets can be run against your Supabase database by heading over to your project's SQL Editor, pasting them into a new query, and clicking RUN.

Resources

• Supabase-js docs
• Implement Row Level Security in Supabase (video)
• Auto-generated project docs