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()
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.
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()
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
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
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
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
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 */}
</>
)
}