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
Functions
instance. - 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);
},
}
);