Expose `useFragment` from Apollo client core as `watchFragment`

[vigie]

Hi @alessbell 👋 it was good meeting you at Summit this week. Myself and @alvaro450 spoke with you about the following. Tagging @benjamn also as suggested:

TL;DR We (VMware) are an Angular shop. We need equivalent functionality to the React useFragment hook. Can this be back ported into core as something equivalent to watchQuery exposing an observable via a valueChanges property?

Why?

As you know, useFragment is a highly valuable feature, ideally it should be available for use by all frameworks.

In our use case, we currently pair components with queries. These queries are often highly similar but not quite identical. This leads to narrow cache misses and lots of redundant fetching at the data layer. We can solve this by pushing the queries up the hierarchy to smart container components that compose queries from fragments exported by descendant components (a pattern we were exposed to at Summit this week), but we don't want to do this if it results in the need for prop drilling. watchFragment - a way to retrieve an observable of just the relevant fragment directly from the client, would solve this.

Prior Art/Discussion

Lots of history here and I'm sure more that I am unaware of. Here is a similar feature request open and closed in 2017 before useFragment became a thing.

Thanks for your consideration (we'd be happy to work on this if appropriate).

[alessbell]

Hi @vigie 👋 Likewise, it was great to see you and @alvaro450 at Summit! Thanks for opening this issue.

I'd like to look at whether a thin wrapper around cache.watch, similar to the useFragment implementation, would make sense here in the Angular client. I'm currently dealing with slow plane WiFi but will take a look early next week and report back :) Have a good weekend!

[vigie]

OK, thanks. When you have time I would like to understand better why you think this would not be an appropriate feature to add to core itself.

[alessbell]

Appreciate your patience, @vigie - the team is aligned that we'd like to make this a core API. I don't have a timeline for you yet, but I'll transfer this issue over to our Apollo Client repository to avoid creating a new issue there. Thanks!

[vigie]

Great news thanks @alessbell, let us know if we can help it along

[alessbell]

Hi @vigie 👋 I've got a draft PR open here https://github.com/apollographql/apollo-client/pull/11465 and just cut a release you can try out with npm i @apollo/client@0.0.0-pr-11465-20240125173354.

There are a couple more tests and docs I'll need to add there before moving it out of draft, but it's ready for anyone to try out (you'll see the PR also swaps out the internals of the React useFragment hook to use watchFragment). I'd love any feedback you might have, thanks!

[vigie]

Hi @alessbell thanks for the update, unfortunately I haven't had a lot of time to work on GQL stuff recently, but will definitely get back to this at some point and will let you know. Excited to try out the pattern that this will enable for us.

[jmcmichael]

The ability to watch fragments would be very helpful throughout our application. I'm looking forward to implementing more elegant solutions to a variety of cache issues we've encountered, and hoping @alessbell's PR is released soon. Thank you for your work on apollo-angular!

[alessbell]

Hi @jmcmichael 👋 CIViC looks like a fascinating project, thanks for sharing! It's always so interesting for our team of maintainers to see the places Apollo Client is being used out in the world :)

If you'd like to try watchFragment out directly, it's available in the 3.10 release candidate which you can install via npm i @apollo/client@next and will be released next week. Cheers!

[jmcmichael]

Excellent, thank you! I'll check out the update and give watchFragment a spin.

[alessbell]

Folks on this thread may also be interested to follow my PR https://github.com/kamilkisiela/apollo-angular/pull/2226 over on the apollo-angular repo that adds watchFragment support there :)

Since watchFragment is available in a prerelease that will soon be stable, I'm going to close this issue. Thanks all!

[github-actions[bot]]

Do you have any feedback for the maintainers? Please tell us by taking a one-minute survey. Your responses will help us understand Apollo Client usage and allow us to serve you better.

[github-actions[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. For general questions, we recommend using StackOverflow or our discord server.

[alessbell]

watchFragment support has been released in apollo-angular v7.1.1 🎉