How to name queries and where to place them?

I’m running into an issue with query naming and apollo client:codegen and was wondering how others name their queries and where they place them.

The issue: For each of my app’s screens I create separate queries. Let’s assume I want to fetch the profile on different screens. The intuitive name for the query would be the same for each screen: getProfile. Now apollo client:codegen does not allow this and errors with:

Error: ️️There are multiple definitions for the `getProfile` operation. Please rename or remove all operations with the duplicated name before continuing.

The Apollo team recomments keeping the queries close to the UI components that use them, since they often change together. I agree and that’s what I do, but I’d imagine other people have the same issue then.

How do you solve this?

  1. Having different names for the query on different screens e.g. getProfileForHomeScreen and getProfileForAccountScreen.
  2. Having a /graphql folder in your app, where you keep all the queries.
  3. This is a bug, and the issue above should not occur.
  4. Something different e.g. Query Components.

Looking forward to your thoughts.