FirebaseExtended / reactfire

Hooks, Context Providers, and Components that make it easy to interact with Firebase.
https://firebaseopensource.com/projects/firebaseextended/reactfire/
MIT License
3.52k stars 401 forks source link

add useCallableFunctionResponse #449

Closed jhuleatt closed 2 years ago

jhuleatt commented 3 years ago

Description

Add the useCallableFunctionResponse hook, which makes it easy to call a callable function on render.

fixes #447

Code sample

import { useCallableFunctionResponse } from "reactfire";

function LikeCount({ videoId }) {
  const { status, data: likeCount } = useCallableFunctionResponse(
    "countVideoLikes",
    { data: { videoId: videoId } }
  );

  return (
    <span>This video has {status === "loading" ? "..." : likeCount} likes</span>
  );
}

Note: We also discuss useGetCallableFunction in #447, but I've left that out of this PR. After some more thought, I don't think it is worth the maintenance burden, since it is easy enough to use the Firebase JS SDK directly for that use case:

import { useFunctions } from "reactfire";
import { httpsCallable } from "firebase/functions";

function MyComponent() {
  const remoteCalculator = httpsCallable(useFunctions(), "calculate");

  //...
}