How to display Cloud Function result in React component

Technical Issue Reporting
#1

is there a reason why my cloud function isnā€™t returning on my frontend? the server logs show the cloud function is working fine, I just canā€™t see it on the client

Hereā€™s my cloud function:

Moralis.Cloud.define("userSearch", async (request) => {
  const query = new Moralis.Query("User");
  query.equalTo("username", request.params.search);
  const results = await query.find({useMasterKey:true});
  
  return  results;
});

Hereā€™s the front end:

class Navy extends Component  {
    constructor(props) {
      super(props);
      this.state = {
          showsearch: false,
          searchcontent: null
      }
      this.openSearch = this.openSearch.bind(this);
      this.closeSearch = this.closeSearch.bind(this);
      this.handleChange = this.handleChange.bind(this)
    }
    openSearch() {
      this.setState({ showsearch: true });
    }

    closeSearch() {
      let vm = this;
      setTimeout(() => {
        vm.setState({ showsearch: false });
      }, 100);
    }

    handleChange(e) {
      var value = e.target.value;
      this.setState({searchcontent: value});
  }

                 render() {

                     const Moralis = require('moralis')
                     const params =  { search: this.state.searchcontent };
                     const results = async () => await Moralis.Cloud.run("userSearch", params);

                 return(
                   <Modal show={this.state.showsearch} onHide={this.closeSearch} size='lg' centered >
                        <Modal.Header >
                          <Modal.Title>Search</Modal.Title>
                        </Modal.Header>
                        <Modal.Body>
                          Search Results #: {results.length} <br/>
                          Result (JSON): {JSON.stringify(results)} <br/>
                          Result: {results}
                        </Modal.Body>
                        <Modal.Footer>
                          <Button variant="secondary" onClick={this.closeSearch}>
                            Close
                          </Button>
                        </Modal.Footer>
                    </Modal>
)}}
#2

I just realized we arenā€™t supposed to call from USER database in front end so I made another object but itā€™s still not returning anything:

      const Moralis = require('moralis')
      const query = new Moralis.Query("UserList");
      query.equalTo("username", this.state.searchcontent);
      const results = async () => await query.find();
#3

@cryptokid @Yomoo

ā€¦

#4

here it looks like you define a function with the name results, this is what you want to do?

you can also look in your dashboard in logs to see it it returns the proper output when you call that userSearch cloud function

#5

Looking at the server logs it was returning the proper output but Iā€™m trying to return the info to frontendā€¦ I made another object too

#6

in front end if you do something like

x = await Moralis.Cloud.run("userSearch", params);
console.log(JSON.stringify(x));

then you see the right value in your browser console?

#7

undefinedā€¦

      const query = new Moralis.Query("UserList");
            query.equalTo("username", this.state.searchcontent);
      const results = async () => await query.find()
      console.log(JSON.stringify(results))
#8 
      const query = new Moralis.Query("UserList");
            query.equalTo("username", this.state.searchcontent);
      const results = async () => await query.find()
      console.log(JSON.stringify(results))

what if you change it to:

      const query = new Moralis.Query("UserList");
            query.equalTo("username", this.state.searchcontent);
      const results = await query.find()
      console.log("query find", JSON.stringify(results))
#9

console log said ā€œquery find undefinedā€

#10

You have no errors in your browser console?

#11

Yea but I always have errors, idk if this has anything to do with it:

Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.

Also the server logs show it returned perfectly just now

#12

My cloud logs only show when I call results(), if I dont add parentheses nothing happensā€¦ Either way undefined on front end and browser console

#13

that is probably because you defined result as a function

you could return something in that function maybe

#14

I cant even render the page anymore, computer is getting hot too

Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
#15

ok, probably it was not a good idea, it looks like you got an infinite loop now

#16 
 const results = async () => { return(await Moralis.Cloud.run("searchResults", params))}

Do you know why nothing is returning?

#17

@cryptokid

ā€¦

#18

It looks like this works fine for me in a react app:

import { useMoralis } from "react-moralis";

function App() {
  const {  Moralis } = useMoralis();

  const x = async () => {
    try {
      const x3 = await Moralis.Cloud.run("test_result");
      console.log("x3", x3);
    } catch (e) {
      console.log(e);
    }
  };

  return (
    <div>
      <p>
        <button onClick={x}> test button</button>
      </p>
    </div>
  );
}

export default App;
#19

I copy and pasted the exact thing but replaced console.log with returnā€¦didnā€™t get anything, not even an error was returnedā€¦ Also as you see Iā€™m in a class component so I canā€™t useMoralis()

#20

This works too:

const Moralis = require("moralis");

function App2() {
  const x = async () => {
    try {
      const x3 = await Moralis.Cloud.run("test_result");
      console.log("x3", x3);
    } catch (e) {
      console.log(e);
    }
  };

  return (
    <div>
      <p>
        <button onClick={x}> test button 2</button>
      </p>
    </div>
  );
}

export default App2;

If you let that console.log and look in the console you should see the output