GrapQL ve Apollo Server ile React Native Uygulaması

Herkese merhaba, bugün sizlere dilim döndüğünce Apollo Server ve GrapQL’ in kısaca ne olduğunu anlatmak ve React Native ile nasıl kullanacağımızı gösteren küçük bir uygulama yapmak istiyorum.


GraphQL Nedir?


En kısa tanımı ile GrapQL Facebook tarafından 2015 yılında geliştirilmiş, açık kaynaklı bir API sorgulama dilidir.


Peki Neden GraphQL ?


GraphQL günümüzde yaygın olarak kullanılan birçok API sorgulama yöntemine göre çok daha hızlıdır, şimdi buna bir göz atalım.


{
  hero {
    name
  }
}
{ 
  "hero": { 
    "name": "Luke Skywalker" 
  } 
}

Hero objesinden sadece bir data çağırımı

{
  hero {
    name
    height
    ma
  }
}
{
   "hero":{
      "name":"Luke Skywalker",
      "height":1.72,
      "mass":77
   }
}

Hero objesinden birden fazla data çağırımı

GraphQL bu konuda kendini şu şekilde tanımlıyor. “İhtiyacınız olanı isteyin, tam olarak bunu alın”.

Yani siz API ile verilerinizi çağırırken bir objenin bütün datalarını çağırmak zorunda kalmıyorsunuz ve sadece işinize yarayacak kısmı çağırıyorsunuz, bu size hem zaman hem de performans konusunda çok yardımcı oluyor.


GrapQL ve Rest API farkı


Elimizde basit bir sosyal medya veri tabanı olduğunu düşünelim. Kullanıcı dataları, takipçiler, paylaşımlar gibi birçok data var. Bu dataların Rest API ve GraphQL ile nasıl sorguladığımıza bir bakalım.

Rest API ile sorgu işlemleri

Hem kullanıcı datalarını hem de diğer datalarla ilgili bütün verileri ister kullanalım ister kullanmayalım çekiyoruz. Sadece “user.name” bilgisine ihtiyacımız var ise bu da performansımızı azaltan bir yöntem oluyor, benzer durum postlar için de aynı.


Rest API GET user

Rest API GET posts
GrapQL ile sorgu işlemi

GrapQL de ise ne kullanacak isek o veriyi istiyoruz. User’dan name ‘i, posts objesinden sadece title’ ı, takipçiler objesinden ise sadece name alanını çağırıyoruz.


GraphQL Sorgusu


Apollo Server Nedir?


Apollo Server, açık kaynaklı bir GraphQL sunucusudur. Web ve mobil gibi istemciler için Rest API, mikroservis ya da veritabanlarını GraphQL yapısında kullanmamıza olanak sağlar.



React Native GraphQL Uygulaması


Uygulamamızda amaç React native ile graphql’in birlikte kullanımını görmek olduğu için Graphql query sorgularını yapabileceğimiz bir API kullanacağım, apilere şuradan ulaşabilirsiniz. Biz uygulamamızda Rick And Morty Çizgi dizisinin bir Apisini kullanacağız. Rick and Morty dizisinde ki karakterleri ve bölümleri gösteren basit bir uygulama olacak.


Kurulumlar


Öncelikle işe React native uygulamamızı kurmakla başlayalım. Ben expo kullanacağım ve uygulama ismine GraphQLApp vereceğim.

expo init GraphQLApp

React Navigation Kurulumu


React navigation kurulumu için dökümana şuradan ulaşabilirsiniz. İlk olarak şu kodları çalıştırıyoruz:

npm install @react-navigation/native
npm install @react-navigation/stack

Navigation ve Stack navigation kurulumlarını yaptıktan sonra Expo için şu kodu çalışıtıyoruz.

expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

Kurulumlar ardından ana dizinde src adında bir klasör oluşturuyorum, ardından navigation işlemlerimi yönetmek için Router.js adında bir dosya oluşturuyorum.



Router.js dosyama gerekli importlardan sonra ana navigation yapımı oluşturuyorum ve ilk stackscreen'i ekliyorum.


