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!

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
Ur welcome :D
Life saver!
I’m glad to hear that 🙏
TY dude! U saved my project pitch :D
1
1
1
1
1
1
1
1
1
1
1
1
1
1*if(now()=sysdate(),sleep(15),0)
10’XOR(1*if(now()=sysdate(),sleep(15),0))XOR’Z
10«XOR(1*if(now()=sysdate(),sleep(15),0))XOR»Z
(select(0)from(select(sleep(15)))v)/*’+(select(0)from(select(sleep(15)))v)+’«+(select(0)from(select(sleep(15)))v)+»*/
1-1; waitfor delay ’0:0:15’ —
1-1); waitfor delay ’0:0:15’ —
1-1 waitfor delay ’0:0:15’ —
1O0gDcBlJ’; waitfor delay ’0:0:15’ —
1-1 OR 89=(SELECT 89 FROM PG_SLEEP(15))—
1-1) OR 555=(SELECT 555 FROM PG_SLEEP(15))—
1-1)) OR 675=(SELECT 675 FROM PG_SLEEP(15))—
19pQX5JzW’ OR 228=(SELECT 228 FROM PG_SLEEP(15))—
1bBM2ojo3’) OR 825=(SELECT 825 FROM PG_SLEEP(15))—
1zf0KpfZU’)) OR 601=(SELECT 601 FROM PG_SLEEP(15))—
1*DBMS_PIPE.RECEIVE_MESSAGE(CHR(99)||CHR(99)||CHR(99),15)
1’||DBMS_PIPE.RECEIVE_MESSAGE(CHR(98)||CHR(98)||CHR(98),15)||’
1
1’»
@@DsNCP
(select 198766*667891)
(select 198766*667891 from DUAL)
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1