​
Components

​
BasicProvider

To enable the features of the Basic SDK, you need to wrap your app in a <BasicProvider> component.

BasicProvider takes 3 props:

  • project_id: The project ID of your Basic project
  • schema: The schema of your Basic project
  • debug: An optional prop to enable additional debug logs to the console.
App.tsx
import { BasicProvider } from '@basictech/react'
import schema from './basic.config'

function App() {
  return (
    <BasicProvider project_id={schema.project_id} schema={schema} debug>
      <YourApp />
    </BasicProvider>
  )
}

​
Hooks

​
useBasic

The useBasic hook is used to access the database and other Basic features. Here’s a list of all the useBasic properties:

  • db: The database object, which you can use to read, add, update, and delete items
  • dbStatus: Fetches the status of the database
  • user: Fetches the user object containing the user’s ID, email, and name
  • getToken: Fetches the user’s JWT token
  • signin: Function to sign a user in via the Basic OAuth flow
  • signout: Function to sign a user out
  • isSignedIn: Boolean that checks if a user is signed in
  • isAuthReady: Boolean that checks if the auth is ready

Any of these properties can be accessed by destructuring the useBasic hook.

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

const { db, dbStatus, user, getToken, signin, signout, isSignedIn, isAuthReady } = useBasic()

​
useQuery

The useQuery hook is used to “subscribe” to data from the database, so that it updates when the data changes. It’s a listener for data, and enables automatic sync between the local database, users’ devices, and all other users that are connected to the same database.

We use it primarily to wrap our .get() and .getAll() functions, and it takes a function as an argument.

import { useBasic, useQuery } from '@basictech/react'

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

  // Example 1: Fetch a single item from the table
  const item = useQuery(() => db.collection('tablename').get('ID_OF_ITEM'))

  // Example 2: Fetch all items from the table
  const items = useQuery(() => db.collection('tablename').getAll())

  return (
    // render items
  )
}

​
CRUD

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

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

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

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

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

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

.delete('ID_OF_ITEM')

Deletes an item from the table, returns a promise with the deleted item

​
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 [item, setItem] = useState(null)
  const getItem = async () => {
    try {
      const item = await db.collection('tablename').get('ID_OF_ITEM')
      setItem(item)
      // Handle success
    } catch (error) {
      // Handle error
    }
  }

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

​
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 = async () => {
    try {
      const item = await db.collection('tablename').add({ name: 'cutie' })
      setNewItem(item)
      // Handle success
    } catch (error) {
      // Handle error
    }
  }

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

​
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 = async () => {
    try {
      const item = await db.collection('tablename').update({ 
        id: 'ID_OF_ITEM',
        value: { name: 'super cute' }
      })
      setUpdatedItem(item)
      // Handle success
    } catch (error) {
      // Handle error
    }
  }

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

​
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 [deletedItem, setDeletedItem] = useState(null)
  const deleteItem = async () => {
    try {
      const item = await db.collection('tablename').delete('ID_OF_ITEM')
      setDeletedItem(item)
      // Handle success
    } catch (error) {
      // Handle error
    }
  }

  return (
    <div>
      {/* render deletedItem */}
    </div>
  )
}