Add support for removing fragments in a payload

[AydanGaite]

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

Currently I am working on a project where we've adhered to fragment co-location. It seems like this approach has been well adopted and recommended by the community, but now, after refactoring our codebase, we've encountered problems with our query complexity, due to the large payloads we send to our backend.

For example, take the example payload from below

query users {
   users {
      ...userInfo
   }
}

fragment userInfo on User {
   ...basicUserInfo
   ...moreUserInfo
}

fragment basicUserInfo on User {
   id
   name
}

fragment moreUserInfo on User {
   # ... more fields here
   discussions {
      ...discussions
   }
}

fragment discussions on Discussions {
   messages {
      ...discussionMessages
   }
}

fragment discussionMessages on Messages {
   # ... so on and so forth
}

Querying with our generated code includes all fragments the query requires, and exponentially grows the overall size of our query and the complexity, which leads to slower response times. This is the codegen config we're using for reference.

import type { CodegenConfig } from "@graphql-codegen/cli";

const config: CodegenConfig = {
  overwrite: true,
  schema: process.env.SCHEMA_PATH || "http://localhost:4000/graphql",
  documents: [
    "src/**/*.gql",
  ],
  generates: {
    "src/gql/index.tsx": {
      plugins: [
        "typescript",
        "typescript-operations",
        "typescript-react-apollo",
      ],
    },
    "./graphql.schema.json": {
      plugins: [
        "introspection",
      ],
    },
  },
};

export default config;

Describe the solution you'd like

I'm wondering if there's a feature or plugin we could use to reduce the overall size of our query by stripping away the fragments in the generation process. ie. the payload from above would get transformed into this (which at a large scale would exponentially reduce our payload size).

query users {
   users {
      id
      name
      discussions {
         messages {
            # ... so on and so forth
         } 
      } 
   }
}

Describe alternatives you've considered

I'm aware that there are a few options to accomplish something similar with types with configuration options like flattenGeneratedTypes but I cannot seem to find the equivalent for the actual payload. I've also looked at relay-operation-optimizer which seems to describe what I want to do, but the documentation quite frankly is too vague, and doesn't seem to work at all anymore (I saw in another issue that this was removed in favor of implementing its functionality directly in the codegen module itself).

[AleksandrSerov]

@AydanGaite Have you found any solution? I'm also looking for a solution to inline fragments in request payload

[se-omar]

bump