عميل أبولو. الآن مع رد فعل السنانير

يقول مؤلف المادة ، التي نُنشر ترجمتها اليوم ، إن مهمة مطوري برنامج Apollo Client هي جعل هذه الأداة هي الحل الأكثر حداثة وسهولة لإدارة حالة تطبيقات React. يقوم مجتمع React بتطوير وإتقان طرق جديدة وفعالة لتطوير واجهات المستخدم. يسعى مُبدعو Apollo Client إلى التأكد من أن مشروعهم يدعم كل ما يتعلق بعالم React. وفقًا لهذا التقليد ، يقدم مطورو Apollo Client إصدارًا جديدًا من النظام مزودًا بدعم ربط React.



تم إدخال السنانير في React 16.8 . هذه آلية جديدة تسمح لك بإنشاء مكونات ذات حالة بدون الاضطرار إلى التعامل مع المشكلات الخاصة بالمكونات المستندة إلى الفصل. يتضمن تطبيق Apollo Client الآن ثلاث خطافات يمكن استخدامها في التطبيقات - في جميع تلك الأماكن التي تستخدم فيها مكونات عالية المستوى أو آليات تقديم الدعائم. هذه هي useSubscription و useSubscription و useSubscription . هذه الخطافات سهلة التعلم ، ولديها العديد من المزايا على واجهة برمجة التطبيقات الموجودة مسبقًا. على وجه الخصوص ، يتعلق هذا بتخفيض حجم حزمة التطبيق وتقليل مقدار رمز boilerplate.

الابتداء

إذا كنت تنوي إنشاء مشروع Apollo جديد ، نوصي بتثبيت الحزمة التالية بعد تكوين مثيل عميل Apollo:

 npm install @apollo/react-hooks 

تصدر هذه الحزمة مكون ApolloProvider ، والذي يستخدم لتوصيل عميل Apollo بتطبيق React. بنفس الطريقة ، تم تنظيم العمل باستخدام واجهة برمجة التطبيقات القديمة.

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

لماذا السنانير في المستقبل؟

لا يزال Apollo Client يدعم واجهات برمجة التطبيقات استنادًا إلى مكونات ذات ترتيب عالي وتقديم الدعائم. ستكون واجهات برمجة التطبيقات هذه موجودة في النظام لبعض الوقت في المستقبل. نعتقد أنه في المستقبل ، ستكون السنانير هي أفضل آلية لتحميل البيانات باستخدام عميل Apollo. على الرغم من أن أولئك الذين يستخدمون Apollo بالفعل لا يتعين عليهم التبديل إلى السنانير في الوقت الحالي ، إلا أنه يتعين عليهم استخدام السنانير لمكونات جديدة. هذه التوصية لها العديد من الأسباب التي سننظر فيها الآن.

using عند استخدام الخطافات ، فأنت بحاجة إلى استخدام كود أقل للتعامل مع البيانات

الخطافات تقلل من مقدار كود boilerplate المستخدم للعمل مع البيانات. هذا يؤدي إلى انخفاض في حجم المكونات وإلى حقيقة أن هذه المكونات هي أسهل للفهم. نتيجةً لذلك ، لن يحتاج المطورون بعد الآن إلى الخوض في كيفية ترتيب المكونات العليا ، أو تحليل المنطق المعقد لعروض الدعائم. لتحميل البيانات ، ما useQuery سوى استدعاء دالة useQuery الفردية:

 const LAST_LAUNCH = gql`  query lastLaunch {    launch {      id      timestamp    }  } `; export function LastLaunch() {  const { loading, data } = useQuery(LAST_LAUNCH);  return (    <div>      <h1>Last Launch</h1>      {loading ? <p>Loading</p> : <p>Timestamp: {data.launch.timestamp}</p>}    </div>  ); } 

useQuery هنا هو تحميل البيانات باستخدام ربط عميل Apollo useQuery
ألق نظرة على هذا التطبيق التعليمي حيث يمكنك رؤية مثال عملي لاستخدام خطافات عميل Apollo.

طفرات متعددة

عندما تقوم بإجراء طفرات متعددة في مكون واحد ، يمكن أن يؤدي استخدام مكونات ذات ترتيب عالي أو آلية تقديم الدعائم إلى رمز يصعب فهمه. إن استخدام API render prop ، بناء الهياكل التي تتكون من مكونات Mutation مضمن في بعضها البعض ، يعطي إحساسًا خاطئًا بالكود المنظم وتسلسله الهرمي الواضح. ربط useMutation الجديد useMutation على هذه المشكلة تمامًا. الحقيقة هي أن استخدامه يتم تقليله إلى استدعاء وظيفة بسيطة. يوضح المثال التالي كيف يمكن للعديد من الطفرات والاستعلامات التفاعل مع بعضها البعض. كل هذا يحدث داخل نفس المكون:

 function Message() {  const [saveMessage, { loading }] = useMutation(SAVE_MESSAGE);  const [deleteMessage] = useMutation(DELETE_MESSAGE);  const { data } = useQuery(GET_MESSAGE);  return (    <div>      <p>        {loading          ? 'Loading ...'          : `Message: ${data && data.message ? data.message.content : ''}`}      </p>      <p>        <button onClick={() => saveMessage()}>Save</button>        <button onClick={() => deleteMessage()}>Delete</button>      </p>    </div>  ); } 

