babel plugin import graphql

بابل-بلوجين-import-graphql

بابل المكون الإضافي الذي يتيح بناء جملة import لملفات .graphql و .gql .

لمستخدمي اسم الحزمة القديم (Babel-plugin-inline-import-graphql-ast)

ملاحظات الإهمال/الهجرة

اعتبارًا من 27 مايو 2018 ، تم إهمال اسم حزمة babel-plugin-inline-import-graphql-ast . يرجى استخدام babel-plugin-import-graphql (NPM) بدلاً من ذلك.

ترحيل إلى Babel-Plugin-Import-Graphql

تحديث تكوين بابل الخاص بك

تحديث مجموعة 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" على ما يرام بسبب الكاريت.

إذا كنت قد تم تثبيتها على إصدار معين ، فستحتاج إلى الترقية وعلامة الدبوس إلى 2.4.4 على الأقل أو توسيع نطاق الإصدار الخاص بك لتضمينه.

تهانينا ، أنت كل شيء!

---

إذا كنت تستمتع بطرحتي ، فيرجى قيام Github Repo أو مشاركتها على Twitter (وتتبعني للحصول على التحديثات)!

المتطلبات الأساسية

• babel-core@^7.20.7 أو @babel/core@^7.0.0-beta.49 (قد تعمل بيتا منخفضة ولكن لم يتم اختبارها)

• graphql-tag@^2.9.2 (فقط إذا استخدم خيار runtime الموضح أدناه)

ثَبَّتَ

yarn add -D babel-plugin-import-graphql

أو

npm i -D babel-plugin-import-graphql

في ملف .babelrc :

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

في كل مرة تقوم فيها بتعديل ملف GRATEQL ، يجب مسح ذاكرة التخزين المؤقت للتغييرات المفعمة بسرورها.

إذا كنت تستخدم العقدة ، فيجب مسح node_modules/.cache/babel-loader . أوصي بإعداد البرنامج النصي ذي الصلة في package.json الخاصة بك.

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

إذا كنت تستخدم React Native ، فيجب إعادة تعيين ذاكرة التخزين المؤقت للمترو في كل مرة تقوم فيها بتغيير ملف GraphQL:

 react-native start --reset-cache

ملاحظة: سيحتاج مستخدمو Windows إلى استخدام rimraf أو حل آخر بدلاً من rm -rf .

الاستخدام الأساسي

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

الميزات المدعومة

ملفات المخطط

ميزة	وصف
الاستيراد الافتراضي	سيكون رمز المصدر بأكمله للملف بمثابة التصدير الافتراضي.
#import بناء جملة	الأنواع ، إلخ. يمكن استيراد ملف GraphQL واحد إلى ملف GraphQL آخر باستخدام هذا بناء الجملة: #import "./types.graphql" . سيتم حل هذه الواردات بشكل متكرر لأي عمق معقول من الملفات. حاليًا ، سيتم استيراد جميع المحتوى في الملف المسماة ولا توجد طريقة لاستيراد أنواع محددة. إذا كنت تريد هذا السلوك ، فيمكنك تخزين نوع واحد في كل ملف.

ملفات التشغيل/الشظية

يتم دعم جميع المتغيرات في بناء جملة الاستيراد للملفات غير المختلطة ، باستثناء import './filename' .

ميزة	وصف
عمليات/شظايا متعددة لكل ملف	يمكن وضع عمليات متعددة (الاستعلامات/الطفرات/الاشتراكات) و/أو الشظايا في ملف واحد. ومع ذلك ، في هذه الحالة ، لا يمكنك استخدام العمليات/الشظايا التي لم يكشف عن اسمها. على سبيل المثال ، يجب أن يكون query { test } query someName { test } .
الاستيراد الافتراضي	ستعمل العملية/الشظية الأولى أو الوحيدة في ملف بمثابة التصدير الافتراضي. ومع ذلك ، لأسباب توافق متوقفة ، إذا كانت هناك عمليات وشظايا في ملف ، فستكون العملية الأولى بمثابة التصدير الافتراضي.
اسم الواردات	جميع العمليات/الشظايا ، بما في ذلك الافتراضي ، تعمل كصادرات مسماة.
#import بناء جملة	يمكن استيراد شظايا في ملف 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	مخصص للاستخدام مع رد الفعل------------------------------------------------------،-،-، فإن "-إدراك-إدراج-إدراج- يستخدم للسماح بدقة مسارات مطلقة لملفات .gql / .graphql الخاصة بك. إذا كان لديك بالفعل مجموعة متغير NODE_PATH في بيئتك ، فلن تحتاج إلى تعيين هذا الخيار. غير محترم حاليًا بواسطة Syntax #import .
runtime	منطقية	خطأ شنيع	يتطلب تمكين هذا الخيار تثبيت graphql-tag على أنها peerDependency. -بدلاً من ضم كائن AST المحدود ، وهو كبير جدًا ، يقوم هذا الخيار بتحديد رمز مصدر GraphQL الخاص بك إلى جانب استيراد وظيفة gql من graphql-tag ويقوم بتوزيع رمز مصدر GraphQL الخاص بك مع gql في وقت التشغيل.
extensions	صفيف	[]	يمكّن تحميل ملفات GraphQL SDL التي تحتوي على امتداد مخصص ، على سبيل المثال .prisma "
emitDeclarations	منطقية	خطأ شنيع	يتيح ملفات .d.ts بجوار ملف مصدر استعلام/شظية GraphQL.

لمستخدمي إنشاء التفاعل

يمكن لمستخدمي Create-React-APP استخدام هذه الحزمة دون الإخراج عبر رد الفعل-تنفيس-إدراج-iscport-graphql-ast

الاعتمادات

إن سلوك هذا البرنامج المساعد مستوحى من محمل WebPack GraphQL-TAG ومعظمه في الغالب

بدأت هذه الحزمة كنسخة معدلة من Babel-plugin-inline-import