كيفية إنشاء خادم GraphQL باستخدام مسارات واجهة برمجة تطبيقات Next.js

يمنحك Next.js أفضل تجربة مطور مع جميع الميزات التي تحتاجها للإنتاج. يوفر حلاً مباشرًا لإنشاء واجهة برمجة التطبيقات الخاصة بك باستخدام مسارات Next.js API.

في هذا الدليل ، سنتعلم أولاً ما هي مسارات API ، ثم ننشئ خادم GraphQL يسترد البيانات من واجهة برمجة تطبيقات Github باستخدام مسارات واجهة برمجة تطبيقات Next.js.

لتحقيق أقصى استفادة من هذا البرنامج التعليمي ، تحتاج على الأقل إلى فهم أساسي لـ GraphQL. من شأن معرفة خادم Apollo أن يساعد ولكنه ليس إلزاميًا. سيفيد هذا البرنامج التعليمي أولئك الذين يرغبون في توسيع مهاراتهم في React أو Next.js إلى جانب الخادم ويكونوا قادرين على إنشاء أول تطبيق متكامل مع Next.js و GraphQL.

لذا ، دعنا نتعمق.

ما هي مسارات Next.js API؟

Next.js هو إطار عمل يتيح عرض تطبيقات React على العميل و / والخادم. منذ الإصدار 9 ، يمكن الآن استخدام Next.js لبناء واجهات برمجة التطبيقات مع Node.js و Express و GrapQL وما إلى ذلك. يستخدم Next.js نظام الملفات لمعالجة الملفات الموجودة داخل pages/api واجهة برمجة التطبيقات كنقاط نهاية لواجهة برمجة التطبيقات. بمعنى أنه ، الآن ، ستتمكن من الوصول إلى نقطة نهاية API الخاصة بك على عنوان URL https://localhost:3000/api/your-file-name .

إذا أتيت من React ولم تستخدم Next.js مطلقًا ، فقد يكون هذا مربكًا لأن Next.js هو إطار عمل React. وكما نعلم بالفعل ، يتم استخدام React لبناء تطبيقات الواجهة الأمامية. فلماذا تستخدم Next.js لتطبيقات الواجهة الخلفية وواجهات برمجة التطبيقات؟

حسنًا ، يمكن استخدام Next.js على جانبي العميل والخادم لأنه مصمم باستخدام React و Node.js و Babel و Webpack ، ومن الواضح أنه يجب أن يكون قابلاً للاستخدام على الخادم أيضًا. يعتمد Next.js على الخادم لتمكين مسارات API ويتيح لك استخدام لغة الواجهة الخلفية المفضلة لديك حتى لو كانت إطار عمل React تقنيًا. أتمنى أن تكون على صواب.

حتى الآن ، تعلمنا ما هي مسارات API. ومع ذلك ، يبقى السؤال الحقيقي: لماذا نستخدم Next.js لبناء خادم GraphQL ؟ لماذا لا تستخدم GraphQL أو Node.js للقيام بذلك؟ لذلك ، دعنا نقارن مسارات واجهة برمجة تطبيقات Next.js بالحلول الحالية لبناء واجهات برمجة التطبيقات في القسم التالي.

مسارات Next.js API مقابل REST و GraphQL

تعد GraphQL و REST طرقًا رائعة لبناء واجهات برمجة التطبيقات. إنها تحظى بشعبية كبيرة ويستخدمها كل مطور تقريبًا في الوقت الحاضر. إذن ، لماذا نستخدم إطار عمل React لبناء واجهات برمجة التطبيقات؟ حسنًا ، الإجابة السريعة هي أن مسارات Next.js API لها غرض مختلف لأن مسارات API تسمح لك بتوسيع تطبيق Next.js الخاص بك عن طريق إضافة خلفية إليه.

هناك حلول أفضل لبناء واجهات برمجة التطبيقات مثل Node.js و Express و GraphQL وما إلى ذلك نظرًا لأنها تركز على الواجهة الخلفية. في رأيي ، يجب أن تقترن مسارات واجهة برمجة التطبيقات مع جانب العميل لإنشاء تطبيق مكدس كامل باستخدام Next.js. يعد استخدام مسارات واجهة برمجة التطبيقات لإنشاء واجهة برمجة تطبيقات بسيطة مثل عدم استخدام قوة Next.js لأنه إطار عمل React يمكّنك من إضافة واجهة خلفية إليه في أي وقت من الأوقات.

