Loaders

Loaders let you fetch data securely from a database or anywhere else, directly inside any component.

components/City.js
import { useLoader } from 'firebolt'

export function City({ id }) {
  const city = useLoader(getCity, id).read()
  return (
    <div>
      <h1>{city.name}</h1>
      <p>{city.description}</p>
    </div>
  )
}

export async function getCity(ctx, id) {
  return await ctx.db('cities').where({ id }).first()
}

Loaders simplify the way you build apps:

• Write business logic and access your database right alongside the components that use them.
• They're designed to work with both Suspense and ErrorBoundaries the way React intended.
• Loaders work seamlessly via server streaming and on the client.
• Secure code is stripped completely from all client bundles.
• Forget about writing API endpoints completely (unless you need them)

Context & Invalidation

All loader functions are called with a Context object that allows you to read/write cookies, perform redirects and set an expiration date on the data returned. You can also decorate the context object with access to a database etc in your firebolt.config.js.

If you set data to expire or manually invalidate data, it will be re-fetched in the background and seamlessly update the UI. Learn more on the useLoader and useCache pages.