Course lesson
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 SUPABASEURL and SUPABASEANONKEY, and create a Supabase client to use across our...
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.
Install supabase-js
npm i @supabase/supabase-jsUse 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.
Course lesson
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 SUPABASEURL and SUPABASEANONKEY, and create a Supabase client to use across our...