0

I have a data visualization page that has a lot of graphs, maps, etc. to visualize data. I approached the problem by keeping each visualization its own self contained component. So now I have ~20 components all executing useQuery which slows the load time due to the burden.

However many of the visualizations are not in the view port so it slows the execution of the ones that are. So those which show are loading data longer than expected.

I’ve been looking for a way to have the ones that are in view port load first and only load as you scroll down. That seems promising but I’m wondering if it is the right approach or if there is an easier way to prioritize the Apollo queries in components at the top of the page.

I have been looking for other people that have this issue but I haven’t seen much and Apollo docs don’t really address it as they tend to be around one component running one or two queries.

dhj
  • 4,780
  • 5
  • 20
  • 41
mbn
  • 3
  • 1
  • There are some good options for you here: https://stackoverflow.com/questions/53757229/reactjs-how-to-render-a-component-only-when-scroll-down-and-reach-it-on-the-page – Jesse Carter Dec 09 '20 at 17:14

1 Answers1

0

Have a look at this repo.

Use the skip option in useQuery to not fetch unless in viewport.

Probably set default width/height for each graph component and some placeholder image.

Abraham Labkovsky
  • 1,771
  • 6
  • 12
  • Thanks, I had stumbled upon: [react-intersection-observe](https://www.npmjs.com/package/react-intersection-observer). Both solutions take the same approach of not rendering until in view port. It worked well and I guess this is the only (best) approach to solving this issue. – mbn Dec 10 '20 at 18:25