useAction

The useAction hook allows you to fetch data from an Action function written alongside any component. Action functions have access to server-only resources such as databases that you provide and their code is never exposed to the browser.

components/LikeButton.js
import { useLoader, useAction } from 'firebolt'

export function LikeButton({ postId }) {
  const liked = useLoader(getLiked, postId).read()
  const like = useAction(createLike, postId)
  const unlike = useAction(deleteLike, postId)
  return (
    <div onClick={liked ? unlike : like}>
      <div>{liked ? 'Unlike' : 'Like'}</div>
    </div>
  )
}

export async function getLiked(ctx, postId) {
  const { id: userId } = await ctx.getUser()
  const like = await ctx.db('likes').where({ userId, postId }).first()
  return !!like
}

export async function createLike(ctx, postId) {
  const { id: userId } = await ctx.getUser()
  await ctx.db('likes').insert({ userId, postId })
}

export async function deleteLike(ctx, postId) {
  const { id: userId } = await ctx.getUser()
  await ctx.db('likes').where({ userId, postId }).delete()
}

useAction(actionFn, ...args)

The first argument must be a reference to your Action function.

You can prime the action with additional arguments here, or alternatively you can pass them in when you execute the function.

Returns a function that executes the action when called.

Action Function

The action function must be exported from the same file or imported from another file.

The function is provided with a Context object as its first argument. The Context object has methods to access cookies and perform redirects. You can decorate this object with access to a database or anything else in your firebolt.config.js file.

Additional arguments from the action execution function are passed as additional arguments to your action function.

exec(...args)

Calls your Action function with the provided arguments. Firebolt seamlessly handles calling your Action function on the server behind the scenes.

In regards to action arguments, you can either prime them like this:

const action = useAction(getUser, userId)
// ...
const user = await action()

Or provide them when calling it

const action = useAction(getUser)
// ...
const user = await action(userId)

Returns a promise that resolves with the return value of the Action function.