babel plugin import graphql
v2.8.1
ปลั๊กอิน Babel เปิดใช้งานไวยากรณ์ import สำหรับไฟล์. .graphql และ .gql
ณ วันที่ 27 พฤษภาคม 2018 ชื่อแพ็คเกจ babel-plugin-inline-import-graphql-ast จะเลิกใช้แล้ว โปรดใช้ babel-plugin-import-graphql (NPM) แทน
plugins อาร์เรย์: babel-plugin-inline-import-graphql-ast (หรือ inline-import-graphql-ast )-> import-graphql
package.json ของคุณ devDependencies : babel-plugin-inline-import-graphql-ast > babel-plugin-import-graphql
รุ่นแรกที่ถูกต้องของ babel-plugin-import-graphql คือ 2.4.4 ดังนั้นโปรดตรวจสอบให้แน่ใจว่าสตริงเวอร์ชันของคุณตรงกับที่ ตัวอย่างเช่น "babel-plugin-import-graphql": "^2.0.0" นั้นใช้ได้เพราะผู้ดูแล
หากคุณตรึงเป็นเวอร์ชันเฉพาะคุณจะต้องอัปเกรดและ PIN เป็นอย่างน้อย 2.4.4 หรือขยายช่วงเวอร์ชันของคุณเพื่อรวมไว้
ขอแสดงความยินดีคุณพร้อมแล้ว!
หากคุณสนุกกับแพ็คเกจของฉันโปรดแสดง GitHub Repo หรือแบ่งปันบน Twitter (และติดตามฉันเพื่อรับการอัปเดต)!
babel-core@^7.20.7 หรือ @babel/core@^7.0.0-beta.49 (betas ที่ต่ำกว่าอาจใช้งานได้ แต่ไม่ได้ทดสอบ)
graphql-tag@^2.9.2 (เฉพาะในกรณีที่ใช้ตัวเลือก runtime ที่อธิบายไว้ด้านล่าง)
yarn add -D babel-plugin-import-graphqlหรือ
npm i -D babel-plugin-import-graphql ในไฟล์ .babelrc :
{
"plugins" : [ " import-graphql " ]
}ทุกครั้งที่คุณแก้ไขไฟล์ graphql แคชจะต้องล้างเพื่อการเปลี่ยนแปลงเพื่อให้มีผล
หากใช้โหนดแล้วโฟลเดอร์ node_modules/.cache/babel-loader จะต้องล้าง ฉันขอแนะนำให้เตรียมสคริปต์ที่เกี่ยวข้องไว้ล่วงหน้าใน package.json ของคุณและอีกครั้งในสคริปต์เมื่อคุณเปลี่ยนไฟล์ graphql:
{
"scripts" : {
"start" : " rm -rf ./node_modules/.cache/babel-loader && node index.js "
}
}หากใช้ React Native แล้ว Cache Metro จะต้องรีเซ็ตทุกครั้งที่คุณเปลี่ยนไฟล์ graphql:
react-native start --reset-cache
หมายเหตุ: ผู้ใช้ Windows จะต้องใช้
rimrafหรือโซลูชันอื่นแทนrm -rf
...
import myQuery from './query.graphql'
...
export default graphql ( myQuery ) ( myComponent ) | คุณสมบัติ | คำอธิบาย |
|---|---|
| นำเข้าเริ่มต้น | ซอร์สโค้ดทั้งหมดสำหรับไฟล์จะทำหน้าที่เป็นการส่งออกเริ่มต้น |
| #อิมพอร์ตไวยากรณ์ | ประเภท ฯลฯ ในไฟล์ graphql หนึ่งสามารถนำเข้าไปยังไฟล์ graphql อื่นโดยใช้ไวยากรณ์นี้: #import "./types.graphql" การนำเข้าเหล่านี้จะได้รับการแก้ไขซ้ำ ๆ ในระดับความลึกที่สมเหตุสมผล ปัจจุบันเนื้อหาทั้งหมดในไฟล์ที่มีชื่อจะถูกนำเข้าและไม่มีวิธีการนำเข้าประเภทเฉพาะ หากคุณต้องการพฤติกรรมนั้นคุณสามารถจัดเก็บประเภทเดียวในแต่ละไฟล์ |
ตัวแปรทั้งหมดของไวยากรณ์นำเข้าได้รับการสนับสนุนสำหรับไฟล์ที่ไม่ใช่ schema ยกเว้น import './filename'
| คุณสมบัติ | คำอธิบาย |
|---|---|
| การดำเนินการ/ชิ้นส่วนหลายส่วนต่อไฟล์ | การดำเนินการหลายครั้ง (การสืบค้น/การกลายพันธุ์/การสมัครสมาชิก) และ/หรือชิ้นส่วนสามารถวางไว้ในไฟล์เดียว อย่างไรก็ตามในกรณีนี้คุณไม่สามารถใช้การดำเนินงาน/ชิ้นส่วนที่ไม่มีชื่อได้ ตัวอย่างเช่น query { test } จะต้องเป็น query someName { test } |
| นำเข้าเริ่มต้น | การดำเนินการ/ส่วนแรกหรือชิ้นส่วนเดียวในไฟล์จะทำหน้าที่เป็นการส่งออกเริ่มต้น อย่างไรก็ตามด้วยเหตุผลความเข้ากันได้ย้อนหลังหากมีทั้งการดำเนินการและชิ้นส่วนในไฟล์การดำเนินการครั้งแรกจะทำหน้าที่เป็นส่งออกเริ่มต้น |
| ชื่อนำเข้า | การดำเนินการ/ชิ้นส่วนทั้งหมด รวมถึงค่าเริ่มต้น ทำหน้าที่เป็นผู้ส่งออกที่มีชื่อ |
| #อิมพอร์ตไวยากรณ์ | แฟรกเมนต์ในไฟล์ graphql หนึ่งสามารถนำเข้าไปยังไฟล์ graphql อื่นโดยใช้ไวยากรณ์นี้: #import "./fragment.graphql" การนำเข้าเหล่านี้จะได้รับการแก้ไขซ้ำ ๆ ในระดับความลึกที่สมเหตุสมผล ปัจจุบันชิ้นส่วนทั้งหมดในไฟล์ที่มีชื่อจะถูกนำเข้าและไม่มีวิธีนำเข้าชิ้นส่วนเฉพาะ หากคุณต้องการพฤติกรรมนั้นคุณสามารถจัดเก็บชิ้นส่วนเดียวในแต่ละไฟล์ |
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 ) 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 ) | ตัวเลือก | ประเภท | ค่าเริ่มต้น | คำอธิบาย |
|---|---|---|---|
nodePath | สาย | ค่าของตัวแปรสภาพแวดล้อม node_path | มีไว้สำหรับใช้กับ React-App-Rewire-Inline-Import-GraPhql-AST- ใช้เพื่ออนุญาตความละเอียดของเส้นทางสัมบูรณ์ไปยังไฟล์ .gql / .graphql ของคุณ หากคุณตั้งค่าตัวแปร NODE_PATH ของคุณอยู่แล้วในสภาพแวดล้อมของคุณคุณไม่จำเป็นต้องตั้งค่าตัวเลือกนี้ ปัจจุบัน ไม่ ได้รับการเคารพจาก #import SYNTAX |
runtime | บูลีน | เท็จ | การเปิดใช้งานตัวเลือกนี้ต้องใช้ graphql-tag ที่จะติดตั้งเป็น peerdependency -แทนที่จะ inlining วัตถุ AST ที่แยกวิเคราะห์ซึ่งมีขนาดใหญ่มากตัวเลือกนี้จะเชื่อมโยงซอร์สโค้ด GraphQL ของคุณพร้อมกับการนำเข้าฟังก์ชั่น gql จาก graphql-tag และวิเคราะห์ซอร์สโค้ด GraphQL ของคุณด้วย gql ที่รันไทม์ |
extensions | อาร์เรย์ | - | เปิดใช้งานการโหลดไฟล์ sdl graphql ที่มีส่วนขยายที่กำหนดเองเช่น '. prisma' |
emitDeclarations | บูลีน | เท็จ | เปิดใช้งานไฟล์ Emmitting .d.ts ถัดจากไฟล์แหล่งข้อมูลเคียวรี/GraphQL |
ผู้ใช้ Create-React-App สามารถใช้แพ็คเกจนี้ได้โดยไม่ต้องออกผ่าน React-App-Rewire-Inline-Inport-Graphql-Ast
พฤติกรรมของปลั๊กอินนี้ได้รับแรงบันดาลใจจากและส่วนใหญ่จะสะท้อนตัวโหลด webpack graphql-tag
แพ็คเกจนี้เริ่มต้นจากการแก้ไขรุ่นของ Babel-Plugin-Inline-Import
