babel plugin import graphql

Babel-Plugin-Import-Graphql

Babel -Plugin aktiviert import für .graphql und .gql -Dateien.

Für Benutzer des alten Paketnamens (Babel-Plugin-Inline-Import-Graphql-ast)

Abschalt-/Migrationsnotizen

Ab dem 27. Mai 2018 wird der Name babel-plugin-inline-import-graphql-ast Paket veraltet. Bitte verwenden Sie stattdessen babel-plugin-import-graphql (NPM).

Migration zu Babel-Plugin-Import-Graphql

Aktualisieren Sie Ihre Babel -Konfiguration

Update plugins -Array:

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

Aktualisieren Sie Ihre package.json -Datei

Aktualisieren Sie den Paketnamen in devDependencies :

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

Stellen Sie sicher, dass Ihre Versionszeichenfolge kompatibel ist:

Die erste korrekte Version von babel-plugin-import-graphql lautet 2.4.4 Stellen Sie also sicher, dass Ihre Versionszeichenfolge dies entspricht. Zum Beispiel ist "babel-plugin-import-graphql": "^2.0.0" in Ordnung wegen der Pflege.

Wenn Sie eine bestimmte Version festgehalten haben, müssen Sie mindestens 2.4.4 aktualisieren und anfeuern oder Ihren Versionsbereich erweitert, um ihn einzuschließen.

Herzlichen Glückwunsch, Sie sind alle festgelegt!

---

Wenn Sie mein Paket genießen, spielen Sie bitte das Github Repo oder teilen Sie auf Twitter (und folgen Sie mir für Updates)!

Voraussetzungen

• babel-core@^7.20.7 oder @babel/core@^7.0.0-beta.49 (niedrigere Betas kann funktionieren, aber nicht getestet)

• graphql-tag@^2.9.2 (nur wenn die unten beschriebene runtime verwendet wird)

Installieren

yarn add -D babel-plugin-import-graphql

oder

npm i -D babel-plugin-import-graphql

In .babelrc -Datei:

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

Jedes Mal, wenn Sie eine GraphQL -Datei ändern, muss der Cache gelöscht werden, damit die Änderungen wirksam werden.

Wenn Sie den Knoten verwenden, müssen der Ordner node_modules/.cache/babel-loader gelöscht werden. Ich empfehle, das relevante Skript in Ihrem package.json vorzubereiten. JSON.JSON und das Skript erneut auszahlen, wenn Sie eine GraphQL -Datei ändern:

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

Wenn Sie React Native verwenden, muss der Metro -Cache jedes Mal zurückgesetzt werden, wenn Sie eine GraphQL -Datei ändern:

 react-native start --reset-cache

HINWEIS: Windows -Benutzer müssten anstelle von rm -rf rimraf oder eine andere Lösung verwenden.

Grundnutzung

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

Unterstützte Funktionen

Schema -Dateien

Besonderheit	Beschreibung
Standardimport	Der gesamte Quellcode für die Datei fungiert als Standard -Export.
#import syntax	Typen usw. In einer GraphQL -Datei können mit dieser Syntax in eine andere GraphQL -Datei importiert werden: #import "./types.graphql" . Diese Importe werden rekursiv auf eine angemessene Tiefe von Dateien gelöst. Derzeit werden alle Inhalte in der benannten Datei importiert und es gibt keine Möglichkeit, bestimmte Typen zu importieren. Wenn Sie dieses Verhalten möchten, können Sie einen einzelnen Typ in jeder Datei speichern.

Betriebs-/Fragmentdateien

Alle Varianten der Importsyntax werden für Nicht-Schema-Dateien unterstützt, außer import './filename' .

Besonderheit	Beschreibung
Mehrere Operationen/Fragmente pro Datei	Mehrere Operationen (Abfragen/Mutationen/Abonnements) und/oder Fragmente können in eine einzelne Datei platziert werden. In diesem Fall können Sie jedoch keine benannten Operationen/Fragmente verwenden. Beispielsweise müsste query { test } query someName { test } .
Standardimport	Die erste oder einzige Operation/Fragment in einer Datei fungiert als Standard -Export. Aus Gründen der Abwärtskompatibilität fungiert jedoch sowohl Operationen als auch Fragmente in einer Datei, die erste Operation als Standard -Export.
Genannte Importe	Alle Operationen/Fragmente, einschließlich des Standards , fungieren als genannte Exporte.
#import syntax	Fragmente in einer GraphQL -Datei können mit dieser Syntax in eine andere GraphQL -Datei importiert werden: #import "./fragment.graphql" . Diese Importe werden rekursiv auf eine angemessene Tiefe von Dateien gelöst. Derzeit werden alle Fragmente in der benannten Datei importiert und es gibt keine Möglichkeit, bestimmte Fragmente zu importieren. Wenn Sie dieses Verhalten möchten, können Sie in jeder Datei ein einzelnes Fragment speichern.

Vollständiges Beispiel

Vor (ohne dieses 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 ) 

Nach (mit diesem 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 ) 

Optionen

Option	Typ	Standard	Beschreibung
nodePath	Saite	Wert der node_path -Umgebungsvariable	Für die Verwendung mit React-App-Wrewire-Inline-Import-Graphql-ast -verwendet, um die Auflösung absoluter Pfade zu Ihren .gql / .graphql Dateien zu ermöglichen. Wenn Sie bereits Ihre NODE_PATH -Variable in Ihrer Umgebung einstellen lassen, müssen Sie diese Option nicht festlegen. Derzeit nicht von #import syntax respektiert.
runtime	Boolean	FALSCH	Um diese Option zu aktivieren, muss graphql-tag als PeerDependency installiert werden. -Anstatt das analysierte AST-Objekt zu integrieren, das sehr groß ist, wird diese Option Ihren GraphQL-Quellcode zusammen mit einem Import der gql -Funktion von graphql-tag und analysiert und Ihren GraphQL-Quellcode zur Laufzeit mit gql analysiert.
extensions	Array	[]	Ermöglicht das Laden von GraphQL -SDL -Dateien mit einer benutzerdefinierten Erweiterung, z. B. Prisma '
emitDeclarations	Boolean	FALSCH	Aktiviert EMMITING .d.ts -Dateien neben der Quelldatei "Abfrage/Fragment" von GraphQL.

Für Benutzer von Create-React-Apps

Create-React-App-Benutzer können dieses Paket verwenden, ohne über React-App-Wrewire-Inline-Import-Graphql-Ast auszuwerfen

Credits

Das Verhalten dieses Plugins ist inspiriert und spiegelt meistens den GraphQL-Tag-Webpack-Loader wider

Dieses Paket begann als modifizierte Version von Babel-Plugin-Inline-Import