​
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()

​
.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 */}
    </>
  )
}
2. Hooks