Skip to content

Implement fragment unmasking utility types #9380

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

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

Implement fragment unmasking utility types #9380

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
fd5ca74
Implement fragment unmasking
charpeni May 5, 2023
be630bf
Regenerate examples
charpeni May 5, 2023
cce4dc6
Add `expect-type`
charpeni May 5, 2023
2bf3f63
Add tests for fragment unmasking
charpeni May 5, 2023
e7a09f4
Add changeset
charpeni May 9, 2023
be3dccd
Regenerate `dev-test` examples
charpeni May 9, 2023
6c2dba5
Update `client-preset` snapshot
charpeni May 9, 2023
f18151a
Add documentation
charpeni Jun 5, 2023
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
49 changes: 49 additions & 0 deletions .changeset/mean-scissors-drop.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
---
'@graphql-codegen/client-preset': minor
---

Add `UnmaskResultOf` and `UnmaskFragmentType` utility types

Recursively flattens fragments by resolving ` $fragmentRefs` and merging them to the root fragment/operation.

Could be useful for incremental adoption of Fragment Masking or when unmasking is helpful, e.g., within utilities or tests.

For example:

```ts
const FilmItemFragment = graphql(`
fragment FilmItem on Film {
id
title
}
`);

const AllFilmsFragment = graphql(`
fragment AllFilms on Root {
allFilms {
films {
...FilmItem
}
}
}
`);

const myQuery = graphql(`
query Films {
...AllFilms
}
`); // DocumentTypeDecoration<R, V>

// Fragment references are all inlined rather than referring to ` $fragmentRefs`.
type UnmaskedData = UnmaskResultOf<typeof myQuery>;
// ^? type UnmaskedData = {
// __typename: 'Root' | undefined,
// allFilms: {
// films: {
// __typename?: "Film" | undefined;
// id: string;
// title?: string | null | undefined;
// }[] | null | undefined
// } | null | undefined
// }
```
86 changes: 86 additions & 0 deletions dev-test/gql-tag-operations-masking/gql/fragment-masking.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,12 @@ import { ResultOf, DocumentTypeDecoration, TypedDocumentNode } from '@graphql-ty
import { FragmentDefinitionNode } from 'graphql';
import { Incremental } from './graphql.js';

type Prettify<T> = {
[K in keyof T]: T[K];
} & {};
type ValuesOf<T> = T[keyof T];
type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (k: infer I) => void ? I : never;

export type FragmentType<TDocumentType extends DocumentTypeDecoration<any, any>> =
TDocumentType extends DocumentTypeDecoration<infer TType, any>
? [TType] extends [{ ' $fragmentName'?: infer TKey }]
Expand Down Expand Up @@ -48,6 +54,86 @@ export function makeFragmentData<F extends DocumentTypeDecoration<any, any>, FT
): FragmentType<F> {
return data as FragmentType<F>;
}

/**
* Helper for unmasking a fragment type.
*
* @example
*
* ```ts
* type FilmProducersFragment = {
* __typename?: 'Film';
* id: string;
* producers?: Array<string | null> | null;
* } & { ' $fragmentName'?: 'FilmProducersFragment' };
*
* type FilmItemFragment = {
* __typename?: 'Film';
* id: string;
* title?: string | null;
* } & {
* ' $fragmentRefs'?: { FilmProducersFragment: FilmProducersFragment };
* } & { ' $fragmentName'?: 'FilmItemFragment' };
*
* // Fragment references are all inlined rather than referring to ` $fragmentRefs`.
* type UnmaskedData = UnmaskFragmentType<FilmItemFragment>;
* // ^? type UnmaskedData = {
* // __typename?: "Film" | undefined;
* // id: string;
* // title?: string | null | undefined;
* // producers?: (string | null)[] | null | undefined;
* // }
* ```
*/
export type UnmaskFragmentType<TType> = TType extends { ' $fragmentRefs'?: infer TRefs }
? Prettify<
UnmaskFragmentType<
Omit<TType, ' $fragmentRefs' | ' $fragmentName'> & Omit<UnionToIntersection<ValuesOf<TRefs>>, ' $fragmentName'>
>
>
: TType extends { [K in keyof TType]: any }
? { [K in keyof TType]: UnmaskFragmentType<TType[K]> }
: never;

