babel plugin import graphql

Babel-Plugin-Import-GraphQL

Plugin Babel permettant une syntaxe import pour les fichiers .graphql et .gql .

Pour les utilisateurs de l'ancien nom du package (Babel-Plugin-inline-Import-GraphQL-AST)

Notes de dépréciation / migration

Au 27 mai 2018, le nom du package babel-plugin-inline-import-graphql-ast est obsolète. Veuillez utiliser babel-plugin-import-graphql (NPM) à la place.

Migrer vers babel-plugin-import-graphql

Mettez à jour votre configuration Babel

Mettre à jour le tableau plugins :

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

Mettez à jour votre fichier package.json

Mettez à jour le nom du package dans devDependencies :

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

Assurez-vous que votre chaîne de version est compatible:

La première version correcte de babel-plugin-import-graphql est 2.4.4 Alors, veuillez vous assurer que votre chaîne de version correspond à cela. Par exemple, "babel-plugin-import-graphql": "^2.0.0" est bien à cause du caret.

Si vous avez épinglé à une version spécifique, vous devrez mettre à niveau et épingler à au moins 2.4.4 ou élargir votre plage de versions pour l'inclure.

Félicitations, vous êtes prêt!

---

Si vous appréciez mon colis, veuillez jouer le repo GitHub ou partager sur Twitter (et suivre pour les mises à jour)!

Condition préalable

• babel-core@^7.20.7 ou @babel/core@^7.0.0-beta.49 (les bêtas inférieurs peuvent fonctionner mais n'ont pas été testés)

• graphql-tag@^2.9.2 (uniquement si vous utilisez l'option runtime décrite ci-dessous)

Installer

yarn add -D babel-plugin-import-graphql

ou

npm i -D babel-plugin-import-graphql

Dans le fichier .babelrc :

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

Chaque fois que vous modifiez un fichier GraphQL, le cache doit être effacé pour que les modifications prennent effet.

Si vous utilisez le nœud, le dossier node_modules/.cache/babel-loader doit être effacé. Je recommande d'avancer le script pertinent dans votre package.json et de relancer le script lorsque vous modifiez un fichier GraphQL:

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

Si vous utilisez React Native, le cache Metro doit être réinitialisé chaque fois que vous modifiez un fichier GraphQL:

 react-native start --reset-cache

Remarque: Les utilisateurs de Windows devraient utiliser rimraf ou une autre solution à la place de rm -rf .

Utilisation de base

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

Fonctionnalités prises en charge

Fichiers de schéma

Fonctionnalité	Description
Importation par défaut	L'ensemble du code source du fichier agira comme l'exportation par défaut.
Syntaxe d'import	Types, etc. Dans un fichier GraphQL, peuvent être importés dans un autre fichier GraphQL à l'aide de cette syntaxe: #import "./types.graphql" . Ces importations seront résolues récursivement à toute profondeur de fichiers raisonnable. Actuellement, tout le contenu du fichier nommé sera importé et il n'y a aucun moyen d'importer des types spécifiques. Si vous voulez ce comportement, vous pouvez stocker un seul type dans chaque fichier.

Fichiers de fonctionnement / fragment

Toutes les variantes de la syntaxe d'importation sont prises en charge pour les fichiers non schema, à l'exception import './filename' .

Fonctionnalité	Description
Plusieurs opérations / fragments par fichier	Plusieurs opérations (requêtes / mutations / abonnements) et / ou fragments peuvent être placées dans un seul fichier. Cependant, dans ce cas, vous ne pouvez pas utiliser les opérations / fragments sans nom. Par exemple, query { test } devrait être query someName { test } .
Importation par défaut	La première ou unique opération / fragment dans un fichier agira comme l'exportation par défaut. Cependant, pour des raisons de compatibilité vers l'arrière, s'il y a à la fois des opérations et des fragments dans un fichier, la première opération agira comme l'exportation par défaut.
Importations nommées	Toutes les opérations / fragments, y compris la valeur par défaut , agissent comme des exportations nommées.
Syntaxe d'import	Les fragments dans un fichier GraphQL peuvent être importés dans un autre fichier GraphQL à l'aide de cette syntaxe: #import "./fragment.graphql" . Ces importations seront résolues récursivement à toute profondeur de fichiers raisonnable. Actuellement, tous les fragments du fichier nommé seront importés et il n'y a aucun moyen d'importer des fragments spécifiques. Si vous voulez ce comportement, vous pouvez stocker un seul fragment dans chaque fichier.

Exemple complet

Avant (sans ce 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 ) 

Après (avec ce plugin):

produitfragment.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	Taper	Défaut	Description
nodePath	Chaîne	Valeur de la variable d'environnement Node_Path	Destiné à être utilisé avec React-App-Vrewire-inline-Import-GraphQL-AST - utilisé pour permettre la résolution des chemins absolus vers vos fichiers .gql / .graphql . Si vous avez déjà votre variable NODE_PATH dans votre environnement, vous n'avez pas besoin de définir cette option. Pas actuellement respecté par la syntaxe #import .
runtime	Booléen	FAUX	L'activation de cette option nécessite que graphql-tag soit installé en tant que pairdependency. - Au lieu d'inlinter l'objet AST analysé, qui est très grand, cette option incline votre code source GraphQL avec une importation de la fonction gql à partir de graphql-tag et analyse votre code source GraphQL avec gql à l'exécution.
extensions	Tableau	[]	Permet le chargement de fichiers GraphQL SDL qui ont une extension personnalisée, par exemple '.prima'
emitDeclarations	Booléen	FAUX	Active Emmiting .d.ts Files à côté du fichier source GraphQL Query / Fragment.

Pour les utilisateurs de Create-REACT-App

Les utilisateurs de création-react-app peuvent utiliser ce package sans éjecter via react-app-liwire-inline-import-graphql-ast

Crédits

Le comportement de ce plugin est inspiré et reflète principalement le chargeur de webpack graphql-tag

Ce package a commencé comme une version modifiée de Babel-Plugin-inline-Import