{"id":15407310,"url":"https://github.com/izumin5210/graphql-fragment-mask","last_synced_at":"2026-05-02T09:32:15.830Z","repository":{"id":47101607,"uuid":"404366077","full_name":"izumin5210/graphql-fragment-mask","owner":"izumin5210","description":"Mask GraphQL query result with Fragment","archived":false,"fork":false,"pushed_at":"2021-09-13T14:56:52.000Z","size":396,"stargazers_count":1,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-14T02:18:49.792Z","etag":null,"topics":["apollo","fragment","graphql","graphql-anywhere","graphql-code-generator","graphql-codegen","relay"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/graphql-fragment-mask","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/izumin5210.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-09-08T13:52:03.000Z","updated_at":"2022-09-28T06:46:43.000Z","dependencies_parsed_at":"2022-09-18T04:11:07.664Z","dependency_job_id":null,"html_url":"https://github.com/izumin5210/graphql-fragment-mask","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/izumin5210%2Fgraphql-fragment-mask","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/izumin5210%2Fgraphql-fragment-mask/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/izumin5210%2Fgraphql-fragment-mask/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/izumin5210%2Fgraphql-fragment-mask/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/izumin5210","download_url":"https://codeload.github.com/izumin5210/graphql-fragment-mask/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245956407,"owners_count":20700098,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["apollo","fragment","graphql","graphql-anywhere","graphql-code-generator","graphql-codegen","relay"],"created_at":"2024-10-01T16:28:27.264Z","updated_at":"2026-05-02T09:32:15.778Z","avatar_url":"https://github.com/izumin5210.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# graphql-fragment-mask\n[![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)\n[![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)\n[![npm](https://img.shields.io/npm/v/graphql-fragment-mask)](https://www.npmjs.com/package/graphql-fragment-mask)\n[![LICENSE](https://img.shields.io/github/license/izumin5210/graphql-fragment-mask)](./LICENSE)\n\nMask GraphQL query result with Fragment ([graphql-anywhere](https://www.npmjs.com/package/graphql-anywhere) alternative).\n\n## Usage\n\n```ts\nimport gql from \"graphql-tag\";\n// Import generated types and generated `TypedDocumentNode` objects of the fragment.\nimport { PostHeaderFragmentDoc, GetPostDocument } from \"./__generated__/Post.generated\";\n\nconst _POST_HEADER = gql`\n  fragment PostHeader on Post {\n    title\n    author {\n      fullName\n      avatarUrl\n    }\n  }\n`;\n\nconst _GET_GREETING = gql`\n  query GetPost($postId: !String) {\n    postById(postId: $postId) {\n      ...PostHeader\n      // and more fields...\n    }\n  }\n`;\n\nconst [data] = useQuery(GetPostDocument, { variables: { postId: \"123\" } });\n\n\n// Use typed document node generated by `@graphql-codegen/typed-document-node` (RECOMMENDED).\nconst header = maskWithFragment(PostHeaderFragmentDoc, data.postById);\n// {\n//   __typename: \"Post\",\n//   title: \"Hello, GraphQL!\",\n//   author: {\n//     __typename: \"User\",\n//     fullName: \"Masayuki Izumi\",\n//     avatarUrl: \"https://example.com/users/izumin5210/avatar\",\n//   }\n// }\n\n// Alternatively, you can use the document node defined by `graphql-tag`.\n// const header = maskWithFragment(_POST_HEADER, data.postById);\n```\n\n## Dependencies\n\nInstall this library with [graphql-js](https://github.com/graphql/graphql-js/).\n\n```\nyarn add graphql graphql-fragment-mask\n```\n\nIf 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)).\n\n```\nyarn add --dev \\\n  @graphql-codegen/cli \\\n  @graphql-codegen/typescript \\\n  @graphql-codegen/typescript-operations \\\n  @graphql-codegen/typed-document-node\nyarn add @graphql-typed-document-node/core\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fizumin5210%2Fgraphql-fragment-mask","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fizumin5210%2Fgraphql-fragment-mask","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fizumin5210%2Fgraphql-fragment-mask/lists"}