/**
* Helper for unmasking the result of a GraphQL document (`DocumentType`).
*
* @example
*
* ```ts
* const FilmItemFragment = graphql(`
* fragment FilmItem on Film {
* id
* title
* }
* `);
*
* const myQuery = graphql(`
* query Films {
* allFilms {
* films {
* ...FilmItem
* }
* }
* }
* `); // DocumentTypeDecoration<R, V>
*
* // Fragment references are all inlined rather than referring to ` $fragmentRefs`.
* type UnmaskedData = UnmaskResultOf<typeof myQuery>;
* // ^? type UnmaskedData = {
* // __typename: 'Root' | undefined,
* // allFilms: {
* // films: {
* // __typename?: "Film" | undefined;
* // id: string;
* // title?: string | null | undefined;
* // }[] | null | undefined
* // } | null | undefined
* // }
* ```
*/
export type UnmaskResultOf<TDocumentType extends DocumentTypeDecoration<any, any>> =
TDocumentType extends DocumentTypeDecoration<infer TType, any> ? UnmaskFragmentType<TType> : never;
export function isFragmentReady<TQuery, TFrag>(
queryNode: DocumentTypeDecoration<TQuery, any>,
fragmentNode: TypedDocumentNode<TFrag>,
Expand Down
86 changes: 86 additions & 0 deletions dev-test/gql-tag-operations-urql/gql/fragment-masking.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,12 @@ import { ResultOf, DocumentTypeDecoration, TypedDocumentNode } from '@graphql-ty
import { FragmentDefinitionNode } from 'graphql';
import { Incremental } from './graphql.js';

type Prettify<T> = {
[K in keyof T]: T[K];
} & {};
type ValuesOf<T> = T[keyof T];
type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (k: infer I) => void ? I : never;

export type FragmentType<TDocumentType extends DocumentTypeDecoration<any, any>> =
TDocumentType extends DocumentTypeDecoration<infer TType, any>
? [TType] extends [{ ' $fragmentName'?: infer TKey }]
Expand Down Expand Up @@ -48,6 +54,86 @@ export function makeFragmentData<F extends DocumentTypeDecoration<any, any>, FT
): FragmentType<F> {
return data as FragmentType<F>;
}

/**
* Helper for unmasking a fragment type.
*
* @example
*
* ```ts
* type FilmProducersFragment = {
* __typename?: 'Film';
* id: string;
* producers?: Array<string | null> | null;
* } & { ' $fragmentName'?: 'FilmProducersFragment' };
*
* type FilmItemFragment = {
* __typename?: 'Film';
* id: string;
* title?: string | null;
* } & {
* ' $fragmentRefs'?: { FilmProducersFragment: FilmProducersFragment };
* } & { ' $fragmentName'?: 'FilmItemFragment' };
*
* // Fragment references are all inlined rather than referring to ` $fragmentRefs`.
* type UnmaskedData = UnmaskFragmentType<FilmItemFragment>;
* // ^? type UnmaskedData = {
* // __typename?: "Film" | undefined;
* // id: string;
* // title?: string | null | undefined;
* // producers?: (string | null)[] | null | undefined;
* // }
* ```
*/
export type UnmaskFragmentType<TType> = TType extends { ' $fragmentRefs'?: infer TRefs }
? Prettify<
UnmaskFragmentType<
Omit<TType, ' $fragmentRefs' | ' $fragmentName'> & Omit<UnionToIntersection<ValuesOf<TRefs>>, ' $fragmentName'>
>
>
: TType extends { [K in keyof TType]: any }
? { [K in keyof TType]: UnmaskFragmentType<TType[K]> }
: never;

/**
* Helper for unmasking the result of a GraphQL document (`DocumentType`).
*
* @example
*
* ```ts
* const FilmItemFragment = graphql(`
* fragment FilmItem on Film {
* id
* title
* }
* `);
*
* const myQuery = graphql(`
* query Films {
* allFilms {
* films {
* ...FilmItem
* }
* }
* }
* `); // DocumentTypeDecoration<R, V>
*
* // Fragment references are all inlined rather than referring to ` $fragmentRefs`.
* type UnmaskedData = UnmaskResultOf<typeof myQuery>;
* // ^? type UnmaskedData = {
* // __typename: 'Root' | undefined,
* // allFilms: {
* // films: {
* // __typename?: "Film" | undefined;
* // id: string;
* // title?: string | null | undefined;
* // }[] | null | undefined
* // } | null | undefined
* // }
* ```
*/
export type UnmaskResultOf<TDocumentType extends DocumentTypeDecoration<any, any>> =
TDocumentType extends DocumentTypeDecoration<infer TType, any> ? UnmaskFragmentType<TType> : never;
export function isFragmentReady<TQuery, TFrag>(
queryNode: DocumentTypeDecoration<TQuery, any>,
fragmentNode: TypedDocumentNode<TFrag>,
Expand Down
86 changes: 86 additions & 0 deletions dev-test/gql-tag-operations/gql/fragment-masking.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,12 @@ import { ResultOf, DocumentTypeDecoration, TypedDocumentNode } from '@graphql-ty
import { FragmentDefinitionNode } from 'graphql';
import { Incremental } from './graphql.js';

type Prettify<T> = {
[K in keyof T]: T[K];
} & {};
type ValuesOf<T> = T[keyof T];
type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (k: infer I) => void ? I : never;

export type FragmentType<TDocumentType extends DocumentTypeDecoration<any, any>> =
TDocumentType extends DocumentTypeDecoration<infer TType, any>
? [TType] extends [{ ' $fragmentName'?: infer TKey }]
Expand Down Expand Up @@ -48,6 +54,86 @@ export function makeFragmentData<F extends DocumentTypeDecoration<any, any>, FT
): FragmentType<F> {
return data as FragmentType<F>;
}

/**
* Helper for unmasking a fragment type.
*
* @example
*
* ```ts
* type FilmProducersFragment = {
* __typename?: 'Film';
* id: string;
* producers?: Array<string | null> | null;
* } & { ' $fragmentName'?: 'FilmProducersFragment' };
*
* type FilmItemFragment = {
* __typename?: 'Film';
* id: string;
* title?: string | null;
* } & {
* ' $fragmentRefs'?: { FilmProducersFragment: FilmProducersFragment };
* } & { ' $fragmentName'?: 'FilmItemFragment' };
*
* // Fragment references are all inlined rather than referring to ` $fragmentRefs`.
* type UnmaskedData = UnmaskFragmentType<FilmItemFragment>;
* // ^? type UnmaskedData = {
* // __typename?: "Film" | undefined;
* // id: string;
* // title?: string | null | undefined;
* // producers?: (string | null)[] | null | undefined;
* // }
* ```
*/
export type UnmaskFragmentType<TType> = TType extends { ' $fragmentRefs'?: infer TRefs }
? Prettify<
UnmaskFragmentType<
Omit<TType, ' $fragmentRefs' | ' $fragmentName'> & Omit<UnionToIntersection<ValuesOf<TRefs>>, ' $fragmentName'>
>
>
: TType extends { [K in keyof TType]: any }
? { [K in keyof TType]: UnmaskFragmentType<TType[K]> }
: never;

/**
* Helper for unmasking the result of a GraphQL document (`DocumentType`).
*
* @example
*
* ```ts
* const FilmItemFragment = graphql(`
* fragment FilmItem on Film {
* id
* title
* }
* `);
*
* const myQuery = graphql(`
* query Films {
* allFilms {
* films {
* ...FilmItem
* }
* }
* }
* `); // DocumentTypeDecoration<R, V>
*
* // Fragment references are all inlined rather than referring to ` $fragmentRefs`.
* type UnmaskedData = UnmaskResultOf<typeof myQuery>;
* // ^? type UnmaskedData = {
* // __typename: 'Root' | undefined,
* // allFilms: {
* // films: {
* // __typename?: "Film" | undefined;
* // id: string;
* // title?: string | null | undefined;
* // }[] | null | undefined
* // } | null | undefined
* // }
* ```
*/
export type UnmaskResultOf<TDocumentType extends DocumentTypeDecoration<any, any>> =
TDocumentType extends DocumentTypeDecoration<infer TType, any> ? UnmaskFragmentType<TType> : never;
export function isFragmentReady<TQuery, TFrag>(
queryNode: DocumentTypeDecoration<TQuery, any>,
fragmentNode: TypedDocumentNode<TFrag>,
Expand Down
Loading