Using GraphQl Api in React projects with Typescript.

Arkadaşlar merhaba Bugün React projelerimizde GraphQl api-i nasil kullanacağımızı göstereceğim. GraphQl api nedir diye merak edenler konuyu araştırıp öğrene bilirler kısaca söylemek gerekirse bir çeşit api türü. Mesela biz genelde Rest api ile bağlantılarimizi kurmaya alışkınız bu bir az daha farklı Fakat şunu bilmeniz gerekir ki, şu anda yabancı firmaların çoğu graphql api tercih ediyor düşünüyorum ki bilmekte fayda var. Lafı fazla dolandırmadan direk konuya geçelim.

React projelerinde arkadaşlar graphql api kullana bilmemiz için Apollo isimli npm paketi kullanıcaz. (bu arada Apollo hem sunucu tarafda hem de kullanıcı tarafta kullanılan bir sürüm) Tabii bize şuan için sadece client tarafda gerekli bunun için ilk önce

npm install @apollo/client veya yarn add @apollo/client

yazarak paketimizi indirelim.

İndirme işlemini başarıyla tamamladıkdan sonra arkadaşlar Apollo-client Provider-miz ile ana komponentimizi sarmamız gerek hadi şimdi Provider-mizi kuralim önce.

Yukarıda göstermiş olduğum gibi bir apollo-client.ts dosyası oluşturuyoruz ve içine ApolloClient , InMemoryCache class-larını import ediyoruz. Arkadaşlar burada uri kısmındaki property-e istek göndereceyiniz sunucunun addressini yazmaniz gerek cache property-si ise bir kez istek gönderildikden sonra Apollo client gönderdiyimiz request-i cache -ediyor. Bu konu hakkında daha detaylı bilgi almak isterseniz resmi sitesine baka bilirsiniz ama temel kurulum böyle şimdi geçelim ana komponentimizi sarmaya.

ApolloProvider-i @apollo/client paketinden import edip az önce yazdımış olduğumuz client instance-ni ona prop olarak geçiyoruz. (Bu arada state managment olarak useContext ve useReducer kullanıyorum AppProvider bu durumda kafanızı karıştırmasın)

Artık kurulumu tamamladığımıza göre ilk request-mizi göndere biliriz Fakat burda bi durum var arkadaşlar her hangi GET request işlemleri yapmak istediyimizde useQuery hook-nu POST PUT DELETE request-leri yapmak istediyimizde useMutation hook-nu genelde kullanırız Bu makalede size yalnızca useQuery hook-u ile GET request işlemleri hakkında konuşucaz

useQuery hook-u bize data, loading, error, refetch, fetchMore, updateQuery ve b bi takım function ve ya değer döndürür. Bir az daha açıklayacak olursak data bildiyiniz üzere request-den gelen data-mız oluyor, loading sorğunun bitdiyini anlamamız için, error bir hata olduğu zaman onu yakalamamız içindir. Refetch function- u arkadaşlar adından da anlaşıldığı üzere sorğuyu tekrardan göndermemize yarar. fetchMore function — u genelde datanın bi kısmını alırsınız ve gerisini almak istediyiniz zaman kullanılır pagination işlemlerinde en fazla. updateQuery function — ise bize cache olunmus Query ni sorğuyu tekrardan çalıştırmadan datanı update ede bilmemizde yardimci oluyor.

Buradan gördüğünüz üzere useQuery hooku 2 parametre alıyor. Ilki query-miz yani sorğunun kendisi digeri ise request ile ilişkili parametreler. Arkadaşlar parametreler ile ilgili konuya fazla değinmeyeceyim. Yukarıda yazılanı kisaca açıklamak gerekirse request onCompleted olduğunda yani bitdiyinde almış olduğumuz data-nı kendi state-me gönderiyorum variables kısmında request zamanı sunucuya data-nı hangi şekilde istediyimizin bilgilerini giriyoruz. Ayrıca bunu request de de belirtmemiz gerek. örnekde ben product id -sine göre sıralanmış şekilde alınmasını istemişim. Arkadaşlar fetchPolicy nextFetchPolicy ve notifyOnNetüorkStatusChange hakkında uzun yazmak istemiyorum bu bilgileri kendi sitesinden kolayca bulup anlaya bilirsiniz.

Arkadaşlar bu kısım yani request kısımı anlamak için mutlak şekilde graphql query ve mutation ları hakkında bir az bilgi sahibi olmanız gerekir. Önceden de belirttiğim gibi bu sifirdan anlatım makalesi değil. Şurada arkadaşlar az önce variables içerisinde gönderdiğim sort bilgisini query içerisinde bir parametre olarak belirtip productList sorğuma gönderiyorum.

Ve sonuç umarım az da olsa yardımı dokunmuştur makalenin. Anlamadığınız kısımları internetden araştırarak bula bilirsiniz. Ben graphql api kullanmayı seviyorum, tercih meselesi olursa kesinlikle seçerim fakat bununda yaratdığı bazı zorluklar var bu konu hakkında bi sonrakı makalede konuşuruz. Hoşçakalın.

Projenin linki: https://github.com/themrzlyv/graphql-react-typescript