Photo by Kier in Sight Archives on Unsplash

Server Sync Series

Query (with Fetch API, Axios and GraphQL)

Bu blog yazısı Server Sync Seri yazılarımızdan bir tanesi. Burada sanal bir sunucu üzerinden şehir, ilçe bilgilerini Fetch API , Axios Kütüphanesi veya GraphQL Kütüphanesinden Faydalanarak Gerçekleştireceğiz

Bu örnekte amacımız Fetch işlemini nasıl farklı kütüphaneler veya Web API üzerinden gerçekleştirebileceğimizi inceleyeceğiz.

https://onurdayibasi.dev/network-knowledge-map

Video: https://onurdayibasi.dev/videos-of-enterprise-react/NETWORK_AND_RQUERY

Kaynak Kod: https://learnreactui.dev/contents/fetch-api-axios-and-graphql

Demo:

• Fetch API: https://onurdayibasi.dev/msw_fetch
• Axios: https://onurdayibasi.dev/msw_axios
• GraphQL: https://onurdayibasi.dev/msw_graphql

1. Kullanım Senaryosu

Bu uygulamada basitçe oluşturulmuş İl, İlçe, Mahalle verilerini aşağıdaki düğmelere basınca sanal sunucudan çekilmesini sağlayacağız.

A. Fetch API

Web API üzerinde her tarayıcının hazır olarak sunduğu bir API. Bu API aşağıdaki gibi kullanarak sunucuya bir http isteği atmak mümkün

  const handleFetch = (apiURL) => {
    fetch(apiURL)
      .then((response) => response.json())
      .then((data) => console.log('data fetched', data))
      .catch(function (error) {
        console.log('request failed', error);
      });
  };

B. Axios API

Fetch API gelmeden önce HTTP isteklerinde oluşan karmaşıkları gidermek için geliştirilmiş ve bir takım eksta özelliklere sahip olan bir kütüphanedir. Örneğin Interceptors konusuna bu blog yazısından okuyabilirsiniz.

Aşağıdaki kodda sadece değişen kısmın neredeyse fetch → axios dönüştüğünü görebilirsiniz.

  const handleFetch = (apiURL) => {
    // Make a request for a user with a given ID
    axios
      .get(apiURL)
      .then(function (response) {
        console.log('data fetched', response?.data);
      })
      .catch(function (error) {
        console.log('request failed', error);
      })
      .finally(function () {});
  };

C. GraphQL

GraphQL özellikle Mobile, Dekstop , Web vb RestAPI gibi dışarıya farklı kanallardan veriyi sağlamanız ama bu verinin isteklere göre dinamik değişmesini istediğimiz durumlar için geliştirildi. Yani REST’den farklı olarak ben bir Req/Resp şeması tanımlayacağım bu şema doğrultusunda bu veriler sunucudan doldurulup getirilecek.

Bu bize sunucu tarafında bir esneklik kazandırıyor. Tabi esneklik ve dinamikliğin kaybettirdiği bazı konular var. Teknoloji tercihinizi hep bu gereksinimlere göre yapmanız gerekiyor.

Aşağıda graphql-request kütüphanesini kullandım. Siz Apollo GraphQL Client’da kullanabilirsiniz.

import {gql, request} from 'graphql-request';

const queryCities = gql`
  query GetAllCities {
    cities {
      label
      value
    }
  }
`;


  const handleFetch = (query) => {
    // Make a request for a user with a given ID
    (async () => {
      try {
        const data = await request(graphqlApiUri, query);
        console.log(data);
      } catch (error) {
        console.error('Error occurred while fetching data:', error);
      }
    })();
  };

2. Mock Service Worker ile Sanal Sunucu

Öncelike statik verilerimizi tanımlayalım.

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

Rest Handler

İstemciden gelen REST isteklerini karşılayabilecek handler yazalım.

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);
  }),
];

GraphQL Handler

İstemciden gelen istekleri karşılayabilecek GraphQL handler yazalım.

const myGraphQL = graphql.link(graphqlApiUri);

export const qqlCityHandlers = [
  myGraphQL.query('GetAllCities', () => {
    return HttpResponse.json({
      data: cities,
    });
  }),

  myGraphQL.query('GetAllDistricts', () => {
    return HttpResponse.json({
      data: districts,
    });
  }),

  myGraphQL.query('GetAllNeighborhoods', () => {
    return HttpResponse.json({
      data: neighborhoods,
    });
  }),
];

GraphQL daha dinamik bir yapıda olduğu için query, mutation içerisinde variable/response şeması yapıları alır burada yazılmış Apollo GraphQL vb.. yapılar sunucuda bu şemaların oluşturulmasına yardım eder, bizim örneklerimizde bu işlemleri biz yapacağız.

Okumaya Devam Et 😃

Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.