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.
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.
İ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.
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.
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.
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”
Ş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
“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:
- https://www.prisma.io/
- https://dev.to/yeeiodev/differences-between-express-graphql-apollo-and-graphql-yoga-3m82
- https://www.prisma.io/blog/graphql-sdl-schema-definition-language-6755bcb9ce51
- https://www.prisma.io/blog/prisma-client-preview-ahph4o1umail
- https://www.prisma.io/docs/understand-prisma/prisma-in-your-stack/is-prisma-an-orm#:~:text=ORMs%20are%20libraries%20that%20map,are%20tailored%20to%20your%20models.
- https://v1.prisma.io/docs/1.34/understand-prisma/prisma-basics-datamodel-client-and-server-fgz4/#prisma-client-operations-are-derived-from-the-datamodel
