I’m writing to get feedback from other users of
@apollo/client, especially in a
React application, mostly using
I’ve been able to build some amazing experiences because of the flexibility of
useQuery with its
cache-first approach. I am however getting to a point where scalability is a concern.
@apollo/client for everything on my e-commerce application. On the main screen, there are rows of
Items, each of which has many components and variations. Users can page through rows of
Items, so 100s can be loaded.
Item is a component with 30+
useQuery invocations. We fetch price, attributes, translated strings, and many other pieces.
This usage creates quite a few Long Tasks in the browser as we’re loading item cards, with cache access and broadcasts of new query results being the major bottleneck.
In this image, the light blue color is all work within
@apollo/clientafter our react app has hydrated.
My questions for the forum are:
- Is this happening to others?
- Are we misunderstanding how to use
- Are there techniques we can use to improve perf that keep the flexibility we’ve come to enjoy?