دورة مكثفة: بناء تطبيقات ويب احترافية باستخدام React و GraphQL

هل سمعت الكثير عن استخدام React مع GraphQL ولكنك لا تعرف كيف تجمع بينهما لبناء تطبيقات مذهلة؟ في هذه الدورة المكثفة، ستتعلم بالضبط كيفية القيام بذلك من خلال بناء تطبيق مدونة اجتماعية متكامل. خلال فترة وجيزة، ستكتسب المهارات الأساسية اللازمة لإنشاء مشاريعك الخاصة باستخدام React و GraphQL.

لماذا يجب أن تتعلم React مع GraphQL؟

React هي المكتبة المفضلة لبناء تجارب تطبيقات مذهلة باستخدام JavaScript. من ناحية أخرى، GraphQL هي أداة تمنحنا وسيلة أفضل وأكثر وضوحًا للحصول على بياناتنا وتغييرها. يمكن أن تكون هذه البيانات قادمة من قاعدة بيانات قياسية (كما سنستخدم في تطبيقنا) أو، كما أتاحت أطر عمل React مثل Gatsby، حتى من ملفات ثابتة مثل ملفات markdown. بغض النظر عن كيفية تخزينها، فإن GraphQL يجعل العمل مع البيانات في تطبيقاتنا أفضل وأكثر كفاءة.
سنرى كيف نستفيد من قوة React و GraphQL من خلال إنشاء تطبيق مدونة اجتماعية من البداية إلى النهاية، حيث يمكنك إنشاء المنشورات وقراءتها وتعديلها وحذفها.

الأدوات والتقنيات التي سنستخدمها

هذه الدورة المكثفة مخصصة للمطورين الذين لديهم بعض الإلمام بـ React (بما في ذلك خطافات React Hooks الأساسية، مثل useState و useEffect)، ولكنهم ليسوا على دراية بـ GraphQL بعد. المعرفة الأساسية بـ React مفترضة، ولكن المعرفة بـ GraphQL ليست مطلوبة. سنغطي جميع مفاهيم GraphQL الأساسية التي تحتاجها على طول الطريق.
طوال هذه الدورة، سنستخدم التقنيات التالية لإنشاء تطبيقنا:

• React: لبناء واجهة المستخدم التفاعلية.
• GraphQL: للحصول على البيانات وتغييرها بطريقة تصريحية وفعالة.
• Apollo Client: للسماح لنا باستخدام React و GraphQL معًا بسلاسة.
• Hasura: لإنشاء وإدارة واجهة برمجة تطبيقات GraphQL API وقاعدة البيانات الخاصة بنا.

ولإكمال ذلك، سنستخدم بيئة التطوير المتكاملة (IDE) عبر الإنترنت CodeSandbox. سيتيح لنا ذلك كتابة الكود الخاص بتطبيقنا بالكامل داخل المتصفح في الوقت الفعلي، دون الحاجة إلى إنشاء أي ملفات أو مجلدات أو تثبيت تبعيات بأنفسنا.

إنشاء واجهة برمجة تطبيقات GraphQL API من الصفر

لبدء العمل مع GraphQL، سنرى كيفية إنشاء واجهة برمجة تطبيقات GraphQL API كاملة من الصفر والتي ستتواصل مع قاعدة بياناتنا. لحسن الحظ، باستخدام خدمة Hasura المجانية، تصبح هذه العملية بسيطة ومباشرة للغاية. في غضون ثوانٍ، سنرى كيفية إنشاء ونشر واجهة برمجة تطبيقات GraphQL API كاملة على الويب، متصلة بقاعدة بيانات Postgres التي ستتولى تخزين بيانات تطبيقنا.

التعرف على GraphQL: الاستعلامات والتعديلات

في الجزء الثاني، سنتناول كيفية الكتابة بلغة GraphQL باستخدام وحدة التحكم المدمجة في واجهة برمجة التطبيقات الخاصة بنا والتي تسمى GraphiQL.

إنشاء الجداول والعمليات الأساسية

أولاً، سنقوم بإنشاء جدول في قاعدة بياناتنا لجميع بيانات منشوراتنا. بعد ذلك، ستقوم Hasura تلقائيًا بإنشاء الاستعلامات (queries) والتعديلات (mutations) التي نحتاجها. هذه هي أسماء عمليات GraphQL التي تسمح لنا بالحصول على البيانات وتغييرها في قاعدة بياناتنا.

