To mutate data in Remix, we use an Action function. In this lesson, we look at creating a Remix <Form /> to submit the content of a message as a post request to our Action function.

Additionally, we use the server-side Supabase client from the Remix Auth Helpers package to make an authenticated request to Supabase, writing the new message to the messages table.

Futhermore, we run into an issue with RLS as we have not yet written a policy for the insert action. By setting this to the authenticated role and ensuring that the user_id column is equal to the value returned by the auth.uid() function - a function we get from Supabase to retrieve the ID for the user attempting to insert a new row - we ensure that users can not write a message on someone else's behalf.

Lastly, we use the auth.uid() function to set the default value of the user_id column to the ID of the user attempting to insert the new row in the messages table.

Code Snippets

Write data to Supabase

export const action = async ({ request }: ActionArgs) => {
  const response = new Response();
  const supabase = createServerSupabase({ request, response });

  const { message } = Object.fromEntries(await request.formData());

  await supabase.from("messages").insert({ content: String(message) });

  return json(null, { headers: response.headers });
};