Photo by Llanydd Lloyd on Unsplash

React UI Mechanics

Sunucu API’lerini Nasıl Mocklarız ?(Sunucu Maliyeti Olmadan )

Form içerisinde sunucudan alınarak doldurulan dropdown değerlerini nasıl tarayıcıda Mockladığımı örnek ile anlatacağım. Sonrasında bu örneği LearnReactUI.dev indirebileceksiniz.

Öncelikle Kullanım senaryosundan bahsedeyim. Adres dropdown opsiyonlarını gerçek bir sunucu olmadan , hayali bir sunucu oluşturarak Client Side (yani tarayıcı içerisinde) yapabildiğimizi göstereceğim.

https://onurdayibasi.dev/nocode-form-knowledge-map

Öncelikle bu konuda daha önceden bu şekilde bir blog yazmıştım. Temelde tarayıcı rendering işlemlerini tek bir process ve event-loop içerisinde halleder. Performans (Örneğin haritada arkaplanda hesaplama yapalım) veya bu tarz ekstra Mocking işlemleri paralel çalışşın istediğimiz Web Worker veya özelleşmiş hali Service Worker’dan faydalanırız. İşte MSW de bu Service Worker kullanarak yazılmış bir mock oluşturma aracı.

Address Form Örneği

İlk örneğimiz Address Form’da [Demo] , amacımız Dropdown bileşenleri ve bunun içeriğinin sabit geldiği bir ortam oluşturmak.

https://onurdayibasi.dev/form-static-address

Öncelikle bileşenlerimizi yazıyoruz . İl, İlçe, Mahalle Dropdown oluşturuyoruz.

const renderDemo = () => {
    const districtArr = districts.filter((el) =>
      el.value.includes(selectedCity)
    );
    const neighborhoodArr = neighborhoods.filter((el) =>
      el.value.includes(selectedDistrict)
    );
    return (
      <div style={{ display: "flex", gap: "3px", alignItems: "center" }}>
        <Typography.Text strong>Address Form</Typography.Text>
        <Select
          style={{ width: 150 }}
          options={cities}
          onChange={onCityChange}
          optionLabel="name"
          placeholder="Il Sec"
        />
        <Select
          style={{ width: 150 }}
          options={districtArr}
          onChange={onDistrictChange}
          optionLabel="name"
          placeholder="Ilce Sec"
        />
        <Select
          style={{ width: 150 }}
          options={neighborhoodArr}
          onChange={onNeighborhoodChange}
          optionLabel="name"
          placeholder="Mahalle Sec"
        />
        <Button type="primary" onClick={handleApply}>
          Submit
        </Button>
      </div>
    );
  };

Sonraki konu bunun içerisindeki içeriği oluşturmak.

export const neighborhoods = [
  { label: "Beşiktaş_Mahalle1", value: "IST_BSK_MH1" },
  { label: "Beşiktaş_Mahalle2", value: "IST_BSK_MH2" },
  { label: "Kadıköy_Mahalle1", value: "IST_KAD_MH1" },
  { label: "Kadıköy_Mahalle2", value: "IST_KAD_MH2" },
  { label: "Beyoğlu_Mahalle1", value: "IST_BEY_MH1" },
  { label: "Beyoğlu_Mahalle2", value: "IST_BEY_MH2" },
  { label: "Çankaya_Mahalle1", value: "ANK_CANK_MH1" },
  { label: "Çankaya_Mahalle2", value: "ANK_CANK_MH2" },
  { label: "Keçiören_Mahalle1", value: "ANK_KEC_MH1" },
  { label: "Keçiören_Mahalle2", value: "ANK_KEC_MH2" },
  { label: "Yenimahalle_Mahalle1", value: "ANK_YNM_MH1" },
  { label: "Yenimahalle_Mahalle2", value: "ANK_YNM_MH2" },
];

export const districts = [
  { label: "Beşiktaş", value: "IST_BSK" },
  { label: "Kadıköy", value: "IST_KAD" },
  { label: "Beyoğlu", value: "IST_BEY" },
  { label: "Çankaya", value: "ANK_CANK" },
  { label: "Keçiören", value: "ANK_KEC" },
  { label: "Yenimahalle", value: "ANK_YNM" },
];

export const cities = [
  { label: "Istanbul", value: "IST" },
  { label: "Ankara", value: "ANK" },
];

Şimdi static bir mock verisi oluşturduk. Şimdi bileşenlere bu veriyi direk props olarak verdiğimizde aslında basit bir mock oluşturmuş oluyoruz.

JS dosyasının içerisinden direk okuyarak oluşturuyor.

Address Fetch Örneği

İkinci örnekte ise işleri biraz daha karmaşıklaştırıp, gerçek sunucu ve fetch isteğini denemek istiyoruz. Yani network katmanından bir istek atılacak bu istek sunucudan dönecek ve karşılığında dropdown’lar doldurulacak şekilde güncelleyeceğiz.

Bileşen Fetch ile Mock Veriyi elde edecek.

Bunun ne gibi avantajı var dediğimizde MSW olması sayesinde

• daha gerçekçi testler yazabiliriz
• maliyeti çok düşük.
• canlıda çalışan kodunuzu değiştirmeniz gerekmiyor (ReactQuery, Fetch/Axios vb….) yapılarınızı aynı şekilde kullanabiliyorsunuz.

Şimdi gelelim örneğimize Address Fetch [Demo] . Bu örnekte arka planda bu static veriyi bir HTTP Callback Handler dönüştürüyoruz

import { HttpResponse, http } from "msw";
export const restApiUri = 'https://api.onurdayibasi.dev';


export const cityHandlers = [
  http.get(`${restApiUri}/address/cities`, async () => {
    return HttpResponse.json(cities);
  }),

  http.get(`${restApiUri}/address/districts`, async () => {
    return HttpResponse.json(districts);
  }),

  http.get(`${restApiUri}/address/neighborhoods`, async () => {
    return HttpResponse.json(neighborhoods);
  }),
];

Bu handle işleminden sonra bunu MSW worker atıyoruz.

import { setupWorker } from "msw/browser";
import { cityHandlers } from "@garden/mocks/cityHandlers";

export const mockServerWorker = setupWorker(...cityHandlers);

Artık elimizde sunucu üzerinden atılan istekler ve bu isteklere cevap verebilecek bir yapı oluşturuldu.

https://onurdayibasi.dev/form-static-address-fetch-dict

Bu ve benzeri konulardaki örneklere erişmek için vakit kaybetmeden LearnReactUI.dev platformuna kaydolun.

Okumaya Devam Et 😃

Bu yazının devamı veya yazı grubundaki diğer yazılara (React Arayüz Mekanikleri) erişmek için bu linke tıklayabilirsiniz.