How to get the returned value of a smart contract function when it called by using cacheSend() in drizzle

Question

I just tried to build a simple DApp using truffle, react and drizzle. My question is how to get the returned value of a smart contract function when it called by using cacheSend() in drizzle? As expected when Calling cacheCall() and cacheSend() functions on a contract, they should send the desired transaction and return a corresponding transaction hash.

In my code, cacheCall() sends the desired transaction and returns the corresponding transaction hash and when I console.log it it shows on the console. so there is no problem with cacheCall()

// this works fine
const dataKey1 = contract.methods.GetNumber.cacheCall();
console.log(dataKey1);

But cacheSend() sends the desired transaction but does not return the corresponding transaction hash !! Instead it returns the value 0 when I console.log the cacheSend() return value

// this does not work
const dataKey2 = contract.methods.setNumber.cacheSend(3);
console.log(dataKey2);

Here is the smart contract:

pragma solidity ^0.5.0;

contract Test {

    uint public number = 10;

    function setNumber(uint _x) public returns (uint)
    {
        number = number+_x;

        return number + 5;
    }

    function GetNumber() public view returns (uint)
    {
        return number;
    }
}

The front end should looks like the following:

The return value of GetNumber function = 13 
The return value of setNumber function = 18

This is the code

import React from "react";

class TestDrizzle extends React.Component {
  state = { dataKey1: null, dataKey2: null };

  componentDidMount() {
    const { drizzle, drizzleState } = this.props;
    const contract = drizzle.contracts.Test;

    // let drizzle know we want to call the `GetNumber` method with `value`
    // this works fine
    const dataKey1 = contract.methods.GetNumber.cacheCall();
    console.log(dataKey1);

    // let drizzle know we want to call the `setNumber` method with `value`
    // this does not work
    const dataKey2 = contract.methods.setNumber.cacheSend(3);
    console.log(dataKey2);


    this.setState({ dataKey1, dataKey2 });
  }

  render() {
    // get the contract state from drizzleState
    const { Test } = this.props.drizzleState.contracts;

    // using the saved `dataKey1`, get the return value of GetNumber function
    const result_1 = Test.GetNumber[this.state.dataKey1];

    // using the saved `dataKey2`, get the return value of setNumber function
    const result_2 = Test.setNumber[this.state.dataKey2];

    return (
      <p>
        The return value of GetNumber function = {result_1 && result_1.value}{" "}
        {<br />}
        The return value of setNumber function = {result_2 && result_2.value}
      </p>
    );
  }
}

export default TestDrizzle;

I would be grateful if you could have a look at my project https://github.com/fbalwy/Drizzle-tutorial.git

Answer 1

Regarding // this does not work const dataKey2 = contract.methods.setNumber.cacheSend(3); console.log(dataKey2);

So, sending is a little bit different, because send will be passed through the cache to blockchain. So cacheCall will do it directly.

The drizzle api is like web3 and therefore you also need to pass an object from whom you like to send it. I assume you running your example on ganache. Then you may use dizzle.accounts as an array of the first 10 accounts genereate by ganache. Normaly account[0] is the contract owner

So if you run this on an official testnetwork you need to set here the right owner address.

// this does not work const dataKey2 = console.log(dataKey2); contract.methods.setnumber.cacheSend(data, { from: drizzleState.accounts[0], })

dataKey2 is then the indexnumber of drizzleState to find the transaction information