React Network
React Digital Garden ve MSW(Mock Service Worker)
onurdayibasi.dev sitesini daha esnek hale getirebilmek ve sunucu kısımlarını mocklamak için kullanılan MSW (Mock Service Worker) yapısı ile çalışır hale getirdim.
Belki bazılarınız biliyordur ama ben yinede kısaca değinmek istiyorum. React Digital Garden (onurdayibasi.dev) benim React, WebDev ile ilgili PoC (Proof Of Concept) denemek için kullandığım, deneylerimi yaptığım bir platform.
Bu platformun altyapısını kendi geliştirdiğim bir altyapının üzerine, açık kaynak kodlu kütüphaneleride ekleyerek geliştiriyorum. Bazı sorularınıza cevap olması açısından kısaca, soru — cevap ;
- Digital Garden Nedir ? : Cevap için bu linki okuyun
- React Nedir ? Cevap için bu linki okuyun
- RDG Platform Altyapısı Nasıl Geliştirdim ? Cevap için bu linkteki yazıları okuyun
- React Digital Garden Nasıl Güncelleniyor ? Cevap için bu linkteki yazıları okuyun
Her neyse bu PoC ve Deney ortamında şu anda 168 yakın örnek uygulama bulunuyor. Fakat bu uygulamalar şu ana kadar hep Client Side kısmını ilgilendiren bileşenler üzerine kurgulanmış bir yapıydı.
Artık PoC çalışmalarımda Client — Sunucu iletişimlerinide veya bu iletişim ile birlikte UI bileşenlerini analiz etmek istiyorum. Fakat bunun için bir sunucu maintain etmek ile uğraşmak istemiyorum. Local bilgisayarınızda bir şeyler geliştiriyorsanız tabiki alternatifleriniz daha fazla, bu örnekleri aşağıdaki blog yazısında özetledim.
React Digital Garden için bunlardan en uygun olanı MSW(Mock Service Worker) olarak gözüküyor. Aslında burada yapmak istediğimiz deneysel çalışmalar için Mock API bize çok uygun bir altyapı sağlıyor.
Şimdi gelin örnekler üzerinden olayı inceleyelim. Network katmanında 3 tip iletişim söz konusu
- HTTP Request
- Web Socket
- SSE (Server Sent Event)
Netlify üzerinden WebSocket ve SSE gerçekleştirmek çok münkün durmuyor, özellikle Serverless yapılarında HTTPRequest / Response yapılarını geliştirmek mantıklı.
Ben yukarıda da bahsettiğim gibi MSW (Mock Service Worker) kullanarak gelecek işlerimi denerken buradan simüle edeceğim HTTPRequest yapılarını ne ile çekebiliriz. Bunun için 3 tane örnek geçirdim.
- Fetch API Kullanan
- Axios Kütüphanesi Kullanan
- Graphql-Request Kullanan
Buradaki senaryoları olabildiğince basit tutmaya çalıştım.
Fetch ve Axios’ da aynı ekranlar mevcut,
- Bu ekranlarda Static Data’yı veya
- Faker.js ile oluşturduğum Dynamic User verisini dönüyorum.
GraphQL kısmında ise sadece Static oluşturduğumuz kullanıcıların listesini dönüyoruz.
MSW (Mock Service Worker) tarafında işler şu şekilde gerçekleşiyor. Öncelikle MSW olduğu Service Worker index.js içerisinde çalıştırılmasını sağlıyoruz.
import {setupWorker} from 'msw';
import {handlers} from './handlers';
export const worker = setupWorker(...handlers);
const {worker} = require('./mocks/browser');
worker.start();Sonrasında Network Requestlerine karşılayacak Handlers yazıyoruz. Gelen Requestler Rest API ve GraphQL çağrıları için Handler aşağıdaki şekilde ekliyoruz.
Bu kısım bizim yapımızın aslında birince seviye altyapısını oluşturduk. Bunun üzerine
- CRUD işlemleri için MSW geliştirmek
- ReactQuery, Apollo GraphQL Client gibi yapılar ile altyapımızı genişleteceğiz.
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.
