useConnectMutation
useConnectMutation is a hook designed to simplify handling mutations (creating, updating, deleting) with Firebase Data Connect.
This hook integrates with Firebase Data Connect, which uses GraphQL to interact with a PostgreSQL database (via Cloud SQL) for secure, scalable data operations.
The hook manages the mutation process and provides an easy-to-use interface to manage loading, success, and error states in your React application.
Features
- Simplifies mutation handling for create, update, and delete operations using Firebase Data Connect.
- Provides type-safe handling of mutations based on your Firebase Data Connect schema.
- Automatically manages loading, success, and error states for mutations.
- Supports optimistic updates and caching to improve user experience and performance.
Usage
import { useConnectQuery } from "@tanstack-query-firebase/react";
import { createMovieRef } from "@your-package-name/your-connector";
function Component() {
const { mutate, isPending, isSuccess, isError, error } =
useConnectMutation(createMovieRef);
const handleSubmit = async (movieData) => {
try {
await mutate(movieData);
} catch (err) {
console.error("Failed to add movie:", err);
}
};
if (isPending) return <div>Adding movie...</div>;
if (isError) return <div>Error: {error.message}</div>;
return (
<div>
{isSuccess && <div>Movie added successfully!</div>}
<form onSubmit={(e) => handleSubmit(e.target)}>
{/* Form fields for movie data */}
<button type="submit" disabled={isPending}>
Add Movie
</button>
</form>
</div>
);
}