Karakter Sayfasının Oluşturulması


Karakterlerimizi göstermek için "Characters.js" adında bir dosya oluşturuyoruz.



Dosyamızı kaydettikten sonra eğer uygulamanız kapalı ise:

expo start 

komutu ile uygulamamızı çalıştırıyoruz. Şimdilik hâla karakterler dosyamızı göremiyoruz fakat birazdan buraya geleceğiz.


Apollo Server Kurulumu


Daha fazla bilgi için Apollo server dökümanına şuradan ulaşabilirsiniz.

npm install @apollo/client --save

Kodumuzu çalıştırdıktan sonra gerekli importları App.js dosyamıza ekliyoruz.



Öncelikle "clint" adında bir sabit oluşturuyoruz ve GraphQL apimizin linkini veriyoruz. Apollo da bir caching mekânızması var, uygulamayı çalıştırıp verileri başarılı bir şekilde getirdikten sonra verileri cache’ e yazıyor. Böylelikle veriyi tekrar tekrar apiden çağırmak yerine bir kez çağırıp daha sonra cache'den getiriyoruz.

ApolloProvider React native uygulamamızı Apollo client a bağlamamıza yarayan bir bileşendir. Client adında bir parametre alır ve bu parametreye de yukarıda oluşturduğumuz client ı veriyoruz böylelikle Apollo kurulumumuzu tamamlamış oluyoruz.

GraphQL Sorgusunun Hazırlanması


Sırada GraphQL sorgularımızı eklemek var. Bunun için Characters.js dosyamızı açıyoruz ve şu importu ekliyoruz.

import { gql, useQuery } from "@apollo/client";

Bu importlardan sonra yazmak istediğim sorgularımı test etmek için Rick and Morty apimize dönüyorum. Dökümanda bütün verileri ve nasıl kullanılacağı gösteriliyor. Öncelikle sadece şu sorguyu çalıştırıyorum:

{
    characters {
      results {
        id
        name
        image
      }
    }
  }

Karakterlerimiz için sorguladığımız değerleri görebiliyoruz. Şimdi Character.js dosyamıza dönelim ve bu sorgumuzu ekleyelim.



Gql “Graph Query Language” in kısaltmalarından oluşur, kısaca yazdığımız sorguların graphQL sorgusu olduğunu belirtir.


Sorgumuzu yazdıktan sonra şu tanımı ekliyoruz:

const { error, loading, data } = useQuery(CHARACTERS_QUERY);

Eğer verilerimizi çekerken bir sorun oluşmaz ise yukarıda yazdığımız "CHARACTERS_QUERY" sorgusunu kullanarak verilerimizi datada göreceğiz. Loading ve error olma durumları için de birer koşul yazacağız.



Api playground'da şemaya bakarsanız karakterlerimiz "characters" içindeki results dizisinde olduğunu ve konsol ekranımızda görmek için bu şekilde kullandığımızı görürsünüz. Uygulamamız yüklenirken bir sorun oluşursa "Error" yazısını göreceğiz fakat oluşmaz ise kısa bir "Loading" yazısının ardından datalarımızı terminal ekranında görebiliriz.



Karakterlerimizi ve onlara ait istediğimiz alanları başarılı bir şekilde geldiğini gördük.


Karakterlerin Ekranda Gösterilmesi


Şimdi de gelen datamızdan karakterlerin fotoğraflarını ve isimlerini ekrana getirelim.


Ana return fonksiyonumun içerisinde bir React Native bileşeni olan Flatlist'i kullanıyorum.

Data kısmına konsolda verileri görmek için yazdığımız kod parçasının aynısını yazıyorum, ardından bir adet renderItem metodu var. Bu metotta her bir karakter nesnemiz birer item ve itemlarımızın, image ve name datalarını çağırıyoruz. Birkaç style tanımı ile aşağıdaki gibi bir görüntü elde ediyoruz.



Detay Sayfasının Oluşturulması


