Bu makalede TypeScript ve GraphQL kullanarak uygulama geliştirme sürecindeki adımları ele aldık TypeScript, JavaScript diline eklemeler yapılarak geliştirilmiş bir programlama dilidir GraphQL ise veri sorgulama ve manipülasyonunun yapıldığı bir sorgulama dilidir Makalede, TypeScript ve GraphQL ile veri çekme, basit bir veri API'si oluşturma, çalışma ortamı ayarlama, veritabanı bağlantısı kurma, GraphQL API'si oluşturma ve uygulama geliştirme gibi konuları detaylı olarak ele aldık Örnek uygulamalar da sunduk GraphQL Query, Fragment ve Mutation gibi temel sorgu türleri de detaylı olarak anlatıldı Bu makaleyi okuyarak, TypeScript ve GraphQL ile geliştirme sürecine dair adımları öğrenebilir ve örnek uygulamaları inceleyerek uygulamalarınızda kullanabilirsiniz

Bu makale, TypeScript ve GraphQL kullanarak uygulama geliştirme sürecindeki adımları ele almak ve örnek uygulamalar sunmak amacıyla hazırlanmıştır. TypeScript, JavaScript diline eklemeler yapılarak geliştirilmiş bir programlama dilidir. GraphQL ise veri sorgulama ve manipülasyonunun yapıldığı bir sorgulama dilidir.

GraphQL sorgulamalarının temelini oluşturan query sorgusuyla verileri sorgulayabilirsiniz. Aynı sorguda birden fazla veri tipini döndürmek içinse GraphQL fragments yapısını kullanabilirsiniz. Verileri değiştirmek içinse mutation sorgularını kullanmanız mümkündür.

Bu makalede ayrıca TypeScript ve GraphQL ile nasıl veri çekebileceğinizi, kullanıcılar için basit bir veri API'si nasıl oluşturabileceğinizi, çalışma ortamı ayarlamayı, veritabanı bağlantısı kurmayı, GraphQL API'si oluşturmayı ve uygulama geliştirmeyi öğreneceksiniz.

Örnek uygulamalar, TypeScript ve GraphQL ile nasıl geliştirildiğini gösterirken detaylı olarak özelliklerini anlatacağız. Bu makaleyi okuyarak TypeScript ve GraphQL ile geliştirme sürecine dair adımları öğrenebilir ve örnek uygulamaları inceleyerek uygulamalarınızda kullanabilirsiniz.

TypeScript Nedir?

TypeScript, Microsoft tarafından geliştirilen bir programlama dilidir. Aslında, JavaScript dilinin üstüne eklenen bir katmandır ve söz dizimi açısından JavaScript diline benzemektedir. TypeScript, kod yazarken yapılan hataları erken fark etmemize olanak sağlar. Bu sayede, hataların olası etkilerini önceden görebiliriz ve bu hataları düzeltmek için gereken işlemleri yapabiliriz.

TypeScript, şimdilerde web geliştirme projelerinde yaygın bir şekilde kullanılmaktadır. Bunun nedeni, JavaScript dilinin dinamik doğası nedeniyle, çeşitli hataları önleme açısından daha güvenli bir ortam sağlamasıdır. Ayrıca, geliştiricilerin kodlarını daha okunaklı ve yeniden kullanılabilir hale getirme imkanı sunar.

GraphQL Nedir?

GraphQL, veri sorgulama ve manipülasyonunun yapıldığı bir sorgulama dilidir. Tam olarak söylemek gerekirse, GraphQL, üç temel sorgu türü sunar: query, fragment ve mutation. GraphQL, sorguları sunucuya gönderir ve sunucudan gelen veriye ilişkin istekleri gerçekleştirir.

