useDataConnectMutation
useDataConnectMutation is a hook designed to simplify handling mutations (creating, updating, deleting) with Firebase Data Connect.
See mutations for more information.
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 pending, success, and error states for mutations.
- Supports optimistic updates and caching to improve user experience and performance.
Usage
import { useDataConnectQuery } from "@tanstack-query-firebase/react/data-connect";
import { createMovieRef } from "@your-package-name/your-connector";
function Component() {
const { mutate, isPending, isSuccess, isError, error } =
useDataConnectMutation(createMovieRef);
const handleFormSubmit = (e: React.FormEvent) => {
e.preventDefault();
const data = new FormData(e.target as HTMLFormElement);
mutate({
title: data.get("title") as string,
imageUrl: data.get("imageUrl") as string,
genre: data.get("genre") as string,
});
};
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={handleFormSubmit}>
<input type="text" name="title" placeholder="Title" />
<input type="text" name="genre" placeholder="Genre" />
<input type="text" name="imageUrl" placeholder="Image URL" />
{/* Form fields for movie data */}
<button type="submit" disabled={isPending}>
Add Movie
</button>
</form>
</div>
);
}