JavaScript: Fetch data

• By default, Supabase projects will return a maximum of 1,000 rows. This setting can be changed in Project API Settings. It's recommended that you keep it low to limit the payload size of accidental or malicious requests. You can use range() queries to paginate through your data.
• select() can be combined with Modifiers
• select() can be combined with Filters
• If using the Supabase hosted platform apikey is technically a reserved keyword, since the API gateway will pluck it out for authentication. It should be avoided as a column name.

Examples

Getting your data

const \{ data, error \} = await supabase
  .from('cities')
  .select()

Selecting specific columns

const \{ data, error \} = await supabase
  .from('cities')
  .select('name')

Query foreign tables

const \{ data, error \} = await supabase
  .from('countries')
  .select(`
    name,
    cities (
      name
    )
  `)

Query the same foreign table multiple times

const \{ data, error \} = await supabase
  .from('products')
  .select(`
    id,
    supplier:supplier_id ( name ),
    purchaser:purchaser_id ( name )
  `)

Filtering with inner joins

const \{ data, error \} = await supabase
  .from('messages')
  .select('*, users!inner(*)')
  .eq('users.username', 'Jane')

Querying with count option

const \{ data, error, count \} = await supabase
  .from('cities')
  .select('name', \{ count: 'exact' \}) // if you don't want to return any rows, you can use \{ count: 'exact', head: true \}

Querying JSON data

const \{ data, error \} = await supabase
  .from('users')
  .select(`
    id, name,
    address->street
  `)
  .eq('address->postcode', 90210)

Return data as CSV

const \{ data, error \} = await supabase
  .from('users')
  .select()
  .csv()

Aborting requests in-flight

const ac = new AbortController()
supabase
  .from('very_big_table')
  .select()
  .abortSignal(ac.signal)
  .then(console.log)
ac.abort()
// \{
//   error: \{
//     message: 'FetchError: The user aborted a request.',
//     details: '',
//     hint: '',
//     code: ''
//   \},
//   data: null,
//   body: null,
//   count: null,
//   status: 400,
//   statusText: 'Bad Request'
// \}