Querying Functions
The useFunctionsQuery enables you to query a Callable Cloud Function as your render.
For example, lets assume we have a getProduct Callable HTTPS Function deployed which accepts a product ID
and returns data. We can query the function and render the response:
import React from "react";
import { useFunctionsQuery } from "@react-query-firebase/functions";
import { functions } from "../firebase";
function Product({ id }: { id: number }) {
// Functions has a deployed `getProduct` callable function
const query = useFunctionsQuery(["product", id], functions, "getProduct", {
id,
});
if (query.isLoading) {
return <div>Loading...</div>;
}
return <h1>{query.data.name}</h1>;
}
- We first provide a Query Key.
- We provide the hook the exported
Functionsinstance. - We provide the name of the Callable Function (in this case
getProduct). - Data (request body) is provided to the function. This is optional.
HttpsCallableOptions
The 4th 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 query = useFunctionsQuery(
["product", id],
functions,
"getProduct",
{
id,
},
{
timeout: 10000,
}
);
React Query options
The 5th optional argument accepts options of the useQuery hook,
allowing us handle things such as side effects.
const query = useFunctionsQuery(
["product", id],
functions,
"getProduct",
{
id,
},
{
timeout: 10000,
},
{
onSuccess(product) {
console.log("Fetched the product: ", product);
},
onError(error) {
console.error("Error fetching the product!", error);
},
}
);