https://github.com/izumin5210/graphql-fragment-mask

Mask GraphQL query result with Fragment
https://github.com/izumin5210/graphql-fragment-mask

apollo fragment graphql graphql-anywhere graphql-code-generator graphql-codegen relay

Last synced: about 1 month ago
JSON representation

Mask GraphQL query result with Fragment

• Host: GitHub
• URL: https://github.com/izumin5210/graphql-fragment-mask
• Owner: izumin5210
• License: mit
• Created: 2021-09-08T13:52:03.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2021-09-13T14:56:52.000Z (about 3 years ago)
• Last Synced: 2024-10-06T05:44:01.974Z (about 2 months ago)
• Topics: apollo, fragment, graphql, graphql-anywhere, graphql-code-generator, graphql-codegen, relay
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/graphql-fragment-mask
• Size: 387 KB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# graphql-fragment-mask

[![CI](https://github.com/izumin5210/graphql-fragment-mask/actions/workflows/ci.yml/badge.svg)](https://github.com/izumin5210/graphql-fragment-mask/actions/workflows/ci.yml)

[![Coverage Status](https://coveralls.io/repos/github/izumin5210/graphql-fragment-mask/badge.svg?branch=main)](https://coveralls.io/github/izumin5210/graphql-fragment-mask?branch=main)

[![npm](https://img.shields.io/npm/v/graphql-fragment-mask)](https://www.npmjs.com/package/graphql-fragment-mask)

[![LICENSE](https://img.shields.io/github/license/izumin5210/graphql-fragment-mask)](./LICENSE)

Mask GraphQL query result with Fragment ([graphql-anywhere](https://www.npmjs.com/package/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](https://github.com/graphql/graphql-js/).

```

yarn add graphql graphql-fragment-mask

```

If you want to use it with `TypedDocumentNode`, setup [TypedDocumentNode plugin](https://www.graphql-code-generator.com/docs/plugins/typed-document-node) with [graphql-code-generator](https://www.graphql-code-generator.com) (RECOMMENDED, please refer [TypedDocumentNode's instruction](https://github.com/dotansimha/graphql-typed-document-node#how-to-use)).

```

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

```