babel plugin import graphql Unduh - babel plugin import graphql Unduh

babel plugin import graphql

Kode Sumber AI

v2.8.1

Unduh

BABEL-PLUGIN-IMPORT-GRAPHQL

Plugin Babel Mengaktifkan Sintaks import untuk file .graphql dan .gql .

Untuk pengguna nama paket lama (babel-plugin-inline-import-graphql-ast)

CATATAN DESPRECATION/MIGRASI

Pada 27 Mei 2018, nama paket babel-plugin-inline-import-graphql-ast sudah usang. Harap gunakan babel-plugin-import-graphql (NPM) sebagai gantinya.

Migrasi ke babel-plugin-import-graphql

Perbarui Konfigurasi Babel Anda

Perbarui `plugins` Array:

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

Perbarui file `package.json` Anda

Perbarui nama paket di `devDependencies` :

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

Pastikan string versi Anda kompatibel:

Versi pertama yang benar dari babel-plugin-import-graphql adalah 2.4.4 jadi pastikan string versi Anda cocok dengan itu. Misalnya, "babel-plugin-import-graphql": "^2.0.0" baik-baik saja karena karetnya.

Jika Anda telah disematkan ke versi tertentu, Anda harus meningkatkan dan menyematkan setidaknya 2.4.4 atau memperluas rentang versi Anda untuk memasukkannya.

Selamat, Anda siap!

Jika Anda menikmati paket saya, silakan bintangi repo GitHub atau bagikan di Twitter (dan ikuti saya untuk pembaruan)!

Prasyarat

babel-core@^7.20.7 atau @babel/core@^7.0.0-beta.49 (beta bawah mungkin berfungsi tetapi tidak diuji)
graphql-tag@^2.9.2 (hanya jika menggunakan opsi runtime yang dijelaskan di bawah)

Memasang

yarn add -D babel-plugin-import-graphql

atau

npm i -D babel-plugin-import-graphql

Dalam file .babelrc :

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

Setiap kali Anda memodifikasi file graphql, cache harus dihapus agar perubahan berlaku.

Jika menggunakan node maka folder node_modules/.cache/babel-loader harus dihapus. Saya merekomendasikan untuk mempersiapkan skrip yang relevan di package.json Anda.

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

Jika menggunakan Native React maka cache metro harus diatur ulang setiap kali Anda mengubah file graphql:

 react-native start --reset-cache

Catatan: Pengguna Windows perlu menggunakan rimraf atau solusi lain sebagai pengganti rm -rf .

Penggunaan dasar

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

Fitur yang didukung

File skema

Fitur	Keterangan
Impor default	Seluruh kode sumber untuk file akan bertindak sebagai ekspor default.
Sintaks #Import	Jenis, dll. Dalam satu file graphql dapat diimpor ke file graphql lain menggunakan sintaks ini: `#import "./types.graphql"` . Impor ini akan diselesaikan secara rekursif ke kedalaman file yang wajar. Saat ini, semua konten dalam file bernama akan diimpor dan tidak ada cara untuk mengimpor jenis tertentu. Jika Anda menginginkan perilaku itu, Anda dapat menyimpan satu jenis di setiap file.

File operasi/fragmen

Semua varian sintaks impor didukung untuk file non-Schema, kecuali import './filename' .

Fitur	Keterangan
Beberapa operasi/fragmen per file	Beberapa operasi (kueri/mutasi/langganan) dan/atau fragmen dapat ditempatkan dalam satu file. Namun, dalam hal ini Anda tidak dapat menggunakan operasi/fragmen yang tidak disebutkan namanya. Misalnya, `query { test }` perlu `query someName { test }` .
Impor default	Operasi/satu -satunya fragmen pertama atau satu dalam file akan bertindak sebagai ekspor default. Namun, untuk alasan kompatibilitas ke belakang, jika ada operasi dan fragmen dalam file, operasi pertama akan bertindak sebagai ekspor default.
Nama Impor	Semua operasi/fragmen, termasuk default , bertindak sebagai ekspor bernama.
Sintaks #Import	Fragmen dalam satu file graphql dapat diimpor ke file graphql lain menggunakan sintaks ini: `#import "./fragment.graphql"` . Impor ini akan diselesaikan secara rekursif ke kedalaman file yang wajar. Saat ini, semua fragmen dalam file bernama akan diimpor dan tidak ada cara untuk mengimpor fragmen tertentu. Jika Anda menginginkan perilaku itu, Anda dapat menyimpan satu fragmen di setiap file.

Contoh lengkap

Sebelum (tanpa plugin ini):

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 )

Setelah (dengan plugin ini):

ProductFragment.graphql

 fragment productFragment on Product {
  name
  description
  weight
}

PrododesQuery.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 )

Opsi

Pilihan	Jenis	Bawaan	Keterangan
`nodePath`	Rangkaian	nilai variabel lingkungan node_path	Dimaksudkan untuk digunakan dengan react-app-rewire-inline-import-graphql-ast -digunakan untuk memungkinkan resolusi jalur absolut ke file `.gql` / `.graphql` Anda. Jika Anda sudah memiliki variabel `NODE_PATH` di lingkungan Anda, Anda tidak perlu mengatur opsi ini. Saat ini tidak dihormati oleh Sintaks `#import` .
`runtime`	Boolean	PALSU	Mengaktifkan opsi ini membutuhkan `graphql-tag` untuk diinstal sebagai ketergantungan peerder. -Alih-alih memasukkan objek AST yang diuraikan, yang sangat besar, opsi ini memasukkan kode sumber GraphQL Anda bersama dengan impor fungsi `gql` dari `graphql-tag` dan parse kode sumber GraphQL Anda dengan `gql` saat runtime.
`extensions`	Array	[]	Mengaktifkan memuat file SDL graphql yang memiliki ekstensi khusus, misalnya .prisma '
`emitDeclarations`	Boolean	PALSU	Mengaktifkan file emmitting `.d.ts` di sebelah file sumber kueri/fragmen GraphQL.