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

Merged
merged 6 commits into from
Jun 13, 2024
Merged

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

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
6 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
7a39d7f
Merge branch 'dotansimha:master' into fragment-masking-array
rachel-church Jun 12, 2024
5c76473
Fixing Property 'join' does not exist on type 'string' error
rachel-church Jun 12, 2024
efcf2e9
update fixtures
n1ru4l Jun 13, 2024
9ad029b
changeset formatting
n1ru4l Jun 13, 2024
File filter

Filter by extension

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

Preserving Array<T> or ReadonlyArray<T> in useFragment() return type.
n1ru4l marked this conversation as resolved.
Show resolved Hide resolved
81 changes: 40 additions & 41 deletions packages/presets/client/src/fragment-masking-plugin.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,52 +22,51 @@ export function makeFragmentData<

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
89 changes: 53 additions & 36 deletions packages/presets/client/tests/client-preset.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -782,19 +782,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 @@ -823,39 +833,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 @@ -923,6 +900,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