React Query Firebase


The library exposes some useful functionality for handling various Analytics actions.

Checking for support#

If you need to check for whether analytics is supported on the current platform, you can use the useAnalyticsIsSupported hook, which simply wraps the async call isSupported from the Firebase SDK:

useAnalyticsIsSupported("analytics-supported", {
  onSuccess(isSupported) {
    console.log("Is analytics supported? ", isSupported);

Toggling analytics collection#

To toggle whether Analytics will automatically collection information, you can use the useAnalyticsSetCollectionEnabled hook, which extends the useMutation hook:

import { useAnalyticsSetCollectionEnabled } from "@react-query-firebase/analytics";
import { analytics } from "./firebase";

function Settings() {
  const mutation = useAnalyticsSetCollectionEnabled(analytics);

  return (
      onClick={() => {
      Disable Analytics Collection

Setting the current screen#

To manually set the current screen on analytics, use the useAnalyticsSetCurrentScreen hook.

import { useAnalyticsSetCurrentScreen } from "@react-query-firebase/analytics";
import { analytics } from "./firebase";

function SearchPage() {
  const mutation = useAnalyticsSetCurrentScreen(analytics);

  useEffect(() => {
      screenName: "search",
  }, []);

  return <div>Search!</div>;

Setting user properties#

The library exposes a useAnalyticsSetUserId hook and useAnalyticsSetUserProperties hook to manually set user properties.

import {
} from "@react-query-firebase/analytics";
import { analytics } from "./firebase";

function Login() {
  const userIdMutation = useAnalyticsSetUserId(analytics);
  const userPropertiesMutation = useAnalyticsSetUserProperties(analytics);

  function login() {
    fetch("").then((user) => {
      // Trigger the `useAnalyticsSetUserId` mutation
      userIdMutation.mutate({ id: user.uid });

      // Trigger the `useAnalyticsSetUserProperties` mutation
        properties: user.profile,

  return <button onClick={login}>Login</button>;