Drizzle cacheCall is not updating data correctly

Question

I have a react component which is interacting with a solidity contract via drizzle. I store a cacheCall index in the constructor:

this.opcTokenCacheCallIndex = context.drizzle.contracts.OPCToken.methods.balanceOf.cacheCall(this.props.accounts[0], {from: this.props.accounts[0]});

Then, whenever the component updates, I use this index to check the drizzle store

const opcBalance = await this.opcTokenCacheCallIndex.call(this.props.accounts[0], {from: this.props.accounts[0]});

Now when I log out opcBalance I see the balance associated with accounts[0]. I then call another method on my app which I know causes the balance of accounts[0] to increase, but I do not see this reflected in opcBalance - which stays the same. I know that the balance has definitely increased because:

1) When I refresh the page and log out opcBalance again - I now see that it has increased

2) I have thoroughly tested the method I am calling which I expect to increase the balance

Given this, I am sure the transaction I am calling is successfully increasing the token balance, but truffle is not reflecting this updated information, even though I am using cacheCall. Am I misunderstanding the use case of cacheCall? And if so, how can I continuously poll the blockchain for fresh data?

Answer 1

I am working with drizzle too and I came across this guide

In summary, you need to get the state of a contract as a prop, but also get the drizzle variable in order to make calls.

To check updates to the drizzle store, try the following:

constructor(props, context) {
  super(props);
  this.contracts = context.drizzle.contracts
  this.opcTokenCacheCallIndex = this.contracts.OPCToken.methods.balanceOf.cacheCall(this.props.accounts[0], {from: this.props.accounts[0]})
}

render() {
  var data = this.props.OPCToken.balanceOf[this.opcTokenCacheCallIndex].value
  return (
    <div>
      {data}
    </div>
  )
}