13th Dec, 2023

Create and retrieve a record with supabase.js

Creating a new record in supabase is pretty straight forward:

const { error } = await supabase.from('results').insert({
  wpm: results.wpm,
  errorRate: results.errorRate,
  quote_id: results.quoteId,
})

When creating a single resource, I often times want to use it right away. However, supabase's insert() only will only tell you if inserting was successful or not.
In the documentation you can toggle a (not very obvious) tab that will show you what to do if you want to use the created record right away:

const { data: result, error } = await supabase
  .from('results')
  .insert({
    wpm: results.wpm,
    errorRate: results.errorRate,
    quote_id: results.quoteId,
  })
  .select()

This will return an array (with only one entry in this case) though.

return result
// ^
// const result: {
//   created_at: string;
//   errorRate: number | null;
//   id: number;
//   quote_id: number | null;
//   wpm: number;
// }[]

So we use single() to tell supbase that we're only expecting one row. Full call looks like this:

const { data: result, error } = await supabase
  .from('results')
  .insert({
    wpm: results.wpm,
    errorRate: results.errorRate,
    quote_id: results.quoteId,
  })
  .select()
  .single()

if (error) {
  // error handling
}

return result.id

Since I keep forgetting this, hopefully this will help me remember.

© 2024 Chris Jarling