Data Mutation

This page information on how you can mutate data on the Realtime Database, such as updating, deleting and or running transactions.

All hooks are built upon the useMutation hook, making it super simple to handle loading states, success and errors.

Setting data#

To set data in the database, use the useDatabaseSetMutation hook.

import { useDatabaseSetMutation } from "@react-query-firebase/database";
import { ref } from "firebase/database";
import { database } from "./firebase";

function UpdateUser({ id }) {
  const dbRef = ref(database, `users/${id}`);
  const mutation = useDatabaseSetMutation(dbRef);

  return (
    <>
      <button
        disabled={mutation.isLoading}
        onClick={() => {
          mutation.mutate({
            name: "John Doe",
          });
        }}
      >
        Update User
      </button>
      {mutation.isError && <p>{mutation.error.message}</p>}
    </>
  );
}

To set data with priority, provide the priority option to the hook:

const mutation = useDatabaseSetMutation(dbRef, {
  priority: "high",
});

This will set data on the entire node, overriding anything which existed before. If you want to only set a sub-value on a node, provide a tighter reference instead:

const dbRef = ref(database, `user/123/name`);
const mutation = useDatabaseSetMutation(dbRef);

mutation.mutate("John Doe");

Updating nodes#

To update data in the database, use the useDatabaseUpdateMutation hook.

Instead of taking the raw values of the node, you instead provide the child path to a node as the object key with the value to update.

import { useDatabaseUpdateMutation } from "@react-query-firebase/database";
import { ref } from "firebase/database";
import { database } from "./firebase";

function UpdateUser({ id }) {
  const dbRef = ref(database, `users/${id}`);
  const mutation = useDatabaseUpdateMutation(dbRef);

  return (
    <>
      <button
        disabled={mutation.isLoading}
        onClick={() => {
          mutation.mutate({
            name: "John Doe",
            "address/line1": "Mountain View",
          });
        }}
      >
        Update User
      </button>
      {mutation.isError && <p>{mutation.error.message}</p>}
    </>
  );
}

In this example, the mutation will update the users/:id/name and users/:id/address/line1 nodes at the same time.

Removing nodes#

To remove data in the database, use the useDatabaseRemoveMutation hook.

import { useDatabaseUpdateMutation } from "@react-query-firebase/database";
import { ref } from "firebase/database";
import { database } from "./firebase";

function UpdateUser({ id }) {
  const dbRef = ref(database, `users/${id}/address`);
  const mutation = useDatabaseRemoveMutation(dbRef);

  return (
    <>
      <button
        disabled={mutation.isLoading}
        onClick={() => {
          mutation.mutate();
        }}
      >
        Remove User Address
      </button>
      {mutation.isError && <p>{mutation.error.message}</p>}
    </>
  );
}

In this example, the users/:id/address node will be removed. Any subscribers of this data will return null as the value once complete.

Running transactions#

To perform a database transaction, use the useDatabaseTransaction hook. You can learn more by viewing the Firebase Transaction documentation.

import { useDatabaseTransaction } from "@react-query-firebase/database";
import { ref } from "firebase/database";
import { database } from "./firebase";

function LikePost({ id }) {
  const dbRef = ref(db, "post/123");
  const mutation = useDatabaseTransaction(dbRef, (post) => {
    if (post) {
      post.likes++;
    }

    return post;
  });

  return (
    <>
      <button
        disabled={mutation.isLoading}
        onClick={() => {
          mutation.mutate();
        }}
      >
        Like Post!
      </button>
      {mutation.isError && <p>{mutation.error.message}</p>}
    </>
  );
}

If you wish to get the result of the transaction (a TransactionResult), either await the mutation or wait for it to be successful:

const dbRef = ref(db, "post/123");

const mutation = useDatabaseTransaction(dbRef, (post) => {
  if (post) {
    post.likes++;
  }

  return post;
});

// Option 1: Await the mutation
const transactionResult = await mutation.mutateAsync();

// Option 2: Wait for success
if (mutation.isSuccess) {
  const transactionResult = mutation.data;
  console.log(transactionResult.committed);
  console.log(transactionResult.snapshot);
}