How to share generated fragments across multiple projects?

[sjahan]

Hi,

We use GraphQL codegen to generate our GQL client with preset and inlined GQL in our (React) components, as described in the article https://the-guild.dev/blog/unleash-the-power-of-fragments-with-graphql-codegen and so far, it is working great.

To reuse our code, we are building a common/shared components library so that our final apps can keep consistent UI and behavior, so we have the following structure:

• common-lib with components and their query fragments, codegen is installed in this project.
• app-1 with custom app-1 components and their query fragments, and top components that uses all of the query fragments to perform only one GQL query.
• app-2 with custom app-2 components and their query fragments, and top components that uses all of the query fragments to perform only one GQL query.
• etc...

We want to be able to use components from common-lib inside app-1, so our top components must be able to use fragments from common-lib, but of course, actually, codegen crashes because it does not know anything about these fragments (since these fragments have been processed by the common-lib codegen and not the app-1 codegen).

What is the best practice to handle this case?

Is there a way to register already generated fragments (from our common-lib) inside the codegen configuration of our final apps ?

Thank you in advance.

--

Edit

A first simplistic approach, maybe not the best, could be to just read the files inside our common-lib by including them:

In our codegen config:

documents:
  - ./src/**/*.tsx
  - ./node_modules/common-lib/dist/**/*.js

Although it does not work, most likely because of the transpilation:

const test = graphql(`
  fragment TestObject on objects {
    id
  }
`);

then becomes:

const gql_1 = require("../generated/gql");
const test = (0, gql_1.graphql)(`
  fragment TestObject on objects {
    id
  }
`);

Is there a simple way to make the transpiled version work with the codegen?

[sjahan]

We actually needed to switch the transpilation of our modules to ESM for another unrelated matter and it turns out that the code is far less rewritten, and the codegen is actually able to read it successfully, so the simplistic approach will work for now!