babel plugin import graphql

babel-plugin-import-graphql

babel插件启用了.graphql和.gql文件的import语法。

适用于旧软件包名称的用户（babel-plugin-inline-import-graphql-ast）

折旧/迁移说明

截至2018年5月27日，拒绝了babel-plugin-inline-import-graphql-ast套件名称。请改用babel-plugin-import-graphql （NPM）。

迁移到Babel-Plugin-Import-Graphql

更新您的Babel配置

更新plugins数组：

babel-plugin-inline-import-graphql-ast （或inline-import-graphql-ast ） - > import-graphql 。

更新您的package.json 。

在devDependencies中更新软件包名称：

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

确保您的版本字符串兼容：

babel-plugin-import-graphql的第一个正确版本为2.4.4 ，因此请确保您的版本字符串与之匹配。例如， "babel-plugin-import-graphql": "^2.0.0"因为镜头是可以的。

如果您已将其固定在特定版本上，则需要升级和固定至至少2.4.4或扩大您的版本范围以包括它。

恭喜，你们都准备好了！

---

如果您喜欢我的包裹，请播放GitHub Repo或在Twitter上分享（并关注我以获取更新）！

先决条件

• babel-core@^7.20.7或@babel/core@^7.0.0-beta.49 （较低的beta可能起作用，但未测试）

• graphql-tag@^2.9.2 （仅当使用下面描述的runtime选项时）

安装

yarn add -D babel-plugin-import-graphql

或者

npm i -D babel-plugin-import-graphql

在.babelrc文件中：

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

每次修改GraphQl文件时，都必须清除缓存才能生效。

如果使用节点，则必须清除node_modules/.cache/babel-loader文件夹。我建议您在您的package.json中准备相关脚本。

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

如果使用React Native，则每次更改GraphQl文件时都必须重置地铁缓存：

 react-native start --reset-cache

注意：Windows用户需要使用rimraf或其他解决方案代替rm -rf 。

基本用法

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

支持的功能

模式文件

特征	描述
默认导入	该文件的整个源代码将充当默认导出。
#IMPORT语法	类型等。在一个GraphQl中，可以使用此语法将其导入另一个GraphQl文件： #import "./types.graphql" 。这些导入将递归解决任何合理的文件深度。当前，指定文件中的所有内容都将被导入，并且无法导入特定类型。如果您需要该行为，则可以在每个文件中存储一个类型。

操作/片段文件

除import './filename'外，还支持导入语法的所有变体。

特征	描述
每个文件多次操作/片段	可以将多个操作（查询/突变/订阅）和/或片段放在单个文件中。但是，在这种情况下，您不能使用未命名的操作/片段。例如， query { test }需要是query someName { test } 。
默认导入	文件中的第一个或唯一的操作/片段将充当默认导出。但是，出于向后兼容的原因，如果文件中同时存在操作和片段，则第一个操作将充当默认导出。
命名为导入	所有操作/片段（包括默认值）充当命名出口。
#IMPORT语法	一个GraphQl文件中的片段可以使用此语法： #import "./fragment.graphql"将其导入另一个GraphQl文件。这些导入将递归解决任何合理的文件深度。当前，将导入指定文件中的所有片段，并且无法导入特定片段。如果需要这种行为，则可以在每个文件中存储一个片段。

完整的例子

之前（没有此插件）：

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 ) 

之后（使用此插件）：

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 ) 

选项

选项	类型	默认	描述
nodePath	细绳	Node_path环境变量的值	旨在与react-app-rewire-inline-import-graphql-ast一起使用- 用于允许将绝对路径分辨到.gql / .graphql文件。如果您已经在环境中设置了NODE_PATH变量，则无需设置此选项。 #import语法目前尚未尊重。
runtime	布尔	错误的	启用此选项需要将graphql-tag安装为同行依赖性。 - 与其包含非常大的解析的AST对象，该选项将您的GraphQL源代码与graphql-tag导入gql函数，并在运行时用gql插入GraphQl源代码。
extensions	大批	[]	启用加载具有自定义扩展名的GraphQl SDL文件，例如'.prisma'
emitDeclarations	布尔	错误的	启用Emmmunting .d.ts文件旁边的GraphQl查询/片段源文件。

适用于Create-React-App的用户

Create-React-App用户可以使用此软件包，而无需通过React-App-rewire-inline-import-graphql-ast弹出

学分

该插件的行为受到启发，主要反映了GraphQL-TAG WebPack Loader

此软件包最初是Babel-Plugin-Inline-Import的修改版本