resolve `makeFragmentData` type problem by creating unmask Fragment utility type #9708

tnyo43 · 2023-10-15T08:58:00Z

Description

Related #9702
also related to #9380

makeFragmentData can't make a mock data with a fragment includes multiple fragments (see #9702 ).
I created UnmaskFragment and apply it to the first argument of the function to solve the problem.

Type of change

Bug fix (non-breaking change which fixes an issue)
Breaking change (fix or feature that would cause existing functionality to not work as expected)

This might be a breaking change if you are using nested makeFragmentData to create a mock data for a nested fragment as like follows:

makeFragmentData({
  bar: makeFragmentData({ ... }, BarFragment)
}, SomeFragment);

Screenshots/Sandbox (if appropriate/relevant):

sandbox of testing the UnmaskingFragment utility type

How Has This Been Tested?

check the failing code with the current makeFragmentData at a sandbox
1.1. clone https://github.com/tnyo43/graphql-code-generator-issue-fragment-conflict and move to the root of it.
1.2. run pnpm run install & pnpm run generate.
1.3. open "./src/User.tsx" and check the mockData is not able to be typed without any type assertion.
- this is because User_UserFragment includes multiple fragment.
prepare this repository
2.1 clone this repository and checkout to this branch (tnyo43:update-make-fragment-data-args-type)
2.2 run yarn install & yarn build
apply the change to the sandbox (see Apply fixed make fragment data tnyo43/graphql-code-generator-issue-fragment-conflict#1)
3.1. move to sandbox and update the dependency of "@graphql-codegen/client-preset" to refer to the local change (ex. "@graphql-codegen/client-preset": "file:../graphql-code-generator/packages/presets/client").
3.2. run pnpm run install & pnpm run generate.
3.3. open "./src/User.tsx" and update mockData as like follows. You will see that we don't need any extra type assertion for making mock data!

const mockData = makeFragmentData(
  {
    id: "user_1",
    username: "aaa",
    avatarUrl: "aaa",
    email: "mail@mail.com",
  },
  User_UserFragment
);

Test Environment:

OS: macOS 14.0 (23A344)
@graphql-codegen/cli: 4.0.1
@graphql-typed-document-node/core: 3.2.0,
typescript: 5.2.2
NodeJS: 18.16.0

Checklist:

I have followed the CONTRIBUTING doc and the style guidelines of this project
I have performed a self-review of my own code
I have commented my code, particularly in hard-to-understand areas
[N/A] I have made corresponding changes to the documentation
My changes generate no new warnings
I have added tests that prove my fix is effective or that my feature works
New and existing unit tests pass locally with my changes
Any dependent changes have been merged and published in downstream modules

Further comments

If this is a relatively large or complex change, kick off the discussion by explaining why you chose the solution you did and what alternatives you considered, etc...

changeset-bot · 2023-10-15T08:58:04Z

🦋 Changeset detected

Latest commit: 015cefe

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@graphql-codegen/client-preset	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

packages/presets/client/src/fragment-masking-plugin.ts

tnyo43 · 2023-10-15T09:10:27Z

packages/presets/client/src/fragment-masking-plugin.ts

-  const documentNodeImport = `${useTypeImports ? 'import type' : 'import'} { ResultOf, DocumentTypeDecoration${
+  const documentNodeImport = `${useTypeImports ? 'import type' : 'import'} { DocumentTypeDecoration${


With this change, we don't use ResultOf utility type in this file any more.

tnyo43 · 2023-10-15T09:38:23Z

packages/presets/client/src/fragment-masking-plugin.ts

+    } & (F extends { " $fragmentRefs"?: { [K in string]: infer FRefs }; }
+      ? (FRefs extends any ? Flatten<FRefs> : never) : {}
+    );
+export type UnmaskFragment<F> = UnionFieldToIntersection<Flatten<F>>;


UnmaskFragment utility type consists of two utility types, Flatten and UnionFieldToIntersection.

Flatten refers to ' $fragmentRefs' properties and returns a new type by making the all sub-fragment flat recursively.
it returns a union type of fragments if the fragment includes multiple fragments in the same field. So we use UnionFieldToIntersection to transform it to an intersection type of them.

I made a playground, so you will be able to see how they actually works.

tnyo43 · 2023-10-15T09:41:26Z

packages/presets/client/src/fragment-masking-plugin.ts

+type UnionToIntersectGroupByTypeName<U, V = U> = [V] extends [
+  { __typename?: infer TypeName }
+]
+  ? TypeName extends any
+    ? UnionToIntersection<U extends { __typename?: TypeName } ? U : never>
+    : never
+  : never;


We want to make the union of fragment type into an intersection type of them if and only if they have same __typename value.

tnyo43 · 2023-10-15T09:51:08Z

dev-test/gql-tag-operations-masking/src/makeFragmentData.test.tsx

I made something like type tests of makeFragmentData.
Unfortunately, it seems there is no type checking in CI process. So there is no rational way to check the type of makeFragmentData is correct.
If you know of a better way, please let me know.

tnyo43 · 2023-10-15T09:52:24Z

dev-test/gql-tag-operations-masking/src/mocks.ts

This is a small example of makeFragmentData with nested fragment.
Actually it is not able to be typed with the previous implementation of makeFragmentData.

tnyo43 · 2023-10-15T09:53:36Z

dev-test/gql-tag-operations-masking/schema.graphql

I added some field for tests of makeFragmentData.

tnyo43

A lot of changes are made by running scripts.
I left comments to at the files I changes. You can just ignore other files for quick review.

tnyo43 · 2023-10-15T10:04:23Z

packages/presets/client/src/fragment-masking-plugin.ts

->(data: FT, _fragment: F): FragmentType<F> {
-  return data as FragmentType<F>;
+>(data: UnmaskFragment<FragmentType<F>>, _fragment: F): FragmentType<F> {
+  return data as any;


The main update of this PR is here.
ResultOf<F> does not accept any object if the fragment includes multiple fragments (I made an example #9702 ).
I made UnmaskFragment utility type to make it able to accept valid data for the fragment.

you need to prepare clone and build the repository

tnyo43 · 2023-10-16T13:37:54Z

Can anyone help me to fix ci problem? https://github.com/dotansimha/graphql-code-generator/actions/runs/6524719251/job/17716636556?pr=9708

tnyo43 · 2024-02-23T02:20:32Z

@saihaj Could you please provide some advice on how to approach this?
As I mentioned in the description, I know it is kind a breaking change so we may need to discuss a lot to merge.

it is not required since the previous commit

run `yarn build & yarn generate:examples`

gql function seems not to be used since dotansimha#9217 is completed

this mock data is what is not able to be typed with the previous `makeFragmentData` function. That is because `TweetsFragment` includes two different fragments

run `yarn examples:codegen`

the reason of this change is to escape the error of type error. refer to https://github.com/dotansimha/graphql-code-generator/actions/runs/6523101984/job/17713396917?pr=9708

tnyo43 marked this pull request as draft October 15, 2023 08:58

tnyo43 commented Oct 15, 2023

View reviewed changes

tnyo43 force-pushed the update-make-fragment-data-args-type branch from a7b8032 to fcd0129 Compare October 15, 2023 14:37

tnyo43 added a commit to tnyo43/graphql-code-generator-issue-fragment-conflict that referenced this pull request Oct 15, 2023

apply changes of dotansimha/graphql-code-generator#9708

291365c

you need to prepare clone and build the repository

tnyo43 changed the title ~~Update make fragment data args type~~ resolve makeFragmentData type problem with creating unmask Fragment utility type Oct 15, 2023

tnyo43 changed the title ~~resolve makeFragmentData type problem with creating unmask Fragment utility type~~ resolve makeFragmentData type problem by creating unmask Fragment utility type Oct 15, 2023

tnyo43 mentioned this pull request Oct 15, 2023

Apply fixed make fragment data tnyo43/graphql-code-generator-issue-fragment-conflict#1

Open

tnyo43 added a commit to tnyo43/graphql-code-generator-issue-fragment-conflict that referenced this pull request Oct 15, 2023

apply changes of dotansimha/graphql-code-generator#9708

8c57e25

you need to prepare clone and build the repository

tnyo43 marked this pull request as ready for review October 16, 2023 13:37

saihaj requested review from beerose and n1ru4l October 19, 2023 14:45

tnyo43 added 10 commits March 8, 2024 18:49

implement the fragment unmasking utility and update makeFragment type

4996b72

remove importing ResultOf statement

d43e933

it is not required since the previous commit

generate examples

e72e202

run `yarn build & yarn generate:examples`

fix graphql function in dev-test

8a95e64

gql function seems not to be used since dotansimha#9217 is completed

add mock data created by using makeFragmentData

7c9c96a

this mock data is what is not able to be typed with the previous `makeFragmentData` function. That is because `TweetsFragment` includes two different fragments

run codegen in examples

4b2e131

run `yarn examples:codegen`

update snapshot

82b05fb

add changeset

1faeb31

add tests for makeFragmentData

3315b9e

update type assertion to any.

015cefe

the reason of this change is to escape the error of type error. refer to https://github.com/dotansimha/graphql-code-generator/actions/runs/6523101984/job/17713396917?pr=9708

tnyo43 force-pushed the update-make-fragment-data-args-type branch from fcd0129 to 015cefe Compare March 8, 2024 09:58

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

resolve `makeFragmentData` type problem by creating unmask Fragment utility type #9708

resolve `makeFragmentData` type problem by creating unmask Fragment utility type #9708

tnyo43 commented Oct 15, 2023 •

edited

changeset-bot bot commented Oct 15, 2023 •

edited

tnyo43 Oct 15, 2023

tnyo43 Oct 15, 2023

tnyo43 Oct 15, 2023

tnyo43 Oct 15, 2023

tnyo43 Oct 15, 2023

tnyo43 Oct 15, 2023

tnyo43 left a comment

tnyo43 Oct 15, 2023

tnyo43 commented Oct 16, 2023

tnyo43 commented Feb 23, 2024

		const documentNodeImport = `${useTypeImports ? 'import type' : 'import'} { ResultOf, DocumentTypeDecoration${
		const documentNodeImport = `${useTypeImports ? 'import type' : 'import'} { DocumentTypeDecoration${

resolve makeFragmentData type problem by creating unmask Fragment utility type #9708

Are you sure you want to change the base?

resolve makeFragmentData type problem by creating unmask Fragment utility type #9708

Conversation

tnyo43 commented Oct 15, 2023 • edited

Description

Type of change

Screenshots/Sandbox (if appropriate/relevant):

How Has This Been Tested?

Checklist:

Further comments

changeset-bot bot commented Oct 15, 2023 • edited

🦋 Changeset detected

tnyo43 Oct 15, 2023

Choose a reason for hiding this comment

tnyo43 Oct 15, 2023

Choose a reason for hiding this comment

tnyo43 Oct 15, 2023

Choose a reason for hiding this comment

tnyo43 Oct 15, 2023

Choose a reason for hiding this comment

tnyo43 Oct 15, 2023

Choose a reason for hiding this comment

tnyo43 Oct 15, 2023

Choose a reason for hiding this comment

tnyo43 left a comment

Choose a reason for hiding this comment

tnyo43 Oct 15, 2023

Choose a reason for hiding this comment

tnyo43 commented Oct 16, 2023

tnyo43 commented Feb 23, 2024

resolve `makeFragmentData` type problem by creating unmask Fragment utility type #9708

resolve `makeFragmentData` type problem by creating unmask Fragment utility type #9708

tnyo43 commented Oct 15, 2023 •

edited

changeset-bot bot commented Oct 15, 2023 •

edited