Data fetching

Your codebase will include React hooks that make it simple to fetch data and re-render components when data changes.

Here's how you'd fetch all the items created by the current authenticated user:

import { useAuth, requireAuth } from "./../util/auth.js";
import { useItemsByOwner } from "./../util/db.js";

function ItemsPage() {
  const auth = useAuth();

  const { data: items, status } = useItemsByOwner(auth.user.uid);

  // Show loading indicator and then display items
  return (
    <div>
      {status === "loading" ? (
        <span>One moment please</span>
      ) : (
        items.map((item) => <div>{item.name}</div>)
      )}
    </div>
  );
}

export requireAuth(ItemsPage);

This is a lightweight abstraction around your database provider that removes the need to worry about managing data or loading status in state. Everything you need to know is returned by the hook.

You can see a complete example of data fetching by exporting one of our templates and checking out the /dashboard page. It renders the DashboardItems component which fetches the user's items from the database, as well as enables updating and creation of new items.

By default we give you hooks for fetching "users" and "items", although you'll want to follow the pattern you see in src/util/db.js to add more data fetching hooks as needed.

Files

• src/util/db.js