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

detrohutt/babel-plugin-import-graphql: Enables import syntax for .graphql and .g ...

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

开源软件名称(OpenSource Name):

detrohutt/babel-plugin-import-graphql

开源软件地址(OpenSource Url):

https://github.com/detrohutt/babel-plugin-import-graphql

开源编程语言(OpenSource Language):

JavaScript 98.7%

开源软件介绍(OpenSource Introduction):

npm Version npm Downloads npm License donate

babel-plugin-import-graphql

Babel plugin enabling import syntax for .graphql and .gql files.

For users of the old package name (babel-plugin-inline-import-graphql-ast)
Deprecation/Migration notes

As of May 27, 2018, the babel-plugin-inline-import-graphql-ast package name is deprecated. Please use babel-plugin-import-graphql (NPM) instead.

Migrating to babel-plugin-import-graphql

Update your babel configuration

Update plugins array:

babel-plugin-inline-import-graphql-ast (or inline-import-graphql-ast) -> import-graphql.

Update your package.json file

Update the package name in devDependencies:

babel-plugin-inline-import-graphql-ast -> babel-plugin-import-graphql.

Make sure your version string is compatible:

The first correct version of babel-plugin-import-graphql is 2.4.4 so please make sure your version string matches that. For instance, "babel-plugin-import-graphql": "^2.0.0" is fine because of the caret.

If you've pinned to a specific version, you'll need to upgrade and pin to at least 2.4.4 or widen your version range to include it.

Congratulations, you're all set!


If you enjoy my package please star the GitHub repo or share on Twitter (and follow me for updates)!

Prerequisites

  • babel-core@^6.26.3 or @babel/core@^7.0.0-beta.40 (Lower betas may work but weren't tested)

  • graphql-tag@^2.1.0 (only if using the runtime option described below)

Install

$ yarn add -D babel-plugin-import-graphql

In .babelrc file:

{
  "plugins": ["import-graphql"]
}

Each time you modify a GraphQL file, the cache must be cleared for the changes to take effect.

If using node then the node_modules/.cache/babel-loader folder must be cleared. I recommend prepending the relevant script in your package.json and rerunning the script when you change a GraphQL file:

{
  "scripts": {
    "start": "rm -rf ./node_modules/.cache/babel-loader && node index.js"
  }
}

If using React Native then the metro cache must be reset every time you change a GraphQL file:

react-native start --reset-cache

Note: Windows users would need to use rimraf or another solution in place of rm -rf.

Basic Usage

...
import myQuery from './query.graphql'
...
export default graphql(myQuery)(myComponent)

Supported features

Schema files

Feature Description
Default import The entire source code for the file will act as the default export.
#import syntax Types, etc. in one GraphQL file can be imported into another GraphQL file using this syntax: #import "./types.graphql". These imports will be resolved recursively to any reasonable depth of files. Currently, all content in the named file will be imported and there is no way to import specific types. If you want that behavior, you can store a single type in each file.

Operation/fragment files

All variants of the import syntax are supported for non-schema files, except import './filename'.

Feature Description
Multiple operations/fragments per file Multiple operations (queries/mutations/subscriptions) and/or fragments can be placed in a single file. However, in this case you cannot use unnamed operations/fragments. For example, query { test } would need to be query someName { test }.
Default import The first or only operation/fragment in a file will act as the default export. However, for backwards compatibility reasons, if there are both operations and fragments in a file, the first operation will act as the default export.
Named imports All operations/fragments, including the default, act as named exports.
#import syntax Fragments in one GraphQL file can be imported into another GraphQL file using this syntax: #import "./fragment.graphql". These imports will be resolved recursively to any reasonable depth of files. Currently, all fragments in the named file will be imported and there is no way to import specific fragments. If you want that behavior, you can store a single fragment in each file.

Full example

Before (without this plugin):

ProductsPage.js

import React, { Component } from 'react'
import gql from 'graphql-tag'
import { graphql } from 'react-apollo'

class ProductsPage extends Component {
  render() {
    if (this.props.data.loading) return <h3>Loading...</h3>
    return <div>{`This is my data: ${this.props.data.queryName}`}</div>
  }
}

const productsQuery = gql`
  query products {
    products {
      productId
      name
      description
      weight
    }
  }
`

export default graphql(productsQuery)(ProductsPage)

After (with this plugin):

productFragment.graphql

fragment productFragment on Product {
  name
  description
  weight
}

productsQuery.graphql

#import "./productFragment.graphql"
query products {
  products {
    productId
    ...productFragment
  }
}

ProductsPage.js

import React, { Component } from 'react'
import { graphql } from 'react-apollo'
import myImportedQuery from './productsQuery.graphql'

class ProductsPage extends Component {
  render() {
    if (this.props.data.loading) return <h3>Loading...</h3>
    return <div>{`This is my data: ${this.props.data.queryName}`}</div>
  }
}

export default graphql(myImportedQuery)(ProductsPage)

Options

Option Type Default Description
nodePath String value of NODE_PATH environment variable Intended for use with react-app-rewire-inline-import-graphql-ast -- Used to allow resolution of absolute paths to your .gql/.graphql files. If you already have your NODE_PATH variable set in your environment, you don't need to set this option. Not currently respected by #import syntax.
runtime Boolean false Enabling this option requires graphql-tag to be installed as a peerDependency. -- Instead of inlining the parsed AST object, which is very large, this option inlines your GraphQL source code along with an import of the gql function from graphql-tag and parses your GraphQL source code with gql at runtime.
extensions Array [] Enables loading GraphQL SDL files that have a custom extension, e.g. '.prisma'
emitDeclarations Boolean false Enables emmitting .d.ts files next to GraphQL query/fragment source file.

For users of create-react-app

create-react-app users can use this package without ejecting via react-app-rewire-inline-import-graphql-ast

Credits

The behavior of this plugin is inspired by and mostly mirrors the graphql-tag Webpack loader

This package started out as a modified version of babel-plugin-inline-import




鲜花

握手

雷人

路过

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

请发表评论

全部评论

专题导读
上一篇:
datastaxdevs/workshop-intro-to-graphql发布时间:2022-07-10
下一篇:
solo-io/sqoop: The GraphQL Engine powered by Gloo发布时间:2022-07-10
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

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

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

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