@swc-contrib/plugin-graphql-codegen-client-preset and Fragments

[socnacom]

Hi !
I've tried a simple POC.
It contains 2 queries and 1 fragment :

export const Country_DetailsFragment = graphql(`
  fragment Country_DetailsFragment on Country {
    phone
    continent {
      code
    }
    currency
  }
`);

export const Countries_Query_Document = graphql(`
  query Countries {
    countries {
      name
      ...Country_DetailsFragment
    }
  }
`);

export const Languages_Query = graphql(`
  query Languages {
    languages {
      code
      name
      native
      rtl
    }
  }
`);

If i use following config :

const config: CodegenConfig = {
  overwrite: true,
  schema: './apps/front/src/schema.gql',
  documents: './apps/front/src/**/*.tsx',
  ignoreNoDocuments: true,
  generates: {
    './apps/front/src/gql/': {
      preset: 'client',
      config: {
        documentMode: 'string',
      },
    },
  },
};

(no persisted document in this config yet).

i generate code, then build my front using vite with that config :

    react({
      jsxImportSource: '@emotion/react',
      plugins: [
        [
          '@swc-contrib/plugin-graphql-codegen-client-preset',
          {
            artifactDirectory: './src/data-layer/gql',
            gqlTagName: 'graphql',
          },
        ],
      ],
    }),

I get these bits in my bundle :

const mp=new yr(`
    fragment Country_DetailsFragment on Country {
  phone
  continent {
    code
  }
  currency
}
    `,{fragmentName:"Country_DetailsFragment"}),vp=new yr(`
    query Countries {
  countries {
    name
    ...Country_DetailsFragment
  }
}
    fragment Country_DetailsFragment on Country {
  phone
  continent {
    code
  }
  currency
}`),pp=new yr(`
    query Languages {
  languages {
    code
    name
    native
    rtl
  }
}
    `)

I can see the 2 queries and the fragment as well. That's OK.

Now, if I add :

        persistedDocuments: {
          hashAlgorithm: 'sha256',
          mode: 'replaceDocumentWithHash',
        },

to my codegen config,

I execute codegen again, and then again build my app, I still get this bit un my bundle :

const mp=new yp(`
    fragment Country_DetailsFragment on Country {
  phone
  continent {
    code
  }
  currency
}
    `

Queries have disappeared as expected.
But I still see my fragment, and don't understand why.
It shouldn't be bundled in my app anymore.

Generated persisted-documents.json includes everything expected :

{
  "1f7ee39669428752e1de354fd626ddf65e8fc919bfc2a45ea1a14da98ef8e050": "fragment Country_DetailsFragment on Country { continent { code } currency phone } query Countries { countries { name ...Country_DetailsFragment } }",
  "879d1a870d6aed4dcc2435f59da292cfbe92dc64f35e7ce6f126511fafab1937": "query Languages { languages { code name native rtl } }"
}

I can share a reproduction repo if needed.
I don't know if it's an issue or not, maybe i'm missing something.

Any help will be greatly appreciated !

[anntnzrb]

The fragment is bundled because standalone fragments with replaceDocumentWithHash mode still retain their full document strings in exports. Solution: Don't export standalone fragments—define them inline within queries, or switch to documentMode: 'string' without the SWC/Babel plugin. See /packages/presets/client/src/babel.ts for how the plugin replaces graphql() calls.

[socnacom]

Hi ! Thanks for your reply.

I use standalone fragments because i've been following fragment masking strategy recommended with client preset.
My main project follows these guidelines so i won't be able to start this refactor.

If I remove SWC plugin, i'll see all graphql documents again in my bundle

My goal was :

• to send persisted queries only
• to reduce my bundle as much as possible (i guess i don't need my documents when the only thing sent is the hash ?)

I thought this plugin would allow me to achieve these 2 targets ?

If not, what would you recommend ?
Thanks

[socnacom]

are standalone fragments still needed when one uses strict persisted documents ?
as we can see in persisted-documents.json, they are included in queries that use it.

couldn't we just remove them from generated graphql.ts or, with the help of babel / swc plugin, from bundle ?
Two examples :

      presetConfig: {
        fragmentMasking: { unmaskFunctionName: 'getFragmentData' },
        persistedDocuments: {
          hashAlgorithm: 'sha256',
          mode: 'replaceDocumentWithHash',
          removeStandaloneFragment: true,
        },
      },

or

plugins: [
    react({
      plugins: [
        [
          '@swc-contrib/plugin-graphql-codegen-client-preset',
          { artifactDirectory: './src/gql', gqlTagName: 'graphql', removeStandaloneFragment: true, },
        ],
      ],
    }),
  ],

are there edge cases that i'm not aware of ?