ضع في اعتبارك حالة الاستخدام عندما تحتاج إلى إضافة مصادقة إلى تطبيق Next الحالي. بدلاً من إنشاء جزء المصادقة من البداية باستخدام Node.js أو GraphQL ، يمكنك استخدام مسارات واجهة برمجة التطبيقات لإضافة مصادقة إلى تطبيقك ، وستظل متاحة في نقطة النهاية https://localhost:3000/api/your-file-name . لن تؤدي مسارات واجهة برمجة التطبيقات (API) إلى زيادة حجم الحزمة من جانب العميل لأنها عبارة عن حزم من جانب الخادم فقط.

ومع ذلك ، لا يمكن الوصول إلى مسارات واجهة برمجة تطبيقات Next.js إلا من نفس المصدر لأن مسارات واجهة برمجة التطبيقات لا تحدد رؤوس مشاركة الموارد المشتركة (CORS). لا يزال بإمكانك تعديل السلوك الافتراضي عن طريق إضافة CORS إلى واجهة برمجة التطبيقات - لكنه إعداد إضافي. إذا أنشأت تطبيقك التالي بشكل ثابت باستخدام next export - فلن تتمكن من استخدام مسارات واجهة برمجة التطبيقات داخل تطبيقك.

حتى الآن ، تعلمنا متى قد تكون مسارات API حلاً أفضل مقارنةً بما شابه. الآن ، دعنا نتسخ أيدينا ونبدأ في بناء خادم GraphQL الخاص بنا.

اعداد

لبدء تطبيق جديد باستخدام Next.js ، سنذهب إلى Create Next App. من الممكن أيضًا إعداد تطبيق جديد يدويًا باستخدام Webpack. انت مرحب بك للقيام بذلك ومع ذلك ، افتح واجهة سطر الأوامر وقم بتشغيل هذا الأمر:

 npx create-next-app next-graphql-server

يوفر Next.js نموذجًا لبدء التشغيل لمسارات API. يمكنك استخدامه عن طريق تنفيذ الأمر التالي:

 npx create-next-app --example api-routes api-routes-app

في هذا البرنامج التعليمي ، نريد أن نفعل كل شيء من البداية ، ولهذا السبب نستخدم Create Next App لبدء تطبيق جديد وليس قالب البداية. الآن هيكل المشروع على النحو التالي:

 ├── pages | ├── api | | ├── graphql.js | | ├── resolvers | | | └── index.js | | └── schemas | | └── index.js | └── index.js ├── package.json └── yarn.lock

كما قلنا سابقًا ، مجلد api هو المكان الذي توجد فيه API أو الخادم. نظرًا لأننا سنستخدم GraphQL ، فنحن بحاجة إلى محلل ومخطط لإنشاء خادم GraphQL. يمكن الوصول إلى نقطة نهاية الخادم على المسار /api/graphql ، وهو نقطة دخول خادم GraphQL.

بهذه الخطوة إلى الأمام ، يمكننا الآن إنشاء مخطط GraphQL لخادمنا.

قم بإنشاء مخططات GraphQL

كخلاصة سريعة ، يحدد مخطط GraphQL شكل الرسم البياني للبيانات.

بعد ذلك ، نحتاج إلى تثبيت apollo-server-micro لاستخدام خادم Apollo داخل Next.js.

 yarn add apollo-server-micro

ل npm

 npm install apollo-server-micro

الآن ، لنقم بإنشاء مخطط GraphQL جديد.

في api/schemas/index.js

 import { gql } from "apollo-server-micro"; export const typeDefs = gql` type User { id: ID login: String avatar_url: String } type Query { getUsers: [User] getUser(name: String!): User! }`

هنا ، نحدد نوع User الذي يصف شكل مستخدم Github. تتوقع avatar_url من النوع ID login و id من النوع String. بعد ذلك ، نستخدم النوع الموجود في استعلام getUsers الذي يجب أن يُرجع مصفوفة من المستخدمين. بعد ذلك ، نعتمد على استعلام getUser لجلب مستخدم واحد. يحتاج إلى الحصول على اسم المستخدم من أجل استرجاعه.

مع إنشاء مخطط GraphQL هذا ، يمكننا الآن تحديث ملف المحلل وإنشاء الوظائف لتنفيذ هذه الاستعلامات أعلاه.

