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的修改版本