To mutate data in Firebase Data Connect, you can either use the generated injectors, or use the injectDataConnectMutation injector.
ts
import { injectCreateMovie } from "@firebasegen/movies/angular";
@Component({
...
template: `
<button
disabled={createMovie.isPending()}
(click)="addMovie()"
>
{{createMovie.isPending() ? "Creating..." : "Create Movie"}}
</button>
`
})
class AddMovieComponent() {
// Calls `injectDataConnectMutation` with the respective types.
// Alternatively:
// import { injectDataConnectMutation } from '@tanstack-query-firebase/angular/data-connect';
// ...
// createMovie = injectDataConnectMutation(createMovieRef);
createMovie = injectCreateMovie();
addMovie() {
createMovie.mutate({
title: 'John Wick',
genre: "Action",
imageUrl: "https://example.com/image.jpg",
});
}
}Additionally, you can provide a factory function to the mutation, which will be called with the mutation variables:
ts
createMovie = injectDataConnectMutation(undefined, () => ({
mutationFn: (title: string) => createMovieRef({ title, reviewDate: Date.now() })
}));
// ...
createMovie.mutate("John Wick");The function provides an additional mutation option called invalidate. This option accepts a list of query references which will be automatically invalidated when the mutation is successful.
You can also provide explicit references to the invalidate array, for example:
ts
const createMovie = injectDataConnectMutation(createMovieRef, {
invalidate: [getMovieRef({ id: "1" })],
});In this case only the query reference getMovieRef({ id: "1" }) will be invalidated.
Along with the data, the function will also return the ref, source, and fetchTime metadata from the mutation.
ts
const createMovie = injectDataConnectMutation(createMovieRef);
await createMovie.mutateAsync({
title: 'John Wick',
genre: "Action",
imageUrl: "https://example.com/image.jpg",
});
console.log(createMovie.dataConnectResult().ref);
console.log(createMovie.dataConnectResult().source);
console.log(createMovie.dataConnectResult().fetchTime);