Actions

Actions allow you to run secure code on the server, directly inside your components.

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

export function LikeButton({ postId, isLiked }) {
  const action = useAction(toggleLike, postId)
  return (
    <div onClick={action}>
      <span>{isLiked ? 'Unlike' : 'Like'}</span>
    </div>
  )
}

export async function toggleLike(ctx, postId) {
  const user = await ctx.getAuth()
  const data = {
    id: ctx.uuid(),
    userId: user.id,
    postId,
  }
  await ctx.db('likes').insert(data)
  ctx.invalidate('#posts')
}

In this example, clicking the like button runs the toggleLike function on the server and then refreshes all data with the #posts tag in the background.

Context & Cookies

Action functions are provided with a Context object that allows you to interact with cookies and perform redirects. You can decorate the context object with anything you need, such as database access in your firebolt.config.js.

In addition to this, when modifying a cookie on the server, all client components observing that cookie will update instantly.