How to pass dynamic parameters into cloud function in react

Moralis General
#1

Hi How to pass dynamic parameters into cloud function and manually trigger

let params = {
        email: "",
    };

 const { fetch: sendEmail, data, cloudError, isLoading } = useMoralisCloudFunction(
        "sendEmail", params,
        { autoFetch: false }
    );


 const onSubmit = data => {
   //how to set Email dynamically
    sendEmail()
}
#2

if you want the params to be dynamic, you can store the params in a react state or memo using useState or useMemo. And, based on your code, seems like it will only be triggered manually with autoFetch: false

#3

@YosephKS
I used useState. it’s only uploads data second time click

#4

can you show the code as well how you handle the state and then call sendEmail so I can have a better outlook of the implementation? thanks~

#5

@YosephKS I have created a basic version of it

import {useMoralisCloudFunction} from "react-moralis";
import {useState} from "react";

function Test() {
    const [email, setEmail] = useState('');

    // default parameters
    const params = {
        email: email,
    };

    // cloud function for send a email
    const { fetch: sendEmail, data, error, isLoading } = useMoralisCloudFunction(
        "sendEmail",
        params,
        { autoFetch: false }
    );

    const onClickHandler = () => {
        // set email
        setEmail("[email protected]") // this is not working first time, second click works

        // execute cloud function // may be problem is here
        sendEmail()
    }

    return (
        <div>
           <button  onClick={onClickHandler}>send email</button>
        </div>
    );
}

export default Test
#6

I see, I think it’s because useState usually takes a while to change the state and since JS is asynchronous in nature, sendEmail might be called the first time with just empty string, then the second click when it’s already set to your email (from previous click), this time it works. I believe, if you add a text input and have the email state changed when the email is typed, it will work when you click onClickHandler

(React question) Updating parameter in cloud function before call
#7

@YosephKS you right, It will work if I attached to the input, things is that it, I have a special case that I need to manually add :frowning:
thanks

1 Like
#8

Did you have a solution. I’m having the same issue. There must be a way to add pass new params in this hook!

#9

Hey,

I have the same issue that I want to send a dynamic parameter that I got it from another request. The problem for using state is the my state is always undefined because it seems calling the hook and setting the state are always at the same time. So any solutions to send parameters to the Hook?

#10

Did you guys find a solution for this?

#11

You can use a state variable to set parameters dynamically. And then you can use a useEffect to call the cloud function via fetch whenever that state variable changes (or have fetch triggered by the user e.g. through a button). Example:

const [tokenUri, setTokenUri] = useState('');

const { data, error, fetch } = useMoralisCloudFunction(
    'getTokenUri',
    { url: tokenUri },
    { autoFetch: false }
);

useEffect(() => {
  if (data) console.log('data', data);
}, [data]);

useEffect(() => {
  if (tokenUri) fetch();
}, [tokenUri]);