Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[client-preset] Preserving Array<T> or ReadonlyArray<T> in useFragment() data #9804

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

[client-preset] Preserving Array<T> or ReadonlyArray<T> in useFragment() data #9804

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
045e0bf
Preserving Array<T> or ReadonlyArray<T>
rachel-church Jan 3, 2024
461da5d
adding changeset
rachel-church Feb 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/proud-cycles-design.md
View file
Open in desktop
@@ -0,0 +1,5 @@
---
'@graphql-codegen/client-preset': minor
---

Preserving Array<T> or ReadonlyArray<T> in useFragment() return type.
81 changes: 40 additions & 41 deletions packages/presets/client/src/fragment-masking-plugin.ts
View file
Open in desktop
Expand Up @@ -22,52 +22,51 @@

const defaultUnmaskFunctionName = 'useFragment';

const modifyType = (
rawType: string,
opts: { nullable: boolean; list: 'with-list' | 'only-list' | false; empty?: boolean }
) => {
return `${
opts.list === 'only-list'
? `ReadonlyArray<${rawType}>`
: opts.list === 'with-list'
? `${rawType} | ReadonlyArray<${rawType}>`
: rawType
}${opts.nullable ? ' | null | undefined' : ''}`;
};
const createUnmaskFunctionTypeDefinitions = (unmaskFunctionName = defaultUnmaskFunctionName) =>
[
`// return non-nullable if \`fragmentType\` is non-nullable
export function ${unmaskFunctionName}<TType>(
_documentNode: DocumentTypeDecoration<TType, any>,
fragmentType: FragmentType<DocumentTypeDecoration<TType, any>>
): TType;`,

const createUnmaskFunctionTypeDefinition = (
unmaskFunctionName = defaultUnmaskFunctionName,
opts: { nullable: boolean; list: 'with-list' | 'only-list' | false }
) => {
return `export function ${unmaskFunctionName}<TType>(
`// return nullable if \`fragmentType\` is nullable
export function ${unmaskFunctionName}<TType>(
_documentNode: DocumentTypeDecoration<TType, any>,
fragmentType: ${modifyType(`FragmentType<DocumentTypeDecoration<TType, any>>`, opts)}
): ${modifyType('TType', opts)}`;
};
fragmentType: FragmentType<DocumentTypeDecoration<TType, any>> | null | undefined
): TType | null | undefined;`,

const createUnmaskFunctionTypeDefinitions = (unmaskFunctionName = defaultUnmaskFunctionName) => [
`// return non-nullable if \`fragmentType\` is non-nullable\n${createUnmaskFunctionTypeDefinition(
unmaskFunctionName,
{ nullable: false, list: false }
)}`,
`// return nullable if \`fragmentType\` is nullable\n${createUnmaskFunctionTypeDefinition(unmaskFunctionName, {
nullable: true,
list: false,
})}`,
`// return array of non-nullable if \`fragmentType\` is array of non-nullable\n${createUnmaskFunctionTypeDefinition(
unmaskFunctionName,
{ nullable: false, list: 'only-list' }
)}`,
`// return array of nullable if \`fragmentType\` is array of nullable\n${createUnmaskFunctionTypeDefinition(
unmaskFunctionName,
{ nullable: true, list: 'only-list' }
)}`,
];
`// return array of non-nullable if \`fragmentType\` is array of non-nullable
export function ${unmaskFunctionName}<TType>(
_documentNode: DocumentTypeDecoration<TType, any>,
fragmentType: Array<FragmentType<DocumentTypeDecoration<TType, any>>>
): Array<TType>;`,

`// return array of nullable if \`fragmentType\` is array of nullable
export function ${unmaskFunctionName}<TType>(
_documentNode: DocumentTypeDecoration<TType, any>,
fragmentType: Array<FragmentType<DocumentTypeDecoration<TType, any>>> | null | undefined
): Array<TType> | null | undefined;`,

`// return readonly array of non-nullable if \`fragmentType\` is array of non-nullable
export function ${unmaskFunctionName}<TType>(
_documentNode: DocumentTypeDecoration<TType, any>,
fragmentType: ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>>
): ReadonlyArray<TType>;`,

`// return readonly array of nullable if \`fragmentType\` is array of nullable
export function ${unmaskFunctionName}<TType>(
_documentNode: DocumentTypeDecoration<TType, any>,
fragmentType: ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>> | null | undefined
): ReadonlyArray<TType> | null | undefined;`,
].join('\n');

const createUnmaskFunction = (unmaskFunctionName = defaultUnmaskFunctionName) => `
${createUnmaskFunctionTypeDefinitions(unmaskFunctionName)
.concat(createUnmaskFunctionTypeDefinition(unmaskFunctionName, { nullable: true, list: 'with-list' }))
.join(';\n')} {
${createUnmaskFunctionTypeDefinitions(unmaskFunctionName)}
export function ${unmaskFunctionName}<TType>(
_documentNode: DocumentTypeDecoration<TType, any>,
fragmentType: FragmentType<DocumentTypeDecoration<TType, any>> | Array<FragmentType<DocumentTypeDecoration<TType, any>>> | ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>> | null | undefined
): TType | Array<TType> | ReadonlyArray<TType> | null | undefined {
return fragmentType as any;
}
`;
Expand Down Expand Up @@ -159,7 +158,7 @@
[
...fragmentTypeHelper.split(`\n`),
`\n`,
...createUnmaskFunctionTypeDefinitions(unmaskFunctionName).join('\n').split('\n'),

Check failure on line 161 in packages/presets/client/src/fragment-masking-plugin.ts

View workflow job for this annotation

GitHub Actions / Examples 

Property 'join' does not exist on type 'string'.

Check failure on line 161 in packages/presets/client/src/fragment-masking-plugin.ts

View workflow job for this annotation

GitHub Actions / Testing exports integrity 

Property 'join' does not exist on type 'string'.

Check failure on line 161 in packages/presets/client/src/fragment-masking-plugin.ts

View workflow job for this annotation

GitHub Actions / Validating dev-tests (cjs) 

Property 'join' does not exist on type 'string'.

Check failure on line 161 in packages/presets/client/src/fragment-masking-plugin.ts

View workflow job for this annotation

GitHub Actions / Validating dev-tests (esm) 

Property 'join' does not exist on type 'string'.
`\n`,
makeFragmentDataHelper,
]
Expand Down
89 changes: 53 additions & 36 deletions packages/presets/client/tests/client-preset.spec.ts
View file
Open in desktop
Expand Up @@ -781,19 +781,29 @@ export * from "./gql";`);
fragmentType: FragmentType<DocumentTypeDecoration<TType, any>> | null | undefined
): TType | null | undefined;
// return array of non-nullable if \`fragmentType\` is array of non-nullable
export function iLikeTurtles<TType>(
_documentNode: DocumentTypeDecoration<TType, any>,
fragmentType: Array<FragmentType<DocumentTypeDecoration<TType, any>>>
): Array<TType>;
// return array of nullable if \`fragmentType\` is array of nullable
export function iLikeTurtles<TType>(
_documentNode: DocumentTypeDecoration<TType, any>,
fragmentType: Array<FragmentType<DocumentTypeDecoration<TType, any>>> | null | undefined
): Array<TType> | null | undefined;
// return readonly array of non-nullable if \`fragmentType\` is array of non-nullable
export function iLikeTurtles<TType>(
_documentNode: DocumentTypeDecoration<TType, any>,
fragmentType: ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>>
): ReadonlyArray<TType>;
// return array of nullable if \`fragmentType\` is array of nullable
// return readonly array of nullable if \`fragmentType\` is array of nullable
export function iLikeTurtles<TType>(
_documentNode: DocumentTypeDecoration<TType, any>,
fragmentType: ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>> | null | undefined
): ReadonlyArray<TType> | null | undefined;
export function iLikeTurtles<TType>(
_documentNode: DocumentTypeDecoration<TType, any>,
fragmentType: FragmentType<DocumentTypeDecoration<TType, any>> | ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>> | null | undefined
): TType | ReadonlyArray<TType> | null | undefined {
fragmentType: FragmentType<DocumentTypeDecoration<TType, any>> | Array<FragmentType<DocumentTypeDecoration<TType, any>>> | ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>> | null | undefined
): TType | Array<TType> | ReadonlyArray<TType> | null | undefined {
return fragmentType as any;
}

Expand Down Expand Up @@ -822,39 +832,6 @@ export * from "./gql";`);
}
"
`);

expect(gqlFile.content).toBeSimilarStringTo(`
export function iLikeTurtles<TType>(
_documentNode: DocumentTypeDecoration<TType, any>,
fragmentType: FragmentType<DocumentTypeDecoration<TType, any>>
): TType;
`);
expect(gqlFile.content).toBeSimilarStringTo(`
export function iLikeTurtles<TType>(
_documentNode: DocumentTypeDecoration<TType, any>,
fragmentType: FragmentType<DocumentTypeDecoration<TType, any>> | null | undefined
): TType | null | undefined;
`);
expect(gqlFile.content).toBeSimilarStringTo(`
export function iLikeTurtles<TType>(
_documentNode: DocumentTypeDecoration<TType, any>,
fragmentType: ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>>
): ReadonlyArray<TType>;
`);
expect(gqlFile.content).toBeSimilarStringTo(`
export function iLikeTurtles<TType>(
_documentNode: DocumentTypeDecoration<TType, any>,
fragmentType: ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>> | null | undefined
): ReadonlyArray<TType> | null | undefined;
`);
expect(gqlFile.content).toBeSimilarStringTo(`
export function iLikeTurtles<TType>(
_documentNode: DocumentTypeDecoration<TType, any>,
fragmentType: FragmentType<DocumentTypeDecoration<TType, any>> | ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>> | null | undefined
): TType | ReadonlyArray<TType> | null | undefined {
return fragmentType as any;
}
`);
});

it('can accept null in useFragment', async () => {
Expand Down Expand Up @@ -922,6 +899,46 @@ export * from "./gql";`);
},
});

const content = mergeOutputs([
...result,
fs.readFileSync(docPath, 'utf8'),
`
function App(props: { foos: Array<FragmentType<typeof Fragment>> }) {
const fragments: Array<FooFragment> = useFragment(Fragment, props.foos);
return fragments.map(f => f.value);
}
`,
]);

validateTs(content, undefined, false, true, [`Duplicate identifier 'DocumentNode'.`], true);
});

it('useFragment preserves ReadonlyArray<T> type', async () => {
const docPath = path.join(__dirname, 'fixtures/with-fragment.ts');
const result = await executeCodegen({
schema: [
/* GraphQL */ `
type Query {
foo: Foo
foos: [Foo!]
}

type Foo {
value: String
}
`,
],
documents: docPath,
generates: {
'out1/': {
preset,
presetConfig: {
fragmentMasking: true,
},
},
},
});

const content = mergeOutputs([
...result,
fs.readFileSync(docPath, 'utf8'),
Expand Down