Getting Started

Authentication

Firestore

useDataConnectQuery

useDataConnectQuery is a hook designed to simplify data fetching and state management with Firebase Data Connect.

See querying for more information.

Features

  • Provides type-safe handling of queries based on the Firebase Data Connect schema.
  • Simplifies data fetching using Firebase Data Connect.
  • Automatically manages loading, success, and error states.
  • Supports refetching data with integrated caching.

Usage

import { useDataConnectQuery } from "@tanstack-query-firebase/react/data-connect";
import { listMoviesQuery } from "@your-package-name/your-connector";

function Component() {
  const { data, isPending, isSuccess, isError, error } = useDataConnectQuery(
    listMoviesQuery()
  );

  if (isPending) return <div>Loading...</div>;
  if (isError) return <div>Error: {error.message}</div>;

  return (
    <div>
      {isSuccess && (
        <ul>
          {data.movies.map((movie) => (
            <li key={movie.id}>{movie.title}</li>
          ))}
        </ul>
      )}
    </div>
  );
}