Her ne kadar apimizde pek fazla detay olmasa da karakterlerin üzerinde tıklandığında,

isimlerinin yanında; ırkı, cinsiyeti ve dünyasını gösteren bir Detay sayfası hazırlayacağız.

2 adet ekranımız var ve daha düzenli bir yapı olması için ana dizinde src adında bir klasör oluşturdum. Ardından bu klasörün altında da screens adında bir klasör oluşturdum. Character.js dosyamı oraya taşıdım ve bu klasör içerisinde bir adet Detail.js adında bir dosya oluşturdum.


Detail.js


Daha sonra Router.js dosyamıza:

 <Stack.Screen name="Detail" component={Detail} />

Bu satırı ekliyoruz. Eğer bunu karakter sayfasının üstüne koyarsanız. Uygulamayı reload ettiğinizde Detail sayfasının açıldığını göreceksiniz.


Detay Sayfasına Geçiş


Karaktere tıkladığımızda detayların görüneceği sayfaya geçiş için navigation adında bir parametre kullanıyoruz. Daha sonra image ve name parametrelerini gösterdiğimiz kısmı bir TouchableOpacity bileşeni içerisine alıyoruz ve tıkladığımızda Detay sayfasına yönlendirmemizi yapıyoruz. Navigation'ı ekledikten sonra TouchableOpacity bileşenimizde detay sayfamıza olan yönlendirmeyi bir onPress event'i ile yönlendirmemizi yapıyoruz:


Eğer bir sorun yoksa, karakterlerimizin üzerine tıkladığımızda detay sayfamıza yönlendirmeyi, aşağıda gördüğünüz gibi başarılı bir şekilde yaptık.




Karakter sorgusunun hazırlanması


Bir karaktere tıkladığımızda detay sayfasına gidebiliyoruz fakat bizim yapmak istediğimiz şey detay sayfasına giderken oraya tıkladığımız karakterin datalarını göndermek. Buna geçmeden önce apimize dönelim ve sorgumuzu yazalım.



Sağ tarafta döküman ve schema'yı görüyoruz. Api bize burada nasıl query yazabileceğimizi gösteriyor. Bir sorgu oluşturuyorum ve ismine Character veriyorum buraya istediğiniz ismi verebilirsiniz. Parametre olarak bir adet id alıyor ve bunun 'ID!' olması gerektiğini söylüyor. Bu belirtilen değer tanımlayıcı uniq bir ifade, string veya Int bir değer alabiliriz. Döküman kısmında tam tanımını görebilirsiniz.


Karakter sorgumu yazdıktan sonra bu 'ID!' değerini de parametre olarak geçiyorum. Değişken olarak kullandığım değeri de aşağıda ki QUERY VARIABLES kısmında tanımlıyorum ve değer olarak '2' veriyorum. Artık sorgumuzu çalıştırdığımızda id'si 2 olan karakterimizin id ve name özelliklerini görebiliyoruz. Burada 2 rakamı yerine farklı rakamlar verebilir ve sorgumuzun doğru çalıştığını deneyebilirsiniz, hatta benzer şekilde sorguları konum ve bölümler gibi özellikler içinde yazabilirsiniz.


query Character($id:ID!){
    character(id:$id){
      id,
      name
    }
  }

Sorguların Uygulamaya Eklenmesi


Detay sayfamıza geliyoruz. karakter sayfamızda yaptığımız gibi önce gql ve useQuery importlarımızı yapıyoruz. Ardından, CHARACTERS_QUERY olarak yeni sorgumuzu ekliyoruz.

Sorgumuzu yazdıktan sonra yine useQuery tanımımızı yapıyoruz.