قم بإنشاء محللات GraphQL

محلل GraphQL عبارة عن مجموعة من الوظائف التي تتيح لك إنشاء استجابة من استعلام GraphQL.

لطلب البيانات من Github API ، نحتاج إلى تثبيت مكتبة axios . لذلك ، افتح CLI الخاص بك وقم بتنفيذ هذا الأمر:

 yarn add axios

أو عند استخدام npm

 npm install axios

بمجرد تثبيت المكتبة ، دعنا الآن نضيف بعض التعليمات البرمجية ذات المعنى إلى ملف المحلل.

في api/resolvers/index.js

 import axios from "axios"; export const resolvers = { Query: { getUsers: async () => { try { const users = await axios.get("https://api.github.com/users"); return users.data.map(({ id, login, avatar_url }) => ({ id, login, avatar_url })); } catch (error) { throw error; } }, getUser: async (_, args) => { try { const user = await axios.get( `https://api.github.com/users/${args.name}` ); return { id: user.data.id, login: user.data.login, avatar_url: user.data.avatar_url }; } catch (error) { throw error; } } } };

كما ترى هنا ، نقوم بمطابقة اسم الاستعلامات المحدد مسبقًا في مخطط GraphQL مع وظائف المحلل. تمكننا وظيفة getUsers من استرداد جميع المستخدمين من واجهة برمجة التطبيقات (API) ثم إعادة مجموعة من المستخدمين الذين يحتاجون إلى عكس نوع User . بعد ذلك ، نستخدم طريقة getUser لجلب مستخدم واحد بمساعدة الاسم الذي تم تمريره كمعامل.

مع تطبيق ذلك ، أصبح لدينا الآن مخطط GraphQL ومحلل GraphQL - لقد حان الوقت لدمجهما وإنشاء خادم GraphQL.

قم بإنشاء خادم GraphQL

يعرض خادم GraphQL بياناتك باعتبارها واجهة برمجة تطبيقات GraphQL. يمنح تطبيقات العملاء القدرة على طلب البيانات التي يحتاجون إليها بالضبط وليس أكثر.

في api/graphql.js

 import { ApolloServer } from "apollo-server-micro"; import { typeDefs } from "./schemas"; import { resolvers } from "./resolvers"; const apolloServer = new ApolloServer({ typeDefs, resolvers }); export const config = { api: { bodyParser: false } }; export default apolloServer.createHandler({ path: "/api/graphql" });

بعد استيراد ApolloServer ، نستخدمه لإنشاء مثيل جديد ثم تمرير المخطط والمحلل لإنشاء خادم GraphQL. بعد ذلك ، نحتاج إلى إخبار Next.js بعدم تحليل الطلب الوارد والسماح لـ GraphQL بمعالجته نيابةً عنا. أخيرًا ، نستخدم apolloServer لإنشاء معالج جديد ، مما يعني أن المسار /api/graphql سيعمل كنقطة دخول لخادم GraphQL الخاص بنا.

على عكس خادم Apollo العادي ، يعالج Next.js بداية الخادم لنا لأنه يعتمد على العرض من جانب الخادم. لهذا السبب ، هنا ، لا يتعين علينا بدء تشغيل خادم GraphQL بمفردنا.

رائعة! بهذه الخطوة إلى الأمام ، يمكننا الآن اختبار ما إذا كان خادم GraphQL يعمل أم لا.

اختبر خادم GraphQL

بمجرد استعراض جذر المشروع ، افتحه على CLI ، ثم نفذ هذا الأمر:

 yarn dev

أو لـ npm

 npm run dev

الآن ، قم بزيارة https://localhost:3000/api/graphql وأضف استعلام GraphQL أدناه لاسترداد جميع المستخدمين من Github.

 { getUsers { id login avatar_url } }

دعنا نتحقق مما إذا كان بإمكاننا جلب مستخدم واحد باستخدام هذا الاستعلام.

 query($name: String!){ getUser(name:$name){ login id avatar_url } }

رائعة! خادمنا يعمل كما هو متوقع. لقد انتهينا من بناء خادم GraphQL باستخدام مسارات واجهة برمجة تطبيقات Next.js.

خاتمة

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

يمكنك معاينة المشروع النهائي على CodeSandbox.

شكرا للقراءة!

مزيد من الموارد

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

• تقديم مسارات API (Next.js 9)
• مسارات Next.js API
• API طرق الوسيطة