How can you save data from a query?

Moralis General
#1 
const { data, error, isLoading } = useMoralisQuery("Posts");

    const [clicked, setClicked] = useState(false);

    const [votes, setVotes] = useState(0);

    const results = JSON.stringify(data, null, 2)

    const finalResult = JSON.parse(results)

    const createPost = () => {

        setisActivated(true);

    }

    const addVotes = () => {

        setClicked(true);

        data.set("votes", votes + 1)

        data.save()

        return data;

    }

I’m trying to get the data from a query and from that data save and set new data to that query. Is this all right?

1 Like
#2

From what I see you want to query the Table posts and whenever someone votes you want to increment the vote.

First of all you need to know that data in useMoralisQuery is an array out of objects (Array of rows in table). You will get back all the entries in the “Posts” table.

So you will need to know the right post from the data array which you want to vote.
Then you can use .set(“votes”, votes++) and save.

#3

TypeError: Assignment to constant variable.

Getting this error

#4

Do you have something like this in your code?

const someConst = “something”
…
someConst = “somethingelse” ?

Because that error means that you cannot do that.
You cannot replace a constant later on in code. They way you do this in React is with useState Hook

#5

I just have the results =

and the parsing of the data, nothing else

#6

I think you cannot do that.
Because data is empty first and changes as soon the query finished and therefore forces const results to be updated.

Use {JSON.stringify(data, null, 2)} in your html like this:

return (
    <div>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  )
#7

and how would you update the data to the collection then?

#8

data is being updated automatically once one results comes in. If you want to fetch it manually again you cann add fetch to the hook like this:

const { fetch, data, error, isLoading } = useMoralisQuery("Posts");

When you want to display the results in proper way you can use something like this:

function component() {
 
   return (
      <div>
<button onClick={() => fetch()}>Get newest Posts</button>
         {data.map(post=> return (
<div key={post.id}> 
<button onClick={() => addVote()}>Vote for {post.title}</button>
</div>))}
      </div>
   )
}
#9

mmm, this will save the number of votes in the database? i think there’s a misunderstanding :grimacing:

#10

No as I said in my first message.

First of all you need to know that data in useMoralisQuery is an array out of objects (Array of rows in table). You will get back all the entries in the “Posts” table.

So you will need to know the right post from the data array which you want to vote.
Then you can use .set(“votes”, votes++) and save

data is an array and you cant make use of .set() .save() only objects inside the data array can make use of .save() and .set()

for example
const votes = data[0].get(‘votes’)
data[0].set(“votes”, votes+1)

#11

but this only adds up the vote to one of the objects inside the collection right? Like if another post is liked, the value will only get added to one

#12

fetch() -> runs the query again

and in my example above this adds only to one specific post

#13

Yes but when I try this for example, it only gets the upvote in one of the items and when I click another post, the sum doesn’t add up…

function Redpit() {
    const { authenticate, isAuthenticated, user } = useMoralis();
	const [isActivated, setisActivated] = useState(false);
	const { Moralis, isInitialized } = useMoralis();
	const { data, error, isLoading } = useMoralisQuery("Posts");
	const [clicked, setClicked] = useState(false);
	const [votes, setVotes] = useState(0);



	const results = JSON.stringify(data, null, 2)
	const finalResult = JSON.parse(results)


	const createPost = () => {
		setisActivated(true);
	}
console.log(data)
	const addVotes = () => {
		setClicked(true);
		data[0].set("votes", votes+1)



		data[0].save()
		return data;
	}
return(
{finalResult.map((result) => {

                                            if(user.get("username") === result.author.username) {

                                                return <div class="central-meta item" key={result.id}>

                                                <div class="pit-post">

                                                    <figure>

                                                        <img src="images/resources/red-post2.jpg" alt="" />

                                                        <i class="fa fa-video"></i>

                                                    </figure>

                                                    <div class="pit-post-deta">

                                                        <h4><a href="social-post-detail.html" title="">{result.title}</a></h4>

                                                        <ul class="post-up-time">

                                                            <li>

                                                                <div class="usr-fig">

                                                                    <img src="images/resources/comet-1.jpg" alt="" />

                                                                    <a href="#" title="">p/{user.get("username")}</a>

                                                                </div>

                                                            </li>

                                                            <li><i class="fa fa-clock-o"></i> Jan 12, 2020</li>

                                                            <li>link <a href="#" title="">https://www.abc.com</a></li>

                                                        </ul>

                                                        <ul class="pit-opt">

                                                            <li class="comentz" title="Comments"><i class="fa fa-comment"></i><em>2.2k</em></li>

                                                            <li class="share-pst" title="Shares"><i class="fa fa-share-alt"></i><em>125</em></li>

                                                            <li class="save-post" title="Save Post"><i class="fa fa-save"></i></li>

                                                            <li class="bad-report" title="Report"><i class="fa fa-flag"></i></li>

                                                            <li class="bane" title="Stop Post"><i class="fa fa-ban"></i></li>

                                                            <li class="get-link" title="Get Post Link"><i class="fa fa-link"></i></li>

                                                            <li class="copy-embd" title="Copy Embed"><i class="fa fa-code"></i></li>

                                                            <li class="smile-it" title="Give Smiles"><i class="fa fa-smile-o"></i><em>Smile it</em>

                                                                <div class="smiles-bunch">

                                                                    <i class="em em---1"></i>

                                                                    <i class="em em-smiley"></i>

                                                                    <i class="em em-anguished"></i>

                                                                    <i class="em em-laughing"></i>

                                                                    <i class="em em-angry"></i>

                                                                    <i class="em em-astonished"></i>

                                                                    <i class="em em-blush"></i>

                                                                    <i class="em em-disappointed"></i>

                                                                    <i class="em em-worried"></i>

                                                                    <i class="em em-kissing_heart"></i>

                                                                    <i class="em em-rage"></i>

                                                                    <i class="em em-stuck_out_tongue"></i>

                                                                </div>

                                                            </li>

                                                        </ul>

                                                    </div>

                                                    <div class="right-pst-meta">

                                                        <a href="#" title="" class="blu">New</a>

                                                        <div class="users-thumb-list">

                                                            <a href="#" title="" data-toggle="tooltip" data-original-title="Anderw">

                                                                <img src="images/resources/userlist-1.jpg" alt="" />  

                                                            </a>

                                                            <a href="#" title="" data-toggle="tooltip" data-original-title="frank">

                                                                <img src="images/resources/userlist-2.jpg" alt="" />  

                                                            </a>

                                                            <a href="#" title="" data-toggle="tooltip" data-original-title="Sara">

                                                                <img src="images/resources/userlist-3.jpg" alt="" />  

                                                            </a>

                                                            <a href="#" title="" data-toggle="tooltip" data-original-title="Amy">

                                                                <img src="images/resources/userlist-4.jpg" alt="" />  

                                                            </a>

                                                            <a href="#" title="" data-toggle="tooltip" data-original-title="Ema">

                                                                <img src="images/resources/userlist-5.jpg" alt="" />  

                                                            </a>

                                                            <span><a title="" href="#">24+ more</a> liked</span>

                                                        </div>

                                                    </div>

                                                    <div class="number">

                                                        <span class="plus" onClick={() => addVotes()}><i class="fa fa-angle-up"></i></span>                                                    

                                                        <input type="text" value="0"/>

                                                        <span class="minus" onClick={() => decreaseVotes()}><i class="fa fa-angle-down"></i></span>

                                                    </div>

                                                </div>

                                            </div>

                                            } else {

                                                console.log("none")

                                            }

                                                           

                                        })}
)