babel plugin import graphql

BABEL-PLUGIN-IMPORT-GRAPHQL

.graphqlおよび.gqlファイルのimport構文を有効にするBABELプラグイン。

古いパッケージ名のユーザー向け（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 （下部ベータ版は機能するかもしれませんが、テストされていません）

• graphql-tag@^2.9.2 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フォルダーをクリアする必要があります。 GraphQLファイルを変更したときに、 package.jsonで関連するスクリプトを準備し、スクリプトを再実行することをお勧めします。

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

Native Nativeを使用している場合、GraphQLファイルを変更するたびにMetro Cacheをリセットする必要があります。

 react-native start --reset-cache

注：Windowsユーザーはrm -rfの代わりにrimrafまたは別のソリューションを使用する必要があります。

基本的な使用法

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

サポートされている機能

スキーマファイル

特徴	説明
デフォルトのインポート	ファイルのソースコード全体がデフォルトのエクスポートとして機能します。
#import構文	タイプなど。1つのGraphQLファイルを、この構文を使用して別のGraphQLファイルにインポートできます： #import "./types.graphql" 。これらのインポートは、合理的なファイルの深さまで再帰的に解決されます。現在、名前付きファイルのすべてのコンテンツがインポートされ、特定のタイプをインポートする方法はありません。その動作が必要な場合は、各ファイルに単一のタイプを保存できます。

操作/フラグメントファイル

import './filename'を除く、インポート構文のすべてのバリアントは、非スキーマファイルでサポートされています。

特徴	説明
ファイルごとの複数の操作/フラグメント	複数の操作（クエリ/突然変異/サブスクリプション）および/またはフラグメントを単一のファイルに配置できます。ただし、この場合、名前のない操作/フラグメントを使用することはできません。たとえば、 query { test } query someName { test }である必要があります。
デフォルトのインポート	ファイル内の最初または唯一の操作/フラグメントは、デフォルトのエクスポートとして機能します。ただし、後方互換性の理由で、ファイルに操作とフラグメントの両方がある場合、最初の操作はデフォルトのエクスポートとして機能します。
名前付きインポート	デフォルトを含むすべての操作/フラグメントは、輸出と呼ばれます。
#import構文	あるGraphQLファイルのフラグメントは、この構文を使用して別のGraphQLファイルにインポートできます： #import "./fragment.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ファイルのロードを有効にします。
emitDeclarations	ブール	間違い	GraphQLクエリ/フラグメントソースファイルの横にある.d.tsファイルをemmitting.d.tsファイルを有効にします。

Create-React-Appのユーザー向け

Create-React-Appユーザーは、React-App-App-Rewire-Inline-Import-GraphQl-astを介して排出せずにこのパッケージを使用できます

クレジット

このプラグインの動作は、GraphQL-Tag Webpackローダーに触発され、ほとんどを反映しています

このパッケージは、Babel-Plugin-Inline-Importの修正バージョンとして始まりました