const Detail = () => {
const { error, loading, data } = useQuery(CHARACTERS_QUERY, {
 variables:{
 id: 1,
    }
});

Apimizde id parametremizi bir query variables olarak verimiştik, burada da useQuery içerisinde yine bir variables parametresi olarak veriyoruz. Loading ve error durumlarını da aynı karakterler sayfasındaki gibi ekliyoruz.



Kodumuzu yazdıktan sonra uygulamayı çalıştıralım ve rastgele bir karakterin üzerine tıklayalım. Detay sayfasına gittikten sonra id'si 1 olan karakterimizi console ekranımızda görebiliriz.



Tıkladığımız karakterin datasını göndermek için kullanacağımız metoda şuradan bakabilirsiniz. Öncelikle Characters dosyamıza gidiyoruz ve tıklama olayımıza

<TouchableOpacity
            onPress={() => 
 navigation.navigate('Detail', {
 id:item.id
              })
 }
 >

bir parametre veriyoruz buna id diyorum ve bu değere tıkladığımız karakterin id'sini atıyorum. Ardından detay sayfama tekrar geliyorum. React navigation'dan gelen route adında bir parametremiz var, bununla karakterler sayfamızdan gelen parametreyi yakalıyor, id adında bir sabite yazıyoruz. Tıkladığımız karakterden gelen id'yi parametre olarak sorgumuza verelim ve tıkladığımız karakterin ismini ekranımızda görelim.





Detay Ekranının Tamamlanması


Artık tıkladığımız karakterin id'sini detay sorgumuzu parametre olarak verdik ve sorgumuzdan karakterimize ait istediğimiz alanları getirip, tasarımını da biraz düzeltip uygulamayı bitirebiliriz.


Detay sayfamızda karakterimizde görmek istediğimiz detayları id ve name'den sonra ekliyoruz. Detay için aşağıda ki karakter bilgilerini ekleyebiliriz:

image
species
gender
origin {
   name
}

Bu alanları ekledikten sonra ana return fonksiyonumun üzerinde hemen şu tanımları yapıyorum:


 const { image, name, species, gender } = data.character;
 const planet = data.character.origin.name;

Daha sonra istediğim bir tasarım oluşturuyorum, gerekli stil tanımlarını yapıyorum, yukarıda tanımlamış olduğumuz verileri kullanarak karakter detaylarını ekranda gösterme işlemini de tamamlamış oluyoruz.




Özet


Bu uygulamada Apollo ve graphQl kavramlarına değindik, rest api'den farkı nedir ve react native ile nasıl kullanılır elimden geldiğince göstermeye çalıştım. Gerekli navigation ve sunucu kurulumlarını yaptık, grapQL'i entegre ettik, sorgularımızı yazdık ve kontolleri sağladık, en sonunda verileri diğer sayfaya taşıdık ve uygulamamızı bitirdik.


Detay sayfasını görsel açıdan daha güzel bir hale getirebilirsiniz, yeni bir sayfa ekleyip apide bize verilen eposide alanını da kullanarak uygulamayı biraz daha geliştirebilirsiniz. Yazımı okuduğunuz için çok teşekkür ederim. Umarım işinize yarar ve faydasını görürsünüz. Projenin github linkini ve referans aldığım linkleri aşağıya bırakıyorum.


Github: https://github.com/Ozanuludag/GraphQLApp


Kullanılan kaynaklar:

https://graphql.org/

https://www.apollographql.com/docs/apollo-server/

https://www.howtographql.com/basics/1-graphql-is-the-better-rest/

https://www.apollographql.com/blog/graphql-vs-rest-5d425123e34b/

https://www.freecodecamp.org/news/apollo-graphql-how-to-build-a-full-stack-app-with-react-and-node-js/


#reactnative #graphql #ApolloServer


0 yorum

Son Paylaşımlar

Hepsini Gör

Komünite

Platform

Mobiler.dev Anasayfa
  • Twitter
  • Instagram
  • development_düzenlendi_düzenlendi
  • Youtube
  • slack-icon-black_edited_edited_edited
  • Gri LinkedIn Simge
imageedit_2_9667998092.png
JetBrains Hakkında Detaylı Bilgi Alın

© 2021 by mobiler.dev

Kurumsal Yazar Hesapları

adesso.png
mobilerdevLogo.jpg
Yazarlık Başvurusu Hakkında Bilgi Alın, Başvuru Yapın.
Topluluk Yazarlarını Tanıyın