How to use subscriptions together with preloadQuery?

Help
,
1

Hello,

What is the suggested way to mix preloadQuery and subscriptions? I’m using react-router and start fetching as soon as I navigate to the page. Also I want to subscribe to latest updates

As I can see there is subscribeToMore for regular useQuery hook but there is none in query ref handlers, only fetchMore. Am I supposed to use useSubscription?

Thanks in advance for any tips

2

Hi @misha-erm :wave: to my knowledge we don’t have a “preloadSubscription” feature. Since subscriptions and queries both share the normalized cache, though, you could consider using preloadQuery to populate your cache with data that you know you’ll be subscribing to.

3

That’s what I’m doing right now

But I know that there is this handler for pagination

const { fetchMore } = useQueryRefHandlers(queryRef);

so my initial thought was that there might also be something like

const { subscribeToMore } = useQueryRefHandlers(queryRef);
4

Would that subscribeToMore effectively turn the query into a subscription for the developer?

5

Sorry, not sure I understand, pretty new to Apollo (

I mean something like this for https://www.apollographql.com/docs/react/development-testing/static-typing/#fetchmore-and-subscribetomore . For regular queries from useQuery we have fetchMore and subscribeToMore. From what I understand subscribeToMore handles merging data

But for preloaded queries we have only fetchMore

6

Ah okay, sorry for the confusion. I understand what you’re saying now :slight_smile: bear with me, it’s a busy week so I’m not sure when I can get back to you with a recommendation but hopefully soon!

7

@misha-erm the team agrees that this is something we should add. I opened a ticket here:

Thanks again for bringing it to our attention!

1 Like
8

Hey @JeffAuriemma , love the package and the work of the team! Just wanted to bump and keep tabs on this.

I’m currently refactoring some waterfall like components that are using useSuspenseQuery and this request would solve the issue without a doubt. We already have heaps of reducers for certain data that run through subscribeToMore and it would be awesome to be able to use those without recreating them for individual components.

2 Likes
9

Hey @taylor-b :wave:

Sorry for the late reply! I’ve got a PR open (Add `subscribeToMore` function to `useBackgroundQuery` and `useQueryRefHandlers` by jerelmiller · Pull Request #11923 · apollographql/apollo-client · GitHub) that will add subscribeToMore to both useBackgroundQuery and useQueryRefHandlers. This should release with the next minor 3.11.0 when thats ready to go. Hope you find it useful!

1 Like
10

Hey @jerelmiller , what a legend! I saw a PR from you for something similar before and was hoping you’d swoop in on this one. Greatly appreciate it, it will be super useful with some optimisation changes we are making in our app!

1 Like