babel plugin import graphql

Babel-Plugin-Import-Graphql

El complemento Babel habilita la sintaxis import para los archivos .graphql y .gql .

Para los usuarios del antiguo nombre del paquete (Babel-Plugin-Inline-Import-Graphql-AST)

Notas de deprecación/migración

A partir del 27 de mayo de 2018, el nombre del paquete babel-plugin-inline-import-graphql-ast está en desuso. Utilice babel-plugin-import-graphql (NPM) en su lugar.

Migrar a Babel-Plugin-Import-Graphql

Actualice su configuración de Babel

Actualización de la matriz plugins :

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

Actualice su archivo package.json

Actualice el nombre del paquete en devDependencies :

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

Asegúrese de que la cadena de su versión sea compatible:

La primera versión correcta de babel-plugin-import-graphql es 2.4.4 así que asegúrese de que su versión de cadena coincida con eso. Por ejemplo, "babel-plugin-import-graphql": "^2.0.0" está bien debido al careto.

Si ha fijado una versión específica, deberá actualizar y fijar al menos 2.4.4 o ampliar su rango de versiones para incluirla.

Felicitaciones, ¡estás listo!

---

Si disfrutas de mi paquete, ¡protagonice el repositorio de GitHub o comparta en Twitter (y sígueme para obtener actualizaciones)!

Requisitos previos

• babel-core@^7.20.7 o @babel/core@^7.0.0-beta.49 (las betas más bajas pueden funcionar pero no se probaron)

• graphql-tag@^2.9.2 (solo si se usa la opción runtime que se describe a continuación)

Instalar

yarn add -D babel-plugin-import-graphql

o

npm i -D babel-plugin-import-graphql

En el archivo .babelrc :

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

Cada vez que modifica un archivo GraphQL, el caché debe borrarse para que los cambios entren en vigencia.

Si se usa el nodo, se debe borrar el node_modules/.cache/babel-loader . Recomiendo preprender el script relevante en su package.json y volver a ejecutar el script cuando cambia un archivo GraphQL:

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

Si usa React Native, el Metro Cache debe restablecerse cada vez que cambie un archivo GRAPHQL:

 react-native start --reset-cache

Nota: Los usuarios de Windows necesitarían usar rimraf u otra solución en lugar de rm -rf .

Uso básico

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

Características compatibles

Archivos de esquema

Característica	Descripción
Importación predeterminada	Todo el código fuente para el archivo actuará como la exportación predeterminada.
#Sintaxis de Import	Los tipos, etc. en un archivo GraphQL se pueden importar a otro archivo GraphQL utilizando esta sintaxis: #import "./types.graphql" . Estas importaciones se resolverán de manera recursiva a cualquier profundidad razonable de archivos. Actualmente, se importará todo el contenido en el archivo nombrado y no hay forma de importar tipos específicos. Si desea ese comportamiento, puede almacenar un solo tipo en cada archivo.

Archivos de operación/fragmento

Todas las variantes de la sintaxis de importación son compatibles con archivos que no son de Schema, excepto import './filename' .

Característica	Descripción
Múltiples operaciones/fragmentos por archivo	Se pueden colocar múltiples operaciones (consultas/mutaciones/suscripciones) y/o fragmentos en un solo archivo. Sin embargo, en este caso no puede usar operaciones/fragmentos sin nombre. Por ejemplo, query { test } necesitaría ser query someName { test } .
Importación predeterminada	La primera o única operación/fragmento en un archivo actuará como la exportación predeterminada. Sin embargo, por las razones de compatibilidad hacia atrás, si hay operaciones y fragmentos en un archivo, la primera operación actuará como la exportación predeterminada.
Importaciones nombradas	Todas las operaciones/fragmentos, incluido el valor predeterminado , actúan como las exportaciones nombradas.
#Sintaxis de Import	Los fragmentos en un archivo GraphQL se pueden importar a otro archivo GraphQL utilizando esta sintaxis: #import "./fragment.graphql" . Estas importaciones se resolverán de manera recursiva a cualquier profundidad razonable de archivos. Actualmente, todos los fragmentos en el archivo nombrado se importarán y no hay forma de importar fragmentos específicos. Si desea ese comportamiento, puede almacenar un solo fragmento en cada archivo.

Ejemplo completo

Antes (sin este complemento):

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 ) 

Después (con este complemento):

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 ) 

Opción

Opción	Tipo	Por defecto	Descripción
nodePath	Cadena	Valor de la variable de entorno node_path	Destinado a usar con react-app-srewire-inline-impleport-Graphql-AST : se utiliza para permitir la resolución de rutas absolutas a sus archivos .gql / .graphql . Si ya tiene su variable NODE_PATH configurada en su entorno, no necesita establecer esta opción. Actualmente no se respeta por la sintaxis #import .
runtime	Booleano	FALSO	Habilitar esta opción requiere que graphql-tag se instale como una PeerDependency. -En lugar de incorporar el objeto AST analizado, que es muy grande, esta opción insulta su código fuente GRAPHQL junto con una importación de la función gql de graphql-tag y analiza su código fuente GRAPHQL con gql en tiempo de ejecución.
extensions	Formación	[]	Habilita la carga de archivos SDL GraphQL que tienen una extensión personalizada, por ejemplo, '.Prisma'
emitDeclarations	Booleano	FALSO	Habilita los archivos .d.ts emmitting junto al archivo de fuente GraphQL Consuly/Fragment.

Para usuarios de CREATE-REACT-APP

Los usuarios de creación-react-app pueden usar este paquete sin expulsar a través de react-app-srewire-inline-import-graphql-AST

Créditos

El comportamiento de este complemento se inspira y refleja principalmente el cargador de poca web GraphQL-Tag

Este paquete comenzó como una versión modificada de Babel-Plugin-Inline-Import