Firestore Hooks

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>