​
Overview

There’s 5 functions you can use to interact with the database.

They are used in conjection with the db property from the useBasic() hook, and are appended in the format of db.collection('tablename').FUNCTION().

​
.get()

​
.get('ID_OF_ITEM')

Fetch a single item from the table. Returns a promise, or can be used with useQuery to “subscribe” to data changes

​
.getAll()

Filtering is not supported yet, conduct any filtering in your client logic. Joins are not supported yet, manually fetch information from the separate tables and join them in your client logic.
​
.getAll()

Fetch all items from the table. Returns a promise, or can be used with useQuery to “subscribe” to data changes

​
.add()

​
.add({ 'item': 'value' })

Adds a new item to the table, returns a promise with the new item

​
.update()

​
.update({ 'id': 'ID_OF_ITEM', 'value': { 'item': 'value' } })

Updates an item in the table, returns a promise with the updated item

​
.delete()

​
.delete('ID_OF_ITEM')

Deletes an item from the table, returns a promise

​
Examples

​
Read items

There’s 2 ways to read items from the database:

  • .get('ID_OF_ITEM'): Fetches a single item in a table
  • .getAll(): Fetches all items from the table
App.tsx
import { useBasic, useQuery } from '@basictech/react'
import { useState } from 'react'

function App() {
  // Import db from useBasic() inside your React component
  const { db } = useBasic()

  // Example 1: Use useQuery to "subscribe" to data from the database
  const items = useQuery(() => db.collection('tablename').getAll())
  
  // Example 2: Or get a single item by ID. You could use async instead of useQuery if you need it only once
  const [singleItem, setSingleItem] = useState(null)
  const getItem = () => {
    db.collection('tablename').get('ID_OF_ITEM')
      .then(item => {
        setSingleItem(item)
        console.log("Successfully fetched single item: ", item)
      })
      .catch(error => console.error("Error fetching single item: ", error))
  }

  return (
    <>
      {/* render items */}
    </>
  )
}

​
Add new item

App.tsx
import { useBasic } from '@basictech/react'
import { useState } from 'react'

function App() {
  const { db } = useBasic()

  // Use .add() to add items
  const [newItem, setNewItem] = useState(null)
  const addItem = () => {
    db.collection('tablename').add({ name: 'cutie' })
      .then(item => {
        setNewItem(item)
        console.log("Successfully added new item with ID: ", item)
      })
      .catch(error => console.error("Error adding new item: ", error))
  }

  return (
    <>
      {/* render newItem */}
    </>
  )
}

​
Update item

App.tsx
import { useBasic } from '@basictech/react'
import { useState } from 'react'

function App() {
  const { db } = useBasic()

  // Use .update() to update items. 
  // Include the ID of the item you want to update, and the new value
  const [updatedItem, setUpdatedItem] = useState(null)
  const updateItem = () => {
    db.collection('tablename').update('ID_OF_ITEM', { name: 'super cute' })
      .then(item => {
        setUpdatedItem(item)
        console.log("Successfully updated item: ", item)
      })
      .catch(error => console.error("Error updating item: ", error))
  }

  return (
    <>
      {/* render updatedItem */}
    </>
  )
}

​
Delete item

App.tsx
import { useBasic } from '@basictech/react' 
import { useState } from 'react'

function App() {
  const { db } = useBasic()

  // Use .delete() to delete items
  // Include the ID of the item you want to delete
  const deleteItem = () => {
      db.collection('tablename').delete('ID_OF_ITEM')
      .then(console.log("Successfully deleted item"))
      .catch(error => console.error("Error deleting item: ", error))
  }

  return (
    <>
      {/* render delete button */}
    </>
  )
}