• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

gajus/babel-plugin-graphql-tag: Compiles GraphQL tagged template strings using g ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

gajus/babel-plugin-graphql-tag

开源软件地址(OpenSource Url):

https://github.com/gajus/babel-plugin-graphql-tag

开源编程语言(OpenSource Language):

JavaScript 100.0%

开源软件介绍(OpenSource Introduction):

babel-plugin-graphql-tag

GitSpo Mentions Travis build status NPM version Canonical Code Style Twitter Follow

Compiles GraphQL tagged template strings using graphql-tag.

Motivation

Compiling GraphQL queries at the build time:

  • reduces the script initialization time; and
  • removes the graphql-tag dependency

Removing the graphql-tag dependency from the bundle saves approx. 50 KB.

Implementation

  • Searches for imports of graphql-tag and removes them.
  • Searches for tagged template literals with gql identifier and compiles them using graphql-tag.

Example compilation

Input:

import gql from 'graphql-tag';
// if using apollo v3
import { gql } from '@apollo/client';

const foo = gql`query {bar}`;

Output:

const foo = {
  "definitions": [
    {
      "directives": [
      ],
      "kind": "OperationDefinition",
      "operation": "query",
      "selectionSet": {
        "kind": "SelectionSet",
        "selections": [
          {
            "alias": null,
            "arguments": [
            ],
            "directives": [
            ],
            "kind": "Field",
            "name": {
              "kind": "Name",
              "value": "bar"
            },
            "selectionSet": null
          }
        ]
      },
      "variableDefinitions": [
      ]
    }
  ],
  "kind": "Document",
  "loc": {
    "end": 11,
    "start": 0
  }
};

NOTE: require() is also supported.

Using fragments

Using GraphQL fragments requires to:

  1. Define a fragment using graphql-tag.
  2. Append the referenced fragment as a variable to the end of the GraphQL query.

Example:

import gql from 'graphql-tag';

const bar = gql`
  fragment barFragment on Foo {
    field1
    field2
  }
`;

const foo = gql`
  query foo {
    foo {
      ...barFragment
    }
  }

  ${bar}
`;

Options

  • importSources - An array of names for modules to import (default = ["graphql-tag", "@apollo/client"])
  • onlyMatchImportSuffix - Matches the end of the import instead of the entire name. Useful for relative imports, e.g. ./utils/graphql (default = false)
  • strip - Strips insignificant characters such as whitespace from the original GraphQL string literal to reduce the size of compiled AST (default = false)
  • transform - By default, graphql query strings will be replaced with their AST representations, but you can override that behavior and do whatever you like. One possible use case would be to implement persisted queries:
  • gqlTagIdentifiers - An array of names for gql tag identifiers (default = ["gql"])
// babel.config.js
plugins: [
    [
        "babel-plugin-graphql-tag",
        {
            strip: true,
            transform: (source, ast) => {
                const h = hash(source); // use your favorite hashing method
                graphqlAstHashes[h] = ast; // write this to a file when compilation is complete
                return {
                    queryId: h
                };
            }
        }
    ]
]

Known Issues

Some cases are really hard to track down:

const apolloClient = require('@apollo/client');
// or
import apolloClient from '@apollo/client';

const { gql } = apolloClient;

const foo = gql`...`;

If you have this kind of syntax, this plugin won't work for you.




鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap