Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add useCallableFunctionResponse #449

Merged
merged 5 commits into from
Sep 14, 2021
Merged

add useCallableFunctionResponse #449

merged 5 commits into from
Sep 14, 2021

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

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