Automatically import fragment used by the children components in the root query

[ajubin]

Is your feature request related to a problem? Please describe.

Hello,

I'm using the preset client to generate types and using fragment do declare data dependency of some components.

However, I still find there's room for improvements for the DX. Here's the problem I have:

I have a Page that uses a component ProfileCards. This component declares its dependency with a fragment.
This is great, it allows to generate types for the component.

What I find annoying is: I need to include the fragment name in Page query.

For a simple page it's ok to do this, but when the page gets more complex with many components having their own components declaring their own data dependency with fragment, it becomes rapidly a mess.
For instance, if I remove a component from my page, I need also to remove it's fragment from the page's query.

Describe the solution you'd like

What I'd love is :

• to still declare the data dependency of a component right in the component
• stop giving a unique name to the fragment
• automatically include or remove the fragment in the page query when data dependency of my component tree changes

Describe alternatives you've considered

I've looked at useFragment from relay but they've got the same limitations (see: https://relay.dev/docs/guided-tour/rendering/fragments/)

I know there's many obstacles to be able to do it, for instances:

• If my fragment can be used on multiple fields of my query, how to know on which one to add it ?
• If I have multiple query on my Page, on which query should the fragments be added ?
• I must forget lot of edge-cases ...

I'm wondering if y'all are having the same problem, and what's your way to fix it (or avoid it) ?

Also, thanks a lot for the amazing work you're doing, using fragment made my life easier 🙇‍♂️🥰

[EDIT]
To help me detect unused-fragments, I will try to use those eslint rules https://the-guild.dev/graphql/eslint/rules , especially no-unused-fragments