إتقان الاستعلامات والتعديلات في GraphiQL

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

ربط React بواجهة GraphQL API باستخدام Apollo Client

الآن بعد أن أصبحنا مرتاحين لاستخدام GraphQL وفهمنا ميزاته الأساسية، سنرى كيفية ربطه بعميل React الخاص بنا.

إعداد Apollo Client

الطريقة التي نربط بها تطبيق React الخاص بنا بواجهة GraphQL API التي أنشأناها هي من خلال مكتبة تسمى Apollo. سنرى كيفية إعداد Apollo Client، من خلال توفير نقطة نهاية GraphQL، والتي تشير إلى واجهة برمجة التطبيقات الخاصة بنا، على النحو التالي:

 import ApolloClient from "apollo-boost" ;
 const client = new ApolloClient({
 uri : "https://react-graphql.herokuapp.com/v1/graphql"
 });

تمرير العميل إلى مكونات React

مع عميلنا الذي تم إنشاؤه حديثًا، لدينا القدرة على تنفيذ أي عملية GraphQL من خلال React. للقيام بذلك، ومع ذلك، نحتاج إلى تمرير عميلنا إلى جميع مكونات React الخاصة بنا. نقوم بذلك بمساعدة مزود Apollo (Apollo Provider)، كما ترى أدناه:

جلب المنشورات باستخدام الخطاف useQuery

بعد إعداد عميلنا، سنرى كيفية تنفيذ عمليات GraphQL المختلفة معهم، باستخدام بعض خطافات React الخاصة التي تأتي مع حزمة @apollo/react-hooks.

استخدام useQuery لعرض البيانات

الخطاف الذي يسمح لنا بالاستعلام عن البيانات باستخدام GraphQL يسمى useQuery. باستخدامه، سنرى أولاً كيفية الحصول على جميع بيانات منشوراتنا وعرضها في صفحتنا الرئيسية. بالإضافة إلى ذلك، سنتعلم كيفية كتابة استعلامات GraphQL الخاصة بنا مباشرة في ملفات JavaScript بمساعدة دالة خاصة تسمى gql.

 import React from "react" ;
 import { useQuery } from "@apollo/react-hooks" ;
 import { gql } from "apollo-boost" ;

 export const GET_POSTS = gql `
 query getPosts {
 posts {
 id
 title
 body
 createdAt
 }
 }
 ` ;

 function App ( ) {
 const { data, loading } = useQuery(GET_POSTS);

 if (loading) return < div > Loading... </ div > ;
 if (data.posts.length === 0 ) return < Empty /> ;

 return (
 <>
 < header className = {classes.header} >
 < h2 className = {classes.h2} > All Posts </ h2 >
 < Link to = "/new" className = {classes.newPost} > New Post </ Link >
 </ header >
 {data.posts.map(post => (
 < Post key = {post.id} post = {post} />
 ))}
 </>
 );
 }

إنشاء وتعديل المنشورات باستخدام الخطاف useMutation

بعد ذلك، سنرى كيفية إنشاء منشورات جديدة باستخدام الخطاف useMutation.

العمل مع متغيرات GraphQL

للقيام بذلك، سنلقي نظرة على كيفية العمل مع متغيرات GraphQL لتمرير قيم ديناميكية لتعديلاتنا تتغير مع كل تنفيذ.

تعديل المنشورات الحالية

بعد ذلك، سنلقي نظرة على كيفية تعديل منشوراتنا. للقيام بذلك، سنحتاج إلى جلب منشور فردي وعرضه داخل النموذج الخاص بنا، حتى يتمكن المستخدم من إجراء تغييرات على البيانات. ثم سنحتاج إلى تنفيذ تعديل (mutation) سيقوم بإجراء التحديث، بناءً على معرف المنشور (post id).

معالجة حالات التحميل والأخطاء

في الجزء التالي، سنتناول بعض الأنماط الأساسية لمعالجة عملية تحميل بياناتنا. من المهم القيام بذلك عند تنفيذ تعديل (mutation)، للتأكد من أننا لا نرسل نماذجنا عدة مرات أثناء تنفيذ التعديل. سنلقي نظرة أيضًا على كيفية معالجة الأخطاء في حال لم يتم تنفيذ التعديل بشكل صحيح.

حذف المنشورات بكفاءة

أخيرًا، سنتناول كيفية حذف المنشورات من تطبيقنا.

تأكيد الحذف وتحديث الواجهة

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

الخلاصة التقنية

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