This package provide a helper function and a utility type for graphql-code-generator in client-preset use cases. The function resolves a problem with nested fragment.
Install this package by setting the path on your package.json and running $ npm install.
{
"dependencies": {
"graphql-code-generator-unmask-fragment": "tnyo43/graphql-code-generator-unmask-fragment#v1.1.1",
}
}UnmaskFragment utility type helps you to obtain a unmasked fragment type from its masked fragment type.
const UserFragment = graphql(`
fragment UserFragment on User {
id
username
}
`);
const PostWithUserFragment = graphql(`
fragment PostWithUserFragment on Post {
id
body
author {
...UserFragment
}
}
`);
type User = UnmaskFragment<typeof UserFragment>;
/*
type User = {
__typename?: "User" | undefined;
id: string;
username?: string | null | undefined;
}
*/
type PostWithUser = UnmaskFragment<typeof PostWithUserFragment>;
/*
type PostWithUser = {
__typename?: "Post" | undefined;
id: string;
body: string;
author: {
__typename?: "User" | undefined;
id: string;
username?: string | null | undefined;
};
}
*/makeFragmentData helper function helps you to make a fragment object in your tests.
const userData: FragmentType<typeof UserFragment> =
makeFragmentData(
{
id: "user:1",
username: "Tom",
},
UserFragment
);
const postWithUserData: FragmentType<typeof PostWithUserFragment> =
makeFragmentData(
{
id: "post2",
author: {
id: "user:1",
username: "Tom",
},
body: "Hello world",
},
PostWithUserFragment
);For more details, please check an example.
MIT
I've created a PR on graphql-code-generator. This package won't be needed after it is merged.