Getting "Unknown fragment" errors for seemingly no reason

[efstajas]

Hey there,

I maintain a large-ish SvelteKit project that uses graphql-code-generator to render types using the near-operation-file preset. We define fragments for each component, nest them for nested components, and eventually import those fragments to build queries on the page level. This has worked great for us for months.

Today though, I went through some spring cleaning and upgraded a whole bunch of dependencies (incl. typescript, svelte, etc.), and I got everything to work again other than for some reason GQL type generation. It fails with Error 0: Unknown fragment "ProjectAvatar" in some random file. If I remove the ProjectAvatar fragment and manually copy its fields to the other fragment it errors on, it just complains about some other fragment in a different location. It's as if it just suddenly can't see external fragments anymore at all, even though we explicitly import them and interpolate them into the strings.

I tripled checked every conceivable reason for hours, looked into potential breaking changes in any related packages, but came up with nothing — I really don't get why it wouldn't work anymore. I'm also 99% sure that there are no errors in my queries and fragments, because when I npm i our previous set of dependencies, switch to the branch where I'm having this problem, and then run the codegen, it builds types fine. As soon as I npm i with the new set of packages, the problem is back. I even tried manually downgrading all the graphql-related files to the same version as before, and the problem somehow persists. There are also NO compiler errors anywhere in the project (apart from missing gql types ofc). I'm really at a loss here.

Since our setup really isn't all that unique, maybe someone could point me in the right direction?

Here's our codegen config:

import 'dotenv/config';
import { CodegenConfig } from '@graphql-codegen/cli';

const config: CodegenConfig = {
  overwrite: true,
  config: {
    nonOptionalTypename: true,
    dedupeFragments: true,
  },
  schema: [
    {
      [process.env.GQL_URL]: {
        headers: {
          Authorization: `Bearer ${process.env.GQL_ACCESS_TOKEN}`,
        },
      },
    },
  ],
  generates: {
    './src/lib/graphql/__generated__/base-types.ts': {
      plugins: ['typescript'],
    },
    './src/': {
      preset: 'near-operation-file',
      documents: ['src/**/!(*.generated).{ts,graphql,svelte}'],
      presetConfig: {
        folder: '__generated__',
        extension: '.generated.ts',
        gqlTagName: 'gql',
        fileName: 'gql',
        pruneGeneratedFiles: true,
        baseTypesPath: 'lib/graphql/__generated__/base-types.ts',
      },
      plugins: ['typescript-operations'],
      config: {
        dedupeFragments: true,
        namingConvention: {
          enumValues: 'keep',
        },
        useTypeImports: true,
      },
    },
  },
  hooks: {
    afterAllFileWrite: ['prettier --write'],
  },
};

export default config;

Here's the fragment def that it complains about (though as I said, if I remove ProjectAvatar from here, it just complains about a different fragment):

import { PROJECT_AVATAR_FRAGMENT } from '$lib/components/project-avatar/project-avatar.svelte';

export const DRIP_LIST_CARD_SUPPORTER_PILE_FRAGMENT = gql`
  ${PROJECT_AVATAR_FRAGMENT}
  fragment DripListCardSupporterPile on DripList {
    support {
      ... on DripListSupport {
        dripList {
          owner {
            address
          }
        }
      }
      ... on ProjectSupport {
        project {
          ...ProjectAvatar
        }
      }
      ... on OneTimeDonationSupport {
        account {
          address
        }
      }
    }
  }
`;

... and here's the fragment definition in ProjectAvatar.svelte:

<script lang="ts" context="module">
  import { gql } from 'graphql-request';

  export const PROJECT_AVATAR_FRAGMENT = gql`
    fragment ProjectAvatar on Project {
      ... on ClaimedProject {
        color
        avatar {
          ... on EmojiAvatar {
            emoji
          }
          ... on ImageAvatar {
            cid
          }
        }
      }
    }
  `;
</script>

<script lang="ts">
  // component code
  // ...