Drizzle Contract call returns unexpected object

Question

I have a view function in my smart contract that returns a uint.

In the Truffle Drizzle javascript page I make the call when the page loads:

this.contracts.TheContract.methods.getNumber.call()

I would have expected a Big Number Object. instead:

arguments:[]
call: ƒ () 
encodeABI: ƒ () 
estimateGas:ƒ ()
send: ƒ ()
_ethAccounts:
Accounts {_requestManager: RequestManager, givenProvider: MetamaskInpageProvider, providers: {…}, _provider: MetamaskInpageProvider, …}
_method:
{constant: true, inputs: Array(0), name: "getNumber", outputs: Array(1), payable: false, …}
_parent:
Contract {_requestManager: RequestManager, givenProvider: MetamaskInpageProvider, providers: {…}, _provider: MetamaskInpageProvider, …}
__proto__:Object

If I make a call on that object it returns a promise; not what I was expecting for a standard call.

cacheCall returns 0x0; an empty address? huh? Has anyone been able to use truffle and drizzle without having to fallback to standard web3?

ideas?

Thanks

Answer 1

The standard call return a promise in web3 as well. So that's the expected result.

myContract.methods.myMethod([param1[, param2[, ...]]]).call(options[, callback])

either you use the callback method or the promise you will get the expected result

// using the callback
myContract.methods.myMethod(123).call({from: '0xde0B295669a9FD93d5F28D9Ec85E40f4cb697BAe'}, function(error, result){
    ...
});

// using the promise
myContract.methods.myMethod(123).call({from: '0xde0B295669a9FD93d5F28D9Ec85E40f4cb697BAe'})
.then(function(result){
    ...
});

// async / await
const result = await myContract.methods.myMethod(123).call({from: '0xde0B295669a9FD93d5F28D9Ec85E40f4cb697BAe'})

ref

Answer 2

If you are using Drizzle, your best option is to use cacheCall(). As has been explained in other answers the standard call in web3 will return a promise instead of the return value you might expect from the contract code. This is because the call is performed asynchronously at execution and the value isn't known immediately. Handling a promise has been explained well by other answers, so I won't write it again here.

Drizzle's cacheCall() is more powerful, it tells Drizzle that you would like to keep track of the data in the Drizzle store. Drizzle will monitor the blockchain for transactions that interact with your contract and automatically update the value in the store if the contract's data is modified. The return value from cacheCall() isn't the value from the contract, instead it returns key corresponding to the value in the Drizzle store. In your example, the store key is 0x0. To view the value of getNumber, you have to retrieve it from the drizzle store. You will find it at this.props.TheContract.getNumber['0x0'] when you use it in your Dapp's render() function. Any time a transaction to your contract would modify this value, drizzle will automatically change it in the store, so the display will be updated immediately. This guide has been immensely useful in explainging how to use Drizzle calls. It explains much more in depth how and where to use this feature.