Calling Functions
The useFunctionsCall enables you to call a Callable Cloud Function on demand.
For example, lets assume we have a updateProduct Callable HTTPS Function deployed which accepts a product ID
and data to update. Instead of calling this function as we render, we can instead call it as a mutation on demand.
import React from "react";
import { useFunctionsCall } from "@react-query-firebase/functions";
import { functions } from "../firebase";
function Product({ id }: { id: number }) {
const mutation = useFunctionsCall(functions, "updateProduct");
return (
<button
disabled={mutation.isLoading}
onClick={() => {
mutation.mutate({
id,
name: "New product name!",
});
}}
>
Update Product Name
</button>
);
}
The hook is built on top of the useMutation hook.
HttpsCallableOptions
The 3rd argument of the hook accepts an optional HttpsCallableOptions
argument which will be used when requested. For example we can increase the timeout of the request.
const mutation = useFunctionsCall(functions, "updateProduct", {
timeout: 10000,
});
React Query options
The 4th optional argument accepts options of the useMutation hook,
allowing us handle things such as side effects.
const mutation = useFunctionsCall(
functions,
"updateProduct",
{
timeout: 10000,
},
{
onSuccess() {
console.log("Product updated...");
},
onError(error) {
console.error("Failed to update product...", error);
},
onMutate(variables) {
console.log("Updating product with variables", variables);
},
}
);