Skip to content

Conversation

jhuleatt
Copy link
Collaborator

@jhuleatt jhuleatt commented Sep 10, 2021

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");

  //...
}

@google-cla google-cla bot added the cla: yes label Sep 10, 2021
* @param functionName - The name of the function to call
* @param options
*/
export function useCallableFunctionResponse<RequestData, ResponseData>(
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

☝️ this is where it is implemented

const observableId = `functions:callableResponse:${functionName}:${JSON.stringify(options?.data)}:${JSON.stringify(options?.httpsCallableOptions)}`;
const obsFactory = rxHttpsCallable<RequestData, ResponseData>(functions, functionName, options?.httpsCallableOptions);

//@ts-expect-error because RxFire doesn't make data optional. Remove when https://github.com/FirebaseExtended/rxfire/pull/34 is released.
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.


```jsx
function LikeCount({ videoId }) {
const { status, data: likeCount } = useCallableFunctionResponse('countVideoLikes', { data: { videoId: videoId } });
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What do you think about the name useCallableFunctionResponse? It's a little wordy because I wanted to emphasize that this would call the callable function and update with the response. Any suggestions to make it shorter/better?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wordy but I like that it's very explicit. SGTM

@jhuleatt jhuleatt requested a review from davideast September 13, 2021 12:49
Copy link
Collaborator

@jamesdaniels jamesdaniels left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@jhuleatt jhuleatt merged commit 8f8fd08 into main Sep 14, 2021
@jhuleatt jhuleatt deleted the jhuleatt-functions-helper branch September 14, 2021 18:54
@FirebaseExtended FirebaseExtended locked and limited conversation to collaborators Oct 15, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Feature Request/Proposal: Expanding Functions

2 participants