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: 26 days 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 (over 3 years ago)
- Default Branch: main
- Last Pushed: 2021-09-13T14:56:52.000Z (over 3 years ago)
- Last Synced: 2025-03-14T02:18:49.792Z (about 1 month 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: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# graphql-fragment-mask
[](https://github.com/izumin5210/graphql-fragment-mask/actions/workflows/ci.yml)
[](https://coveralls.io/github/izumin5210/graphql-fragment-mask?branch=main)
[](https://www.npmjs.com/package/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
```