Add listening feature to Loader

[aress31]

I might be doing something wrong here but I can' figure out how to use the loader property of routes to listen and re-render on firebase real-time database changes.

Here is my code:

--- SNIP ---

const loadPartialData = async (path, query, key) => {
  --- SNIP ---
  const data = [];

  try {
    const snapshot = await get(query);
    snapshot.forEach((childSnapshot) => {
      const id = childSnapshot.key;
      const value = childSnapshot.child(key).val();
      if (value) {
        data.push({ id, ...value });
      }
    });
    return [dynamicColumns, data, dynamicFields];
  } catch (error) {
    console.error("Error fetching data:", error);
    throw error;
  }
};

const loadData = async (path, query) => {
  --- SNIP ---

  try {
    const snapshot = await get(query);
    let data = snapshot.val();
    if (data) {
      data = Object.keys(data).map((id) => ({ id, ...data[id] }));
    }
    return [dynamicColumns, data || [], dynamicFields];
  } catch (error) {
    console.error("Error fetching data:", error);
    throw error;
  }
};

const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
    --- SNIP ----
    children: [
      --- SNIP ---
      {
        path: "bar",
        element: (
          <WithBreadcrumbsAndTabs>
            <DataTableView />
          </WithBreadcrumbsAndTabs>
        ),
        loader: ({ params }) =>
          loadPartialData("bar", ref(database, `bar`), "bar"),
      },
      {
        path: "foobar/:foobar",
        children: [
          {
            path: "foo",
            element: (
              <WithBreadcrumbsAndTabs tabs={["a", "b", "c", "d"]}>
                <DataTableView />
              </WithBreadcrumbsAndTabs>
            ),
            loader: ({ params }) =>
              loadData(
                "foo",
                child(ref(database, `foo/${params.projectId}`), "foo")
              ),
          },
        ],
      },
    ],
  },
]);

export default router;

The issue here is that the loader will only fetch the data once prior to the initial render, but if the view has operations that updates the database, then the component does not get automatically re-rendered. I attempted to leverage onValue listener from firebase but that does not seem to work. And I would like to control this re-render logic at the routing level to better organise my code.

Is there any ways to set/bind components to a databse at the router level, if not, maybe something to consider?

[brophdawg11]

if the view has operations that updates the database

Mutations should be done via actions and it will automatically revalidate all of the loaders after the action completes.

If you are not making explicit mutations and need to poll for changes, you can do that either either a fetcher.load or the useRevalidator hook

[aress31]

Would you kindly have an example what a basic integration with firebase real time database (as per my opening post) would look like?

That would help a lot!

[brophdawg11]

I've never used a firebase real time database so I am afraid I can't help with that. Sorry!

[aress31]

So what would an example action look like?

Let's say you have a view to which you load data via the Loader property from a database. Then in the view itself you interact with the database with onClick action, is there a built way with react router to remount the view?

[brophdawg11]

There are examples in the action docs. Use <Form> for declarative submissions and useSubmit for imperative submissions, and useFetcher if you do not want these submissions to be navigations. You can go through the tutorial as well to get an overview of how data routing works in React Router.

Here's a simple codesandbox example: https://codesandbox.io/s/zen-bas-t5pcjm?file=/src/index.js

[aress31]

Awesome <Form> is what I was looking for, however - and I am likely wrong - it seems that only the first Button with type="submit" is considered for the Form as I have multiple submit buttons within my <Form> that update the DB but only the first one seems to work.

[brophdawg11]

Multiple submit buttons is fine as long as they're in the form (or using the <button form>) attribute. You can add a name/value to the button as well that will be included when that button submits the form and then differentiate in your action based on those. Here's another good guide on submissions: https://remix.run/docs/en/1.18.1/guides/data-writes.