search

trufflesuite / drizzle-legacy

Reactive Ethereum datastore for dapp UIs.
http://truffleframework.com/docs/drizzle/getting-started
MIT License
503 stars 128 forks source link

drizzle not updating events properly - duplicate events #184

Closed kombos closed 5 years ago

kombos commented 5 years ago

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.

OnlyOneJMJQ commented 5 years ago

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

OnlyOneJMJQ commented 5 years ago

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!

kombos commented 5 years ago

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.