graphql-fragment-mask


Mask GraphQL query result with Fragment (graphql-anywhere alternative).

Usage

``ts
import gql from "graphql-tag";
// Import generated types and generated TypedDocumentNode objects of the fragment.
import { PostHeaderFragmentDoc, GetPostDocument } from "./__generated__/Post.generated";

const _POST_HEADER = gql
fragment PostHeader on Post {
title
author {
fullName
avatarUrl
}
}
;

const _GET_GREETING = gql
query GetPost($postId: !String) {
postById(postId: $postId) {
...PostHeader
// and more fields...
}
}
;

const [data] = useQuery(GetPostDocument, { variables: { postId: "123" } });


// Use typed document node generated by @graphql-codegen/typed-document-node (RECOMMENDED).
const header = maskWithFragment(PostHeaderFragmentDoc, data.postById);
// {
// __typename: "Post",
// title: "Hello, GraphQL!",
// author: {
// __typename: "User",
// fullName: "Masayuki Izumi",
// avatarUrl: "https://example.com/users/izumin5210/avatar",
// }
// }

// Alternatively, you can use the document node defined by graphql-tag.
// const header = maskWithFragment(_POST_HEADER, data.postById);
`

Dependencies

Install this library with graphql-js.

`
yarn add graphql graphql-fragment-mask
`

If you want to use it with TypedDocumentNode, setup TypedDocumentNode plugin with graphql-code-generator (RECOMMENDED, please refer TypedDocumentNode's instruction).

`
yarn add --dev \
@graphql-codegen/cli \
@graphql-codegen/typescript \
@graphql-codegen/typescript-operations \
@graphql-codegen/typed-document-node
yarn add @graphql-typed-document-node/core
``