drizzle not updating events properly - duplicate events

Question

drizzle not updating events properly - duplicate events

Closed this issue 6 years ago · 3 comments

I'm facing a peculiar problem while rendering events in a component using drizzle. When a new event is created and is updated in the events array of drizzle (drizzleState.contracts.MyContract.events), it initially shows loads of duplicate events in the array like below:

0: {logIndex: 0, transactionIndex: 0, transactionHash: "0xf45de779dc613beb7dbf548fb1a811711ec6225c30376aa14cb8989459cda146", blockHash: "0xbba89434b400d1530289369e4fec52e423ac8699f45bf19ae8004755fcdea278", blockNumber: 39, …}
1: {logIndex: 0, transactionIndex: 0, transactionHash: "0x1cd02901ca748218a0037a07294d30dc8e00a05b1e9aebeed013ffff468c1b82", blockHash: "0x08201e408f4080c1ef35ce86ace61130faf0fe821b89187969c7ae7e40b57e8a", blockNumber: 37, …}
2: {logIndex: 1, transactionIndex: 0, transactionHash: "0x1cd02901ca748218a0037a07294d30dc8e00a05b1e9aebeed013ffff468c1b82", blockHash: "0x08201e408f4080c1ef35ce86ace61130faf0fe821b89187969c7ae7e40b57e8a", blockNumber: 37, …}
3: {logIndex: 2, transactionIndex: 0, transactionHash: "0x1cd02901ca748218a0037a07294d30dc8e00a05b1e9aebeed013ffff468c1b82", blockHash: "0x08201e408f4080c1ef35ce86ace61130faf0fe821b89187969c7ae7e40b57e8a", blockNumber: 37, …}
4: {logIndex: 0, transactionIndex: 0, transactionHash: "0x0bfb0418d11eb77a8874f5f294fe83964aecdbe181f5b05c5335f625ead59d9c", blockHash: "0xf03598bdfd7de5c1e99c5ce3f429c989b515ccc5043de919956d5ef7c7ecbc98", blockNumber: 40, …}
5: {logIndex: 0, transactionIndex: 0, transactionHash: "0x0bfb0418d11eb77a8874f5f294fe83964aecdbe181f5b05c5335f625ead59d9c", blockHash: "0xf03598bdfd7de5c1e99c5ce3f429c989b515ccc5043de919956d5ef7c7ecbc98", blockNumber: 40, …}
6: {logIndex: 0, transactionIndex: 0, transactionHash: "0x0bfb0418d11eb77a8874f5f294fe83964aecdbe181f5b05c5335f625ead59d9c", blockHash: "0xf03598bdfd7de5c1e99c5ce3f429c989b515ccc5043de919956d5ef7c7ecbc98", blockNumber: 40, …}
7: {logIndex: 0, transactionIndex: 0, transactionHash: "0x0bfb0418d11eb77a8874f5f294fe83964aecdbe181f5b05c5335f625ead59d9c", blockHash: "0xf03598bdfd7de5c1e99c5ce3f429c989b515ccc5043de919956d5ef7c7ecbc98", blockNumber: 40, …}
8: {logIndex: 0, transactionIndex: 0, transactionHash: "0x0bfb0418d11eb77a8874f5f294fe83964aecdbe181f5b05c5335f625ead59d9c", blockHash: "0xf03598bdfd7de5c1e99c5ce3f429c989b515ccc5043de919956d5ef7c7ecbc98", blockNumber: 40, …}
9: {logIndex: 0, transactionIndex: 0, transactionHash: "0x0bfb0418d11eb77a8874f5f294fe83964aecdbe181f5b05c5335f625ead59d9c", blockHash: "0xf03598bdfd7de5c1e99c5ce3f429c989b515ccc5043de919956d5ef7c7ecbc98", blockNumber: 40, …}
10: {logIndex: 0, transactionIndex: 0, transactionHash: "0x0bfb0418d11eb77a8874f5f294fe83964aecdbe181f5b05c5335f625ead59d9c", blockHash: "0xf03598bdfd7de5c1e99c5ce3f429c989b515ccc5043de919956d5ef7c7ecbc98", blockNumber: 40, …}
11: {logIndex: 0, transactionIndex: 0, transactionHash: "0x0bfb0418d11eb77a8874f5f294fe83964aecdbe181f5b05c5335f625ead59d9c", blockHash: "0xf03598bdfd7de5c1e99c5ce3f429c989b515ccc5043de919956d5ef7c7ecbc98", blockNumber: 40, …}
12: {logIndex: 0, transactionIndex: 0, transactionHash: "0x0bfb0418d11eb77a8874f5f294fe83964aecdbe181f5b05c5335f625ead59d9c", blockHash: "0xf03598bdfd7de5c1e99c5ce3f429c989b515ccc5043de919956d5ef7c7ecbc98", blockNumber: 40, …}
length: 13
__proto__: Array(0)

The above code block is the brwser console log of the events array which shows duplicate items starting from index number 5 to 12. On refreshing the page (pressing F5), the duplicate events dissappear and the correct values show up:

 0: {logIndex: 0, transactionIndex: 0, transactionHash: "0xf45de779dc613beb7dbf548fb1a811711ec6225c30376aa14cb8989459cda146", blockHash: "0xbba89434b400d1530289369e4fec52e423ac8699f45bf19ae8004755fcdea278", blockNumber: 39, …}
1: {logIndex: 0, transactionIndex: 0, transactionHash: "0x0bfb0418d11eb77a8874f5f294fe83964aecdbe181f5b05c5335f625ead59d9c", blockHash: "0xf03598bdfd7de5c1e99c5ce3f429c989b515ccc5043de919956d5ef7c7ecbc98", blockNumber: 40, …}
2: {logIndex: 0, transactionIndex: 0, transactionHash: "0x1cd02901ca748218a0037a07294d30dc8e00a05b1e9aebeed013ffff468c1b82", blockHash: "0x08201e408f4080c1ef35ce86ace61130faf0fe821b89187969c7ae7e40b57e8a", blockNumber: 37, …}
3: {logIndex: 1, transactionIndex: 0, transactionHash: "0x1cd02901ca748218a0037a07294d30dc8e00a05b1e9aebeed013ffff468c1b82", blockHash: "0x08201e408f4080c1ef35ce86ace61130faf0fe821b89187969c7ae7e40b57e8a", blockNumber: 37, …}
4: {logIndex: 2, transactionIndex: 0, transactionHash: "0x1cd02901ca748218a0037a07294d30dc8e00a05b1e9aebeed013ffff468c1b82", blockHash: "0x08201e408f4080c1ef35ce86ace61130faf0fe821b89187969c7ae7e40b57e8a", blockNumber: 37, …}
length: 5
__proto__: Array(0)

This is causing the render to show duplicate values which is mitigated only when an extra refresh button is pressed in the browser. Is this a bug or am i missing something? Thanks.

Answer 1 · 2019-02-22T16:13:19.000Z

Hi @kombos, can you provide a link to your repo or the smart contract code so we can duplicate? Thank you!

Answer 2 · 2019-03-08T16:23:33.000Z

Hey @kombos, we were unable to reproduce this, but if you can provide a repo or more details please reopen and we'll be happy to help!

Answer 3 · 2019-03-09T09:17:03.000Z

I'm not sure how to share my complete project, but rather, would it be possible for you to please forward me some good examples on how to use drizzle events? that would be very good for me to analyze. Thanks.