Multiple re-renders due to decorators that fetch data using Apollo

[mikemurray]

Issue

The decorators, withTag withCatalogItems specifically on the tag page, cause the component to rerender twice. This isn't a huge issue in itself; however, add tracking and now we get multiple duplicate events triggered in Segment with different data.

First, the data comes in with all of the products for the page without filtering, then the second event has the list with the filtering by tag.

Question

Should we start considering ways to combine queries for data for into a single query? This would be more in the spirit of GraphQL by making one request for everything we need for a page. Though, it would mean more bespoke queries that may only have a single

Reproduction

1. Create a segment account and get the API key. Add the key to the .env (see .env.example)
2. Start the app navigate to a tag grid
3. In the segment dashboard under sources > javascript > debugger see the events being tracked
4. If you refresh the tag page, you should see multiple Product List Viewed events being fired, once with all products, once with only the products for that tag page (if you have your data set up in a way that has many products in many tags)

[aldeed]

Assigned to @kieckhafer to see whether this is still reproducible

[kieckhafer]

Can confirm this is happening.

[willopez]

Seems to be a known issue, and a fix has been posted here: vercel/next.js#4734