إعداد Apollo Client في React

ثبّتوا @apollo/client وgraphql. وتُعد حزمة graphql تبعية نظيرة يحتاج إليها Apollo Client لتحليل مستندات الاستعلام باستخدام وسم القالب gql.

بالنسبة إلى مشاريع TypeScript، تأتي الحزمتان مع تعريفات الأنواع الخاصة بهما، ولذلك لا حاجة إلى حزم @types.

أنشئوا ApolloClient مع ذاكرة تخزين مؤقت ورابط. أبسط إعداد هو: new ApolloClient({ cache: new InMemoryCache(), uri: '/graphql' }). وينشئ الاختصار uri كائن HttpLink داخليًا.

لمزيد من التحكم، ابنوا سلسلة الروابط يدويًا ومرروها إلى الخيار link بدلًا من uri.

غلّفوا تطبيق React باستخدام ApolloProvider مع الخاصية client: ApolloProvider client={client}. ويجعل ذلك مثيل Apollo Client متاحًا لجميع المكونات المتحدرة عبر سياق React.

يستخدم كل استدعاء لـ useQuery وuseMutation في شجرة المكونات هذا العميل تلقائيًا من دون تمرير الخصائص عبر مكونات وسيطة.

يُعد InMemoryCache ذاكرة التخزين المؤقت الافتراضية في Apollo Client. فهو يطبّع البيانات التي يجلبها حسب النوع والمعرّف، ويخزّن كل كيان تحت مفتاح مؤقت فريد (مثل User:1). وعندما يجلب أي استعلام User:1، تحصل جميع القراءات اللاحقة لذلك الكيان على البيانات المحدَّثة.

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

يتولى HttpLink نقل HTTP من Apollo Client إلى خادم GraphQL. اضبطوه باستخدام uri، واختياريًا fetch وheaders وcredentials.

في حالات الاستخدام المتقدمة، توجّه الروابط المقسّمة العمليات المختلفة إلى نقاط نهاية مختلفة: تمر الاشتراكات عبر WebSocket (WebSocketLink)، بينما تمر الاستعلامات والطفرات عبر HTTP (HttpLink).

استوردوا setContext من @apollo/client/link/context. وأنشئوا رابط مصادقة: const authLink = setContext((_, { headers }) => ({ headers: { ...headers, authorization: 'Bearer ' + getToken() } })). ثم اربطوه قبل HttpLink: authLink.concat(httpLink).

يعمل رابط setContext قبل كل طلب، ويضيف ترويسات المصادقة ديناميكيًا إلى كل عملية.

كوّنوا الروابط باستخدام ApolloLink.from([authLink, errorLink, httpLink]) أو authLink.concat(httpLink). الروابط عبارة عن برمجيات وسيطة؛ إذ يعالج كل رابط العملية ويمررها إلى next(). ويرسل آخر رابط في السلسلة طلب HTTP الفعلي.

السلاسل الشائعة هي: رابط المصادقة (إضافة الترويسات) + رابط الأخطاء (معالجة الأخطاء) + رابط HTTP (إرسال الطلب).

استوردوا onError من @apollo/client/link/error. يعترض رابط الأخطاء أخطاء GraphQL وأخطاء الشبكة على مستوى التطبيق. استخدموه لإعادة التوجيه إلى صفحة تسجيل الدخول عند حدوث أخطاء UNAUTHENTICATED، أو لعرض إشعار خطأ عام عند فشل الشبكة.

يجب أن يظهر رابط الأخطاء قبل رابط HTTP في السلسلة، لكنه يستطيع استدعاء forward(operation) لإعادة محاولة الطلب.

cache-first (الافتراضية): تعيد البيانات المخزنة مؤقتًا فورًا، ثم تعيد الجلب في الخلفية إذا كانت قديمة. network-only: تجلب دائمًا من الخادم وتحدّث الذاكرة المؤقتة. cache-and-network: تعيد الذاكرة المؤقتة فورًا، وتجلب أيضًا من الشبكة، ثم تحدّث واجهة المستخدم عند وصول الاستجابة. cache-only: تقرأ من الذاكرة المؤقتة فقط، وتطلق خطأ إذا لم تكن البيانات مخزنة مؤقتًا. no-cache: تجلب دائمًا ولا تكتب أبدًا في الذاكرة المؤقتة.

اختاروا السياسة بناءً على متطلبات حداثة البيانات: تستخدم لوحات المعلومات غالبًا cache-and-network، بينما تستخدم نماذج ملف المستخدم network-only.

عيّنوا fetchPolicy الافتراضية في defaultOptions الخاصة بـ InMemoryCache: new ApolloClient({ defaultOptions: { watchQuery: { fetchPolicy: 'cache-and-network' } } }). ويمكن لاستدعاءات useQuery الفردية تجاوز هذه القيمة لكل استعلام.

يقلل تعيين قيمة افتراضية مناسبة على مستوى التطبيق من التعليمات المتكررة اللازمة لتحديد fetchPolicy في كل استدعاء لخطاف.

تضيف إضافة Apollo Client DevTools للمتصفح لوحة Apollo إلى أدوات مطوري Chrome. وتعرض جميع الاستعلامات المخزنة مؤقتًا وبياناتها الحالية، وتتيح استكشاف الذاكرة المؤقتة المُطبَّعة، كما تسمح بإعادة تشغيل الاستعلامات من لوحة أدوات المطور.

ثبّتوها من Chrome Web Store وتهيّؤوا العميل باستخدام devtools: { enabled: true } (وهو الإعداد الافتراضي في وضع التطوير).

في سلسلة روابط Apollo Client، أين ينبغي وضع errorLink بالنسبة إلى httpLink؟

ثبّتوا @apollo/client وgraphql، وأنشئوا ApolloClient باستخدام InMemoryCache وسلسلة روابط، ثم غلّفوا التطبيق باستخدام ApolloProvider. تتكون سلسلة الروابط من authLink (إضافة الرموز المميزة)، وerrorLink (معالجة الأخطاء العامة)، وhttpLink (نقل HTTP). وتتحكم سياسة الجلب في أولوية الذاكرة المؤقتة مقابل الشبكة، بينما يطبّع InMemoryCache الكيانات حسب النوع والمعرّف.

تجعل إضافة Apollo DevTools للمتصفح فحص الذاكرة المؤقتة وتصحيح الأخطاء أمرًا مباشرًا.