Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add support for removing fragments in a payload #9922

Open
AydanGaite opened this issue Apr 12, 2024 · 0 comments
Open

Add support for removing fragments in a payload #9922

AydanGaite opened this issue Apr 12, 2024 · 0 comments

Comments

@AydanGaite
Copy link

AydanGaite commented Apr 12, 2024

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).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant