Firestore Hooks

Available hooks: useFirestoreDoc and useFirestoreQuery

Usage

firestore.tsx

import { firestore, useFirestoreQuery } from "gatsby-theme-firebase";

...

const [tasks, isLoading] = useFirestoreQuery(
  firestore.collection("tasks").orderBy("priority", "asc"),
);

...

<div>
  {isLoading ? (
    <p>Loading...</p>
  ) : (
    <ul>
      {tasks.map(
        task => (
          <li key={task._id}>
            <input type="checkbox" checked={task.completed} />
            {task.task}
          </li>
        ),
      )}
    </ul>
  )}
<div>

Demo

This list is loaded from the code above.

  • Set up repo for firebase theme
  • Configure firebase
  • Set up auth providers
  • Add sign up + login page.
  • Add some styling.
  • Make login path configurable.
  • Export hooks & components
  • Add demos
  • Add Firestore hooks
  • Deploy to netlify
  • Publish to npm