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

Image for post
Image for post

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?

Bu yazıdaki temel amacım GraphQL’i anlatmak olmadığı için temel bir iki cümle ile açıklayıp asıl konumuz olan Prismaya geçeceğim.

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?

Prisma, GraphQL’in veritabanınızla etkileşimde bulunmak için kullanabileceği bir istemci(client) sağlar. Aslında bir ORM gibi düşünebiliriz fakat ORM’lerle aynı hedefleri paylaşmasına rağmen temelde farklı bir yaklaşım benimser. Prisma’nın temel amacı, uygulama geliştiricileri için veritabanları ile çalışmayı kolaylaştırmaktır. ORM’ler, veritabanındaki tabloları, programlama dilinizdeki sınıflarla eşleyen kütüphanelerdir. Prisma ise bir veritabanı toolkit’idir. Prisma MySQL, MongoDB, PostgreSQL gibi birçok popüler veritabanıyla uyumlu bir şekilde çalışmaktadır.

Neden Prisma?

  • Prisma, veri erişimi, migrations ve veri görseli yönetimi için kullanılan güçlü bir veritabanı aracıdır. Geleneksel ORM’lerin yerini alır ve karmaşık veritabanı iş akışlarından kaynaklanan sorunları ortadan kaldırır.
  • Tercih ettiğiniz veritabanıyla otomatik entegrasyon sağlar.
  • Veri tabanındaki verileri ve ilişkilerini gösteren güçlü bir panel sağlar.
Image for post
Image for post

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.

Image for post
Image for post

İlerledikten sonra bölge seçimi yapıyoruz ve servisimize bir isim veriyoruz. Ben “shopapp-demo” ismini verdim. Stage alanını da default geçip Prisma Client için programlama dili kısmından da “Prisma JavaScript Client” seçeneğini seçip ayarları tamamlıyoruz.

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

Şimdi komut satırından “npm start” diyerek http://localhost:4000 portundan uygulamamızı çalıştırıyoruz. http://localhost:4000 adresine gittiğimizde bizi GraphQL playground karşılıyor olacak ve buradan işlemlerimizi gerçekleştiriyor olacağız.

Ö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

Image for post
Image for post

“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.

Image for post
Image for post

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

Image for post
Image for post
Image for post
Image for post

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 Emlakjet https://www.linkedin.com/in/aenesgur/

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store