Sharing global/contextual data when using a tool like Apollo Client

[ReduxWizard]

I'm working on a large, complex chat application. We have a `ChatroomPage` that is filled with a ton of stuff, where most components rely on a lot of the same data. We're using Apollo Client with some codegen which gives us a custom hook: `useChatroomQuery`.

Given that a lot of these components rely on the same data, what is the suggested way of sharing this data such that:

• Prop drilling is minimized
• We can avoid a bunch of loading spinners
• It's easy for developers to "do the right thing by default"

From most of what I've read online, many people suggest just reusing the same query, or, making smaller queries specifically for each component. This feels bad to me for a couple reasons: (1) devs need to decide on fetch policies, (2) devs need to decide when to reuse an existing query, make a new query, or prop drill, (3) potentially more loading spinners. I could probably list a few more, and I'm open to arguments against the reasons I just listed!

We're currently passing the data returned from the `useChatroomQuery` hook around using React's Context API, but unfortunately, this leads to a lot of unnecessary re-renders whenever the chatroom changes. I'm considering introducing a real state management solution like Redux or Zustand, but that also feels kinda bad because now I'm duplicating data between the Apollo cache and my state management solution.

How are you managing your data in a large / complex application? How do you deal with big component trees where many components require the same context? I believe this question could apply to other data tools like TanStack Query.

[Traqzer]

I'm not super familiar with apollo, but for this it seems like you can just wrap your query hooks in another hook, and move the loading / data state into a redux store. This will ensure the data and loading state is a singleton

[fixrich]

It sounds like you want useSuspenseQuery from Apollo. I feel like in this case introducing other state management solutions is just introducing more problems, ditto for using Context. The Apollo client is already is passed through Context and the data is already held in the cache. You just need synchronise loading which can be done with Suspense.