GraphQL ile birlikte, veri sorgulama ve manipülasyon işlemlerini daha verimli bir şekilde gerçekleştirebilirsiniz. Veri sorgulama işlemlerinde daha az veri alarak daha hızlı sonuçlar alabilirsiniz. Ayrıca, özellikle web uygulamaları geliştirme alanında, GraphQL'in sunduğu esnekliği kullanarak daha iyi bir kullanıcı deneyimi sunabilirsiniz.

GraphQL, RESTful API'den farklı olarak, istemci tarafından istenen esas verileri sağlamak için tek bir API çağrısında birden çok kaynağı birleştirebilir, böylece ağ trafiği ve veritabanı yükü azalır. Sorgulama dilinin güçlü olması, veri manipülasyon işlemlerini de oldukça kolaylaştırır.

Buna ek olarak, GraphQL şeması, tüm sorguların ve mutasyonların tanımlandığı ve tüm sorguların ve mutasyonların adlarını, türlerini ve ilişkilerini belirlediği bir yapıya sahiptir. Bu da uygulamanın hem geliştirme hem de bakım sürecinde daha kolay yönetilmesini sağlar.

Sonuç olarak, GraphQL kullanımı, modern web uygulamalarının geliştirilmesi için oldukça önemlidir. Uygulama geliştiricileri, RESTful API'lerden daha fazla esneklik ve verimlilik sağlamak için GraphQL kullanımını tercih edebilirler.

GraphQL Query Nedir?

GraphQL Query, GraphQL sorgulamalarının temelini oluşturan ve verileri sorgulamak için kullanılan bir sorgu türüdür. Query sorguları, bir istekte belirtilen verilerin belirli bir kısmını getirmek için kullanılır. Bu şekilde, bir REST API'de olduğu gibi tüm veriler istekle birlikte getirilmek yerine, sadece istenilen veriler getirilir. Bu, veri trafiğinin azalması ve uygulama performansının artması açısından oldukça faydalıdır.

GraphQL Query'ler, request payload'ında belirtilir ve yapısı oldukça basittir. Query'ler, birçok sorgu parametresi ile beraber kullanılabilir. Bu parametreler arasında, sorgulanacak verilerin tipi ve sayısı, sorgunun yapıldığı endpoint, sorgunun koşulları gibi özellikler yer alabilir.

GraphQL Query'ler, GraphQL'in özellikler büyük kısmını oluşturur ve özelikle veri sorgulaması konusunda oldukça başarılıdır. Bu nedenle, GraphQL projelerinde Query'lerin doğru ve etkin kullanımı oldukça önemlidir.

GraphQL Fragments Nedir?

GraphQL fragmentler, bir sorguda birden fazla veri tipini döndürmek için kullanılan bir yapıdır. Özellikle, bir sorguda birden fazla veriyi çekerken, tüm verilerin aynı yapısına sahip olması gerekiyor. Bu nedenle, bazı durumlarda tek bir sorgu ile birden fazla veriyi çekmek mümkün olmaz. Bu durumlarda, GraphQL fragmentleri kullanarak tek bir sorguda birden fazla veri tipine erişebiliriz.

Fragments, bir sorguda birden fazla veri tipini döndürmek için kullanıldığı için, sorgunun tekrar kullanımı için de oldukça kullanışlı olabilirler. Ayrıca, fragmentleri kullanarak sorgularda daha az tekrar etme olasılığı, sorguların daha az karmaşık ve daha okunaklı hale gelmesine neden olur.

Fragmentler, GraphQL'de oldukça önemli bir yapıdır ve kullanıcıların birden fazla veritipi ile çalışabilmelerine ve sorgularını daha efektif hale getirmelerine yardımcı olurlar.

GraphQL Mutation Nedir?

GraphQL Mutation, bir GraphQL sorgusu olan GraphQL Query ile tamamen aynı yapıya sahiptir ancak farklı bir amaç için kullanılır. GraphQL Query verileri sorgulamak için kullanılırken, GraphQL Mutation verileri değiştirmek için kullanılır.

GraphQL Mutation ile veritabanında bulunan verileri güncelleyebilir, yeni veri ekleyebilir veya silme işlemleri yapabilirsiniz. Bu sorgu türü, GraphQL Query gibi argumentlar ve fieldler içerir. Argumentlar, değiştirilmek istenen verileri tanımlamak için kullanılır ve fieldler ise geri döndürülecek olan verileri belirler.

Bir GraphQL Mutation sorgusu hazırlamak için öncelikle yapacağınız işlemi belirlemelisiniz. Daha sonra bu işlem için gerekli argumentları tanımlamanız gerekir. Son olarak, geri döndürülecek olan verileri belirleyerek sorgunuzu oluşturabilirsiniz.

Örneğin, bir e-ticaret uygulaması geliştiriyorsunuz ve kullanıcının sepetini güncellemek istiyorsunuz. Bu işlem için bir GraphQL Mutation sorgusu kullanabilirsiniz. Sorgunuzdaki argumentlar kullanıcının sepetindeki ürünlerin ID'lerini içerebilir ve geri döndürülen veriler kullanıcının güncellenmiş sepetini içerebilir.

GraphQL Mutation sorguları, verileri değiştirmek için kullanılabileceği için diğer sorgulardan daha fazla dikkatli hazırlanmalıdır. Ayrıca bu sorgular için gerekli olan yetkilendirmelerin tam olarak sağlandığından emin olmalısınız.

GraphQL Mutation sorgularının doğru şekilde kullanılması, veritabanında bulunan verilerin güncellenmesi için önemlidir. Bu özellik, GraphQL'in güçlü bir sorgu dili olmasını sağlar ve uygulamaların daha etkili bir şekilde çalışmasına olanak tanır.

GraphQL ile Veri Çekmek

GraphQL, veri çekme işlemlerinde kullanılan sorgulama dilidir. Bu dilin en büyük avantajı, istenilen verilerin tek bir sorgu ile alınabilmesidir. Bu sayede, kullanıcıların istediği verileri farklı sorgularla tek tek çekmek yerine, tek bir sorgu ile alabilmesi sağlanır.

GraphQL ile veri çekmek için, öncelikle bir veri API'si oluşturmanız gerekiyor. Bu API üzerinden kullanıcılardan gelen veri isteklerini karşılayabilecek şekilde tasarlanmalıdır. API oluşturulduktan sonra, kullanıcıların istediği verileri sorgulamaları için GraphQL Query'leri oluşturulmalıdır.

Bir GraphQL Query oluştururken, istenen verilerin sorgu yapılacak veritabanında hangi tablolarda saklandığı belirtilmelidir. Ayrıca, sorgunun hangi alanları döndüreceği ve nasıl sıralanacağı da belirtilmelidir. Bu sayede, kullanıcılardan gelen veri istekleri doğru şekilde yanıtlanabilir.

GraphQL ile basit bir veri API'si oluşturma adımları şu şekildedir:

Adım 1:	Çalışma ortamı kurulumu yapılmalıdır.
Adım 2:	Veritabanı bağlantısı kurulmalıdır.
Adım 3:	GraphQL API'si oluşturulmalıdır.
Adım 4:	Kullanıcı arayüzü tasarımı yapılmalıdır.

Bu adımların tamamlanmasıyla, kullanıcılar tarafından veri isteklerinin karşılanabileceği basit bir veri API'si oluşturulabilir.

• Adım 1 ve 2: Çalışma ortamı kurulumu ve veritabanı bağlantısı hakkında daha detaylı bilgi için diğer adımları incelemeye devam edin.
• Adım 3: GraphQL API'si oluşturma adımında, API'nin şeması tanımlanmalıdır. Şemada, hangi verilerin saklanacağı ve hangi sorguların kabul edileceği belirtilir.
• Adım 4: Kullanıcı arayüzü tasarımı için, API'ye erişim sağlamak için bir istemci yazılımı veya web uygulaması tasarlanmalıdır. Bu uygulama üzerinde, kullanıcıların veri isteklerini oluşturabilecekleri bir arayüz oluşturulmalıdır.

GraphQL ile veri çekmek, kullanıcıların istediği verileri daha hızlı ve kolay bir şekilde almasını sağlar. Buna ek olarak, tek bir sorgu ile birden fazla veri tipinin döndürülmesi sağlanabilir. Bu sayede, veri çekme işlemleri daha verimli bir şekilde yapılabilir.

TypeScript ve GraphQL Uygulama Geliştirme

---

TypeScript ve GraphQL kullanarak uygulama geliştirmenin birçok avantajı vardır. Öncelikle, TypeScript kullanarak geliştirme yapmak, JavaScript'in sunduğu olanaklara ek olarak static type checking özelliğiyle birlikte gelir. Bunun anlamı, hataların erken aşamada tespit edilmesi ve daha iyi bir kod kalitesi sağlanmasıdır. GraphQL ise veri manipülasyonu ve sorgulaması için oldukça etkili bir araçtır. Yani, TypeScript ve GraphQL birlikte kullanarak oldukça güçlü bir uygulama geliştirme ortamına sahip olabilirsiniz.

Bir uygulama geliştirirken ilk adım, çalışma ortamınızı ayarlamaktır. TypeScript ve GraphQL kullanarak bir uygulama geliştirecekseniz, öncelikle bu iki aracı da projenize dahil etmeniz gerekecektir. Daha sonra, veritabanı bağlantınızı kurmanız gerekecektir. GraphQL ile çalışmak için, veritabanınızı nasıl bağlayacağınızı da belirlemeniz gerekiyor. Bu aşamada, kullanacağınız veritabanına karar verip nasıl veri alacaklarınızı belirlemelisiniz.

API'nizi oluşturmak için, GraphQL şemasını oluşturmanız gerekiyor. Şema, API'nizin kullanabileceği verilerin türlerini tanımlar ve sorgulama ve manipülasyon için gerekli olan tüm işlemlere izin verir. API'nizin hazır olduğunda, bir kullanıcı arayüzü oluşturmanız gerekecektir. Bu, kullanıcıların giriş yapmasını ve API'nizi kullanmasını sağlayacaktır. Kullanıcı arayüzünü oluşturmak için, React gibi bir framework kullanabilirsiniz.

Özetle, TypeScript ve GraphQL kullanarak uygulama geliştirmek oldukça kolay ve güçlü bir seçenektir. Bu iki aracı birlikte kullanarak, statik tip kontrolü özelliklerinden yararlanabilir ve veri manipülasyonu ve sorgulaması için GraphQL'i kullanabilirsiniz. Uygulama geliştirmenin temel adımlarını izleyerek, API'nizi hazırlayabilir ve kullanıcı arayüzü oluşturarak, kullanıcıların giriş yapmasını sağlayabilirsiniz.

Adım 1: Çalışma Ortamı Ayarlamak

TypeScript ve GraphQL uygulama geliştirmek için öncelikle doğru bir çalışma ortamı oluşturmamız gerekiyor. TypeScript kullanmak için öncelikle Node.js ve NPM kurmamız gerekiyor. Node.js, JavaScript kodlarını çalıştırmanıza olanak sağlayan bir platformdur. NPM ise Node.js paket yöneticisidir. TypeScript kurmak içinse NPM kullanacağız.

Bir sonraki adımımız ise proje dizinimizi oluşturmak ve TypeScript projemizi oluşturmak olacak. Bu adımda, temel klasörleri ve dosyaları oluşturacağız. TypeScript kurulumu tamamlandıktan sonra, 'tsc --init' komutunu kullanarak bir tsconfig.json dosyası oluşturacağız. Bu dosya, TypeScript derleyicisinin projeyi nasıl derlemesi gerektiği hakkında bilgi sağlar.

Çalışma ortamımızı doğru bir şekilde ayarladığımızda, artık projemize devam edebiliriz. Bu adımda, GraphQL bağımlılıklarını ve ilgili paketleri yükleyeceğiz. Bu paketleri yükledikten sonra, TypeScript kodlarımıza GraphQL desteğini ekleyebiliriz.

Adım 2: Veritabanı Bağlantısı Kurmak

GraphQL API'mizi kullanmak için bir veritabanı bağlantısına ihtiyacımız var. Veritabanı seçimimiz projenin gereksinimlerine bağlıdır ve genellikle MongoDB veya PostgreSQL gibi NoSQL veya SQL veritabanlarından biridir. Mongo, genellikle hızlı geliştirme süreci ve daha az yapılandırma gereksinimleri nedeniyle tercih edilirken, PostgreSQL performansı ve veri bütünlüğü açısından daha iyidir.

Bir veritabanı seçtikten sonra, şimdi GraphQL API'mizle bağlantı kurmak için birkaç adımı izlememiz gerekiyor. İlk olarak, veritabanına bağlanmak için bir sürücü veya ORM kullanmamız gerekir. GraphQL API'leri genellikle Apollo Server gibi bir framework üzerine inşa edildiğinden, Apollo Server desteği ile mevcut bir sürücü veya ORM kullanabiliriz. Örneğin, MongoDB için Mongoose veya PostgreSQL için TypeORM kullanabiliriz.

Bir sürücü veya ORM seçtiğimizde, bağlantı kurmak için bazı yapılandırma ayarlarına ihtiyacımız olacaktır. Bu ayarlar, sürücü veya ORM tarafından sağlanacak ve GraphQL API kullanımı için gerekli olacaktır. Veritabanı bağlantısı ve yapılandırma ayrıntılarına dair daha fazla bilgiye bir sürücünün veya ORM'in belgelerinde ulaşabilirsiniz.

Adım 3: GraphQL API'mizi Oluşturmak

GraphQL API'mizi oluşturabilmek için öncelikle GraphQL şeması oluşturmamız gerekiyor. Şema, API'mizin hangi verileri destekleyeceğini tanımlayan bir yapıdır. GraphQL şeması, veri tiplerimiz, alanlarımız ve sorgularımızın nasıl yapılandırılacağı hakkında bilgi verir.

Bir GraphQL şeması, GraphQL sorguları için bir kılavuz görevi görür ve kullanabileceğimiz tüm veri tiplerini, alanları ve özel oluşturulmuş sorguları tanımlar. Şema oluşturmak için, "type" ifadesini kullanarak veri tiplerimizi tanımlamalıyız. Daha sonra, her veri tipi için hangi alanları destekleyeceğimizi tanımlayabiliriz. Bu alanlar, GraphQL sorgularında istek yapmak için kullanılacaktır.

Örneğin, bir kitap mağazası uygulaması oluşturduk ve tüm kitaplarımızın listesini GraphQL API'mizden almak istiyoruz. Bu nedenle, şemamızı kitap veri tipi ile başlatmalıyız. Kitap veri tipimiz, kitap adı, yazar, yayın tarihi gibi alanları içerebilir.

Veri Tipi	Alanlar
Kitap	kitap adı, yazar, yayın tarihi

GraphQL şeması oluşturulduktan sonra, GraphQL sorguları oluşturma adımına geçebiliriz. Bu adımda, veriyi okumak ve değiştirmek için sorgularımızı tanımlayacağız. Okuma sorguları, verileri sorgulamak ve geri döndürmek için kullanılırken, değiştirme sorguları, var olan verileri güncellemek, silmek veya yeni veri eklemek için kullanılır.

Örneğin, kitap mağazası uygulamamızda yeni bir kitap eklemek istediğimizde, "mutation" ifadesini kullanarak bir değiştirme sorgusu oluşturabiliriz. Bu sorgudan, yeni kitap detayları gibi verileri alarak, yeni kitabı veritabanımıza kaydedebiliriz.

• query kitapListesi { ... }
• mutation yeniKitapEkleri { ... }

Adım 3'te, GraphQL şeması oluşturmak, veri tiplerimizi belirlemek ve sorgularımızı tanımlamak için gereken tüm adımları atacağız. Daha sonra, API'mizi çalıştırabilir ve kullanıcıların veri isteklerine yanıt verecek şekilde yapılandırabiliriz.

Adım 4: Uygulama Geliştirme

GraphQL API'sini oluşturduktan sonra, uygulamayı geliştirme adımına geçebiliriz. Bu adımda, API'ye erişmek ve kullanıcıların giriş yapmasını sağlamak için bir kullanıcı arayüzü oluşturacağız. Giriş yapmış kullanıcılara özel içerikleri görüntüleyebilecekleri bir profil sayfası da ekleyeceğiz.

Kullanıcı arayüzünü Angular veya React gibi popüler JavaScript kitaplıkları kullanarak oluşturabilirsiniz. Bu kitaplıklar, uygulamanın bağlı olduğu GraphQL API'ye erişmek için Apollo gibi araçlarla entegre edilebilir. Apollo, GraphQL sorgularının yapılandırılmasını ve çağrılmasını kolaylaştırır.

API'ye bir giriş noktası eklemek için, yalnızca uygun bir yönlendirme işlevi oluşturmanız gerekir. Bu işlev, kullandığınız JavaScript kitaplığına bağlı olarak değişebilir, ancak genellikle şunları içerir:

• Bir giriş sayfası
• API'ye bağlanmak için bir GraphQL istemcisi
• GraphQL sorgusu oluşturmak için gerekli verileri almak için komut dosyaları
• Bir kullanıcı oturum açtığında onları başka sayfalara yönlendirebilecek bir yönlendirme işlevi

Bir profil sayfasını nasıl oluşturacağınıza bağlı olarak, kullanıcının profil bilgilerini güncelleyebileceği veya değiştirebileceği bir düzenleme sayfası da ekleyebilirsiniz. Eğer isterseniz, bunu GraphQL API'nizi mümkün olan en kısa sürede uzatmak ve back-end kodlamasını en aza indirmek için GraphQL mutationlarını kullanarak yapabilirsiniz.

Örnek Uygulamalar

TypeScript ve GraphQL kullanarak geliştirilmiş örnek uygulamaları inceledik. Bu örnek uygulamalar, TypeScript ve GraphQL kullanımının farklı senaryolarda nasıl uygulanabileceğini göstermektedir. Aşağıda detaylı olarak özelliklerini anlatacağız.

İlk örnek uygulamamız, bir e-ticaret sitesidir. Bu site, kullanıcıların alışveriş yapması için tasarlanmıştır. Site, TypeScript ve GraphQL kullanılarak geliştirilmiş olup, müşterilerin sepetlerini, sipariş geçmişlerini ve alışveriş geçmişlerini takip etmelerine olanak sağlar.

İkinci örnek uygulamamız ise bir blog sitesidir. Bu site, kullanıcıların blog yazıları paylaşmaları ve okumaları için tasarlanmıştır. Site, TypeScript ve GraphQL kullanılarak geliştirilmiş olup, blog yazılarının sıralanması, okunması ve yorum yapılması gibi işlemlere olanak sağlar.

Üçüncü örnek uygulamamız ise bir sosyal medya platformudur. Bu platform, kullanıcıların birbirleri ile etkileşime geçmeleri için tasarlanmıştır. Site, TypeScript ve GraphQL kullanılarak geliştirilmiş olup, kullanıcıların profillerini oluşturmalarına, arkadaş eklemelerine ve mesajlaşmalarına olanak sağlar.

Tüm bu örnek uygulamalar, TypeScript ve GraphQL kullanımının ne kadar esnek ve güçlü olduğunu göstermektedir. Bu sayede geliştiriciler, yazılımlarını daha performanslı ve verimli hale getirebilirler.