babel plugin import graphql

Babel-Plugin-Import-Graphql

Babel Plugin Habilitando a sintaxe import para arquivos .graphql e .gql .

Para usuários do nome antigo do pacote (Babel-Plugin-Inline-Import-Graphql-ATR)

Notas de deprecação/migração

Em 27 de maio de 2018, o nome do pacote babel-plugin-inline-import-graphql-ast está descontinuado. Por favor, use babel-plugin-import-graphql (NPM).

Migrando para Babel-Plugin-Import-Graphql

Atualize sua configuração de Babel

ATUALIZAÇÃO ARRAY plugins :

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

Atualize seu arquivo package.json

Atualize o nome do pacote em devDependencies :

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

Verifique se a sua sequência de versão é compatível:

A primeira versão correta do babel-plugin-import-graphql é 2.4.4 , portanto, verifique se a string da sua versão corresponde a isso. Por exemplo, "babel-plugin-import-graphql": "^2.0.0" está bem por causa do cuidador.

Se você fixou em uma versão específica, precisará atualizar e fixar para pelo menos 2.4.4 ou ampliar seu intervalo de versão para incluí -lo.

Parabéns, você está pronto!

---

Se você gosta do meu pacote, estrela o repositório do Github ou compartilhe no Twitter (e siga -me para atualizações)!

Pré -requisitos

• babel-core@^7.20.7 ou @babel/core@^7.0.0-beta.49 (betas mais baixos podem funcionar, mas não foram testados)

• graphql-tag@^2.9.2 (somente se estiver usando a opção runtime descrita abaixo)

Instalar

yarn add -D babel-plugin-import-graphql

ou

npm i -D babel-plugin-import-graphql

No arquivo .babelrc :

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

Cada vez que você modifica um arquivo grafql, o cache deve ser limpo para que as alterações entrem em vigor.

Se estiver usando o nó, a pasta node_modules/.cache/babel-loader deve ser limpa. Eu recomendo pré -precender o script relevante em seu package.json e executar o script quando você altera um arquivo grafql:

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

Se estiver usando o react nativo, o cache do metrô deve ser redefinido toda vez que você alterar um arquivo graphql:

 react-native start --reset-cache

Nota: os usuários do Windows precisariam usar rimraf ou outra solução no lugar do rm -rf .

Uso básico

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

Recursos suportados

Arquivos de esquema

Recurso	Descrição
Importação padrão	Todo o código -fonte inteiro para o arquivo atuará como a exportação padrão.
Sintaxe #import	Tipos, etc. Em um arquivo grafql, pode ser importado para outro arquivo grafql usando esta sintaxe: #import "./types.graphql" . Essas importações serão resolvidas recursivamente a qualquer profundidade razoável dos arquivos. Atualmente, todo o conteúdo no arquivo nomeado será importado e não há como importar tipos específicos. Se você deseja esse comportamento, você pode armazenar um único tipo em cada arquivo.

Arquivos de operação/fragmento

Todas as variantes da sintaxe de importação são suportadas para arquivos não schema, exceto import './filename' .

Recurso	Descrição
Múltiplas operações/fragmentos por arquivo	Várias operações (consultas/mutações/assinaturas) e/ou fragmentos podem ser colocadas em um único arquivo. No entanto, neste caso, você não pode usar operações/fragmentos sem nome. Por exemplo, query { test } precisaria ser query someName { test } .
Importação padrão	A primeira ou única operação/fragmento em um arquivo atuará como a exportação padrão. No entanto, por motivos de compatibilidade com versões anteriores, se houver operações e fragmentos em um arquivo, a primeira operação atuará como a exportação padrão.
Nomeadas importações	Todas as operações/fragmentos, incluindo o padrão , atuam como exportações nomeadas.
Sintaxe #import	Os fragmentos em um arquivo grafql podem ser importados para outro arquivo graphql usando esta sintaxe: #import "./fragment.graphql" . Essas importações serão resolvidas recursivamente a qualquer profundidade razoável dos arquivos. Atualmente, todos os fragmentos no arquivo nomeado serão importados e não há como importar fragmentos específicos. Se você deseja esse comportamento, pode armazenar um único fragmento em cada arquivo.

Exemplo completo

Antes (sem este 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 ) 

Depois (com este 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 ) 

Opções

Opção	Tipo	Padrão	Descrição
nodePath	Corda	Valor da variável de ambiente node_path	Destinado ao uso com react-app-lawire-inline-import-graphql-at -usado para permitir a resolução de caminhos absolutos para seus arquivos .gql / .graphql . Se você já possui sua variável NODE_PATH definida em seu ambiente, não precisa definir esta opção. Atualmente não é respeitado pela sintaxe #import .
runtime	Booleano	falso	A ativação dessa opção requer que graphql-tag seja instalado como uma dependência do Peer. -Em vez de preencher o objeto AST analisado, que é muito grande, essa opção entra seu código-fonte grafql, juntamente com uma importação da função gql da graphql-tag e analisa seu código-fonte grafql com gql no tempo de execução.
extensions	Variedade	[]	Ativa o carregamento de arquivos SDL grafql que possuem uma extensão personalizada, por exemplo, '.prisma'
emitDeclarations	Booleano	falso	Ativa os arquivos Emmitting .d.ts ao lado do arquivo de origem de consulta/fragmento GraphQL.

Para usuários do Create-React-App

Usuários Create-React-App podem usar este pacote sem ejetar via React-App-Lawire-Inline-Import-Graphql-ATR

Créditos

O comportamento deste plug-in é inspirado e reflete principalmente o carregador grafql-tag webpack

Este pacote começou como uma versão modificada do Babel-Plugin-Inline-Import