يتم استخدام ربط useMutation . تستطيع أن ترى طفرات متعددة في العمل هنا . يحتوي نموذج التطبيق هذا أيضًا على مكون مشابه تم إنشاؤه باستخدام تقديم الدعائم. يمنحك هذا الفرصة لمقارنة هذا المكون مع المكون الذي تم إنشاؤه باستخدام الخطافات.

support تحسين دعم TypeScript

ليس سراً أننا من عشاق TypeScript الكبار. تتوافق إمكانيات الخطافات الجديدة مع تعريفات الكتابة التلقائية التي تم إنشاؤها بواسطة Apollo CLI. هذا يسهل إلى حد كبير كتابة رمز نوع آمن لمكونات React. إليك ما يبدو أن تحميل البيانات باستخدام خطاطيف useQuery و TypeScript:

 import { RocketData, RocketVars } from './types'; const GET_ROCKET_INVENTORY = gql`  query getRocketInventory($year: Int!) {    rocketInventory(year: $year) {      id      year    }  } `; export function RocketInventoryList() {  const { loading, data } = useQuery<RocketData, RocketVars>(    GET_ROCKET_INVENTORY,    { variables: { year: 2019 } }  );  return (/* ... show data ... */); } 

تجعل خطافات Apollo و TypeScript من السهل تطوير مكونات React المطبوعة بشدة.

تحسينات إضافية على Apollo Client لمطوري React

على الرغم من أن هذا الإصدار من Apollo يركز على علاقات جديدة ، إلا أنه يمكننا التحدث عن بعض الميزات الجديدة الأكثر إثارة للاهتمام.

size تقليل حجم الحزمة بنسبة 50 ٪

في حين أن حجم رزمة gzip المصغرة والمضغوطة react-apollo@2 هي 10.6 كيلو بايت ، فإن حجم رزمة react-apollo@3 يبلغ 7.8 كيلو بايت فقط. علاوة على ذلك ، إذا كانت حزمة @apollo/react-hooks كافية لك ، فسيتم تقليل حجم الحزمة إلى 5.1 كيلو بايت فقط. وهذا يوفر 50 ٪ وفورات مقارنة react-apollo@2 .

query تأخر تنفيذ الاستعلام

useQuery ينفذ استعلامه في وقت استدعاء الوظيفة. ولكن هذا هو بالضبط سلوك النظام الذي لا يحتاج إليه دائمًا. تخيل ، على سبيل المثال ، حقلًا لإدخال استعلام بحث يعطي المستخدم مطالبات. قد تحتاج إلى عرض مكون به حقل كهذا جاهز لقبول ما يدخله المستخدم. ولكن في نفس الوقت ، سيتم تأخير تنفيذ الاستعلام إلى خادم البحث حتى اللحظة التي يبدأ فيها المستخدم إدخال شيء ما في الحقل. لتطبيق هذا السيناريو ، يمكنك استخدام ربط useLazyQuery ، والذي يعرض tuple مع وظيفة execute في الموضع الثاني:

 const [execute, { loading, data }] = useLazyQuery(GET_INVENTORY); 

لن يتم تنفيذ الطلب حتى تستدعي وظيفة execute . في هذه المرحلة ، سيتم تقديم المكون مرة أخرى وسيتم تطبيق مخطط تنفيذ الاستعلام المعتاد الذي يتم تنفيذه باستخدام useQuery .

وثائق API الجديدة

قمنا بتحديث وثائق عميل Apollo عن طريق إضافة معلومات ربط. نوصي باستخدامها من قبل أولئك الذين بدأوا للتو العمل مع نظامنا. ومع ذلك ، على الرغم من ذلك ، لم نقم بإزالة المعلومات من الوثائق المتعلقة بكيفية العمل مع المكونات ذات الترتيب العالي ومع آلية تقديم الدعائم. في أمثلة التعليمات البرمجية التي يمكن العثور عليها في الوثائق ، يمكنك الآن استخدام القائمة المنسدلة الجديدة التي تسمح لك بالتبديل بين الكود الذي يوضح الحل لنفس المشكلة باستخدام الطريقة التي يحبها القارئ.


خيارات الرمز المختلفة المتاحة في الوثائق

النتائج

يقول منشئو Apollo Client أن أكثر ما يعجبهم في React هو أن الفريق الأساسي من مطوري هذه المكتبة ومجتمع المتحمسين من حولها يبذلون قصارى جهدهم دائمًا لتحسين إمكانية استخدام React من وجهة نظر مبرمج. يعد ظهور السنانير ، التي ينصح الجميع بتجربتها على الإطلاق ، أحد ألمع الأمثلة على هذا الطموح.

نتمنى أن تتفاعل خطافات React المقدمة في Apollo Client مع من يستخدمون هذا المشروع لتطوير تطبيقاتهم.

أعزائي القراء! هل تستخدم عميل أبولو؟