خدمات API وهمية في React Native

يمكنك إستخدام Mock Service لعمل ما تريد بالعديد من الطرق.

• يمكنك إستخدام مكتبة Mirage وهي مكتبة للـ testing ويوجد بها module جاهز لصنع خادم غير حقيقي (Fake Server).
• أيضاً، يمكنك كتابة دالة والاستفادة من setTimeout والـ Promise API لتأخير الرد ليكون شبيه للخادم.

أولاً: عن طريق Mirage:

npm install --save-dev miragejs

تأكد أنك تقوم بتحميل المكتبة كـ Development Dependency عن طريق --save-dev لتكون في جزء التطوير فقط.

import { createServer } from 'miragejs';

// تأكد من هذا الشرط حتى لا يتم إنشاء خادم جديد مع كل دورة
if (window.server) {
	server.shutdown();
}

// إصنع الخادم
window.server = createServer({
	// قم بتعريف المسارات
	routes() {
		this.get('/api/questions', () => {
			return {
				questions: [
					{ id: 0, title: 'My question!', answer: 'Some answer.' }
				]
			}
		})
	}
});

ثانياً: عن طريق دوال خاصة. يمكنك كتابة الدالة التالية وسوف تعمل أيضاً:

// لتكون عملية إنشاء الدوال سهلة، سنقوم بإستخدام
// نوع من الدوال يسمى الـ
// Factory Functions
// عبارة عن دالة نستخدمها لانشاء دوال آخرى
function createFakeAPI({ data, after }) {
	return () => {
		return new Promise(resolve => setTimeout(
			() => resolve(data),
			after * 1000
		));
	}
}

const fakeQuestions = [{ id: 0, title: 'My question!' }];

// الآن يمكننا الاستخدام هكذا
// تعني after ان الرد سيأتي بعد 4 ثواني
const getQuestions = createFakeAPI({ data: fakeQuestions, after: 4 });

// سنستخدمها هكذا بداخل
// useEffect
getQuestions()
	.then(questions => setQuestions(questions));

أو، يمكنك استخدامها بداخل الـ Data Structure الذي تريده.

const routes = {
	'/api/questions': createFakeAPI({ data: fakeQuestions, after: 5 });
};

function fakeFetch(route) {
	return routes[route]();
}

fakeFetch('/api/questions')
	.then(questions => console.log(questions));