Nodejs projesinde GraphQL ve Prisma’nın kullanımı

Uzun zamandır Medium platformunda ilk içeriğimi paylaşmayı düşüyordum. Bunun için Türkçe kaynak olarak az bulunan bir konuyu seçmek istedim ve Nodejs projesinde GraphQL ile Prisma’nın nasıl entegre olup çalıştığını yazmaya karar verdim.
Bu yazıda ki takip edeceğim akış Prisma’dan bahsetmek ve GraphQL ile veritabanımız arasında nasıl bir yerde olduğunu anlatmak, avantajlarından bahsetmek ardından örnek bir projeyle sonlandırmak. O zaman hadi başlayalım!

GraphQL Nedir?

GraphQL basit anlamda veri çekme, sorgulama, ekleme, güncelleme gibi işlemleri yapabileceğimiz bir sorgulama teknolojisidir. Rest API’a kısayla en büyük avantajı client tarafının ihtiyaç duyduğu verilere başka veri almaksızın doğrudan ulaşmasını sağlamasıdır. Bu sayede client tarafı gereksiz verilerle boğuşmamış olur ve trafik konusunda avantaj elde ederiz.

Peki Nedir Bu Prisma?

Neden Prisma?

  • Tercih ettiğiniz veritabanıyla otomatik entegrasyon sağlar.
  • Veri tabanındaki verileri ve ilişkilerini gösteren güçlü bir panel sağlar.

O zaman hadi örnek projemize başlayalım

Bu bölümde ürün ve kategorileri temel alan “ShopApp” isimli bir uygulama yazıyor olacağız.

→ mkdir ShopApp
→ cd ShopApp

Yukarıdaki komutları, komut satırında sırasıyla çalıştırarak makinemizde ShopApp isimli bir klasör oluşturduk ve içerisine girdik.

→ npm init

Ardından komut satırına yukarıdaki gibi npm init yazarak çalıştırıyoruz. Buradan gerekli kişiselleştirmelerinizi yapabilirsiniz. Ben uygulamanın entry point’ini “src/index.js” olarak ayarladım.

Ardından aşağıdaki komutla GraphQL kütüphanesini projeye dahil ediyoruz.
Ben GraphQL server olarak “graphql-yoga” tercih ettim bunu sebebi ise Prisma tarafından oluşturulmuş bir server olması.

→ npm i graphql-yoga

Ardından sırasıyla “nodemon”, “prisma”, “prisma-client-lib” kütüphanelerini projeye dahil ediyoruz.

→ npm i nodemon
→ npm i prisma
→ npm i prisma-client-lib

Ardından Prisma’nın projeye entegre olması ve gerekli ayarları yapmak için komut satırına aşağıdaki komutu yazıp çalıştırıyoruz.

İkinci “prisma” kelimesi, projeye “prisma” isimli bir klasör oluşturmasını ve kurulumun bu klasöre yapacağını belirtiyor.

→ prisma init prisma

Bu komuttan sonra karşımıza aşağıdaki seçim ekranı gelecek.

Biz burada “Demo server + MySQL database” seçimiyle ilerleyeceğiz. Siz kendi projelerinizde mevcut veritabanlarınızı Prisma ile entegre edebilirsiniz.

Evet uygulamamız Prisma’nın bize sağladığı demo sunucusunda MySQL veritabanıyla entegre bir şekilde çalışması için deploy edilmeye hazır. Fakat önce GraphQL ile örnek uygulamamızı oluşturalım.

Proje dizine “src” adında bir klasör ve içine “index.js” isimli bir javascript dosyası oluşturdum.(siz entry point’i nasıl verdiyseniz o şekilde bir dosya yolu ile ilerleyin)

Index dosyasına aşağıdaki kod bloğunu yazıyoruz

Ardından “src” klasörüne GraphQL ile ilgili işlemleri yapacağımız “GraphQL” adında bir klasör daha oluşturuyoruz. Bu klasöre ilgili verilere ulaştığımız methodları yazacağımız “resolvers.js” ve query, mutation ve custom type’ları yazacağımız “schema.graphql” adında iki dosya oluşturuyoruz.

“schema.graphql” dosyasına uygulamada kullanacağımız sorguları ekliyoruz.

schema.graphql

Ardından “prisma” klasörünün altındaki “datamodel.prisma” dosyasına asağıdaki kodları yazıyoruz. Bu kodlar “schema.graphql” dosyasındaki Product ve Category type’larıdır.

Peki nedir bu datamodel ve neden type’ları buraya da ekledik diye sorabilirsiniz. datamodel kısaca Prisma Client işlemlerinin temelini oluşturur. Prisma Client ise Prisma sunucusuna bağlanan ve veritabanınızdaki verileri okumanıza, yazmanıza ve yayınlamanıza(subscription) izin veren, otomatik olarak oluşturulan bir kütüphanedir. Uygulamalarınızda veri erişimi için kullanılır. Prisma Client işlemleri datamodel’e eklenen typelardan türetilir.

datamodel.prisma

Temel amacı, uygulama geliştiricileri için veritabanları ile çalışmayı kolaylaştırmak olan Prisma, “datamodel.prisma” dosyasına eklediğimiz type’lara bakarak bizim yerimize veritabanı işlemlerini yapacak olan methodları projeye dahil edecek, yani Prisma Client oluşturacak. Nasıl mı? Komut satırında “cd prisma” yazarak “prisma” klasörüne giriyoruz ardından aşağıdaki komutu çalıştırıyoruz.

→ prisma generate

evet bir şeyler oldu ama neler değişti, ne oldu, nasıl görebilirim diyorsanız “prisma” klasörünün altındaki “generated” klasörüne ardından da “” prisma-client” klasörüne ve “prisma-schema.js” dosyasına girin. Burada sizin datamodel’lerinize göre veri erişimi için kullanacağınız methodları göreceksiniz.

Sanırım artık “resolver.js” dosyasına Pisma Client’a eklenen veri erişimi için kullanacağımız methodları kullanabiliriz.

resolver.js

Evet “resolver.js” dosyasında gerekli eklemeleri yaptıktan sonra şimdi sıra deploy kısmında, “prisma” klasörünün altındayken komut satırına “prisma deploy” yazıyoruz ve çalıştırıyoruz. Uygulamamız deploy edildikten sonra komut satırında bazı url’ler görmekteyiz

Prisma Admin:” alanında çıkan url sizin Prisma Admin Dashboard’unuz, benim url’im:
https://eu1.prisma.sh/aenesgur-3bb7e4/shopapp-demo/dev/_admin

HTTP:” alanında çıkan url ise uygulamanın çalıştığı sunucunun adresi, benim url’im:
https://eu1.prisma.sh/aenesgur-3bb7e4/shopapp-demo/dev

Şimdi GraphQL ile real-time veritabanımıza Mutation işlemleri yapalım ve yazdığımız Query’lerle sorgulayalım aynı zamanda da Prisma Admin Dashboard’umuzdan yönetelim.

Uygulamanın “package.json” dosyasının “scripts” alanının altına, uygulamamızı nodemon ile start edeceğimizi söylüyoruz

“start”: “nodemon src/index.js”

Öncelikle “schema.grapqhl” dosyasında tanıttığımız, “resolver.js” dosyasında da aksiyon alacak methodları yazdığımız mutation işlemlerinden “createCategory” ile bir kategori oluşturacağız

“Keyboard” isminde bir kategori oluşturmak için “createCategory” mutation’ın name alanına “Keyboard” yazdık ve isteği yaptıktan sonra sorunsuz bir şekilde eklendiğini teyit etmek içinse dönüş değerine eklenen kategorinin “id”ve “name” alanlarını döndürmesini istedik. Sorguyu çalıştırdığımızda sağdaki çıktıyı aldıysak her şey yolunda demektir. Prisma Admin Dashboard’unu yenileyerek eklenen kategori değerini görebilirsiniz.

Ardından eklediğimiz “Keyboard” kategorisine ait bir ürün ürün ekliyoruz. categoryId alanına da “Keyboard” datasına ait id’yi veriyoruz ve sorguyu gönderiyoruz.

Aşağıdaki resimlerde real-time veritabanına eklemiş olduğumuz verileri Prisma aracılığıyla görmekteyiz

Bu örnek uygulama ile GraphQL ile veritabanımız arasında çalışan Prisma’ın bize sağladığı ayrıcalıkları görmüş olduk. Uygulamanın kaynak kodlarına buradan ulaşabilirsiniz. Ayrıca Query alanına eklemiş olduğum diğer sorguları da çalıştırıp sonuçları görebilirsiniz.

Ve yayınlamış olduğum ilk makalenin sonuna gelmiş bulunmaktayım. Prisma hakkında merak ettiğiniz her şeye buradan ulaşabilirsiniz. Oldukça güzel bir döküman hazırlamışlar ve bende dersime oradan çalıştım diyebilirim :)
Okuduğunuz için teşekkür ederim, hepinize sağlıklı günler dilerim.

Kaynak:

Software Developer at Turkish Airlines https://www.linkedin.com/in/aenesgur/

Software Developer at Turkish Airlines https://www.linkedin.com/in/aenesgur/