GraphQL ve Prisma ile REST API - Part 4 (GraphQL ve Prisma Entegrasyonu ve İlk ayarlar)

[mucahidyazar/tutorials
Contribute to mucahidyazar/tutorials development by creating an account on GitHub.github.com](https://github.com/mucahidyazar/tutorials "github.com/mucahidyazar/tutorials")

yukarıdaki reponun içerisinde ki graphql-basics-starter klasörünü edinmenizi istiyorum öncelikle.

https://mucahidyazar.medium.com/graphql-ve-prisma-ile-rest-api-c9a72d49ff39
https://mucahidyazar.medium.com/graphql-ve-prisma-ile-rest-api-part-2-3742ba2946ed
https://mucahidyazar.medium.com/graphql-ve-prisma-ile-rest-api-part-3-57e71650cced

Daha önceki serilerimde anlattığım konulardan (Yukarıdaki linklerden bakabilirsiniz) oluşturduğum basit bir GraphQL servisidir bu starter dosyamız. Biz bunu Prisma ile binding yaparak gerçek database ile iletişime geçireceğiz GraphQL serverımızı.

Prisma nedir?

Prisma bir GraphQL next generation ORM’dir. Peki ORM nedir diyorsanız ORM ise Javascript gibi proğramlama dilleriyle databaselerimize erişimlerimizi kolaylaştıran sanal database gibi düşünebilirsiniz.

PRISMA KURULUMU

• Bu kurulumu 2 şekilde yapabiliriz. Local bir docker compose’u oluşturabilir ve heroku postgresql databasesi üzerinde tutarız. Veya prismanın kendi sunucusunda docker composemizi kurup heroku postgresql databasesinde verilerimizi tutarız. 1. yöntem genelde development denemeleri için kullanılır. 2. yöntem ise daha çok productiona geçileceği zaman kullanılır. Ben size 2 sinide göstereceğim.

LOCAL DOCKER ve HEROKU POSTGRESQL DATABASE for DEVELOPMENT

Adım 1: Herokuya girip yeni proje oluşturuyoruz.

Adım 2: Resources kısmında ki Add-ons kısmında Heroku Postgres ‘i bul ve kur.

Adım 3: Yukarıda ki kısımları tamamlayıp Heroku Postgres’i kurduktan sonra içeri girip settings kısmına gelip, Database Credentials kısmında ki bilgiler sayfasını açalım.

https://www.pgadmin.org/download/

Adım 4: Daha sonra yüklü değilse yukarıdaki linkten Postgres GUI arayüz gösterme uygulaması pgadmin uygulamasını indirelim ve açalım.

Adım 5: Bize tarayıcıda bir pencere acacak ve ilk olarak create a new server diyeceğiz.

Adım 6: Database Credentials kısmında ki bilgileri bu sayfada ki new database oluşturma penceresinde ki Connection sekmesinde ki boşluklara giriyoruz ve SAVE yapıyoruz.

Adım 7: Daha sonra Databases kısmından database namemizi aratarak oluşturduğumuz databasemizi buluyoruz.

Adım 8: Şimdi de Docker Desktop Windows’u yüklüyoruz.

Adım 12: Daha sonra Docker Desktopun açık olduğundan emin olduktan sonra, terminalde aşağıda ki kodu çalıştırarak Docker containerımızı çalıştırıyoruz. Bunu çok detaylı bilip anlamamıza gerek yok.

docker-compose up -d

PRISMA SERVER and HEROKU DATABASE SERVICE for PRODUCTION

• Burada ise bir yerden sonra aslında yukarıdaki işlemlerin aynısını yapacağız. Ama docker compose işlemini burada Prisma kendi serverında bizim için yapacak.

[Prisma 1 Console
Edit descriptionapp.prisma.io](https://app.prisma.io/login "app.prisma.io/login")

Adım 1: Yukarıda ki adrese gidip prisma servisimizi kuracağımız prisma cloud’a kayıt olup giriş yapıyoruz.

Adım 2: ADD SERVER

Adım 3: Dolduruyoruz ve CREATE A SERVER

Adım 4: CREATE A NEW DATABASE

Adım 5: Herokuyu seçiyoruz.

Adım 6: Herokuya bağlanıyoruz.

Adım 7: Herokuda bir database servisi alıyoruz. Ben ücretsiz olanını ediniyorum. Ve CREATE DATABASE

Artık postgreSQL ile çalışacak serverımızı ayarladık. Şimdi de docker compose işlemini yapacak serverımızı ayarlıyoruz.

Adım 8: SET UP A SERVER

Adım 9: HEROKU

Adım 10: CREATE A SERVER

Adım 11: VIEW THE SERVER

Adım 12:

• Buradaki server bizim prisma-docker containerimizi calistiracak.
• Database ise Production databasemizi calistiracak.

Adım 13: Database’ye tıklayip oluşturulmuş yeni heroku servisimize gideceğiz ve oradan asağıda ki gibi Installed Addonstaki Heroku Postgress’e tıklayarak sayfayı aciyoruz.

Adım 14: Ve development serverımızı oluştururken yaptığımız gibi buradan settings’e gidip Credentials bilgilerini alip pgAdminden asagidaki gibi yeni production serverımızı kuruyoruz.

Şimdi oluşturduğumuz bu servisleri graphQL ile entergre etme adımına geldik. Yukarıdaki 2 yöntemden birini yaparak sona kadar geldiğinizde ve elinizde database credentials bilgileri bulunduğunu varsayıyorum ve bir sonra ki aşamayı anlatmaya devam ediyorum.

Adım 1: Aşağıdaki kod ile prisma’yı GLOBAL olarak yüklüyoruz.

npm install -g prisma

Adım 2: Daha sonra indirdiğimiz repodaki graphql-prisma-starter klasörünün içine geliyoruz. Root dizinimize gelip aşağıda ki kodu çalıştırarak prisma initialization’u başlatıyoruz. (İlk başta ki prisma ile yukarıda yüklediğimiz prismaya erişiyoruz ve init komutunu veriyoruz. ikinci prisma ise prisma servisimizin adı ve içinde olacağı klasör ismini belirliyoruz.)

prisma init prisma

Adım 3: Ve burada bize bazı sorular soracak. Burada gerekli yerlere oluşturduğumuz yukarıda ki servislerden elde ettiğimiz database bilgilerini yazarken diğer kalanları için benim gibi aşağıdaki seçeneklerle ilerleyin şimdilik daha sonra siz diğerlerini denersiniz.

Set up a new Prisma server or deploy to an existing server?
Use existing database

What kind of database do you want to deploy to?
PostgreSQL

Does your database contain existing data?
No (Çünkü elimizde yedeklenmiş bir database datası yok olsaydı onlarla birlikte kullanabilirdik.)

Enter database host
ec2–176–34–114–78.eu-west-1.compute.amazonaws.com
(Burada ise herokuda olusturdugumuz ucretsiz databasenin credential informations da bulunan hostunu yazıyoruz.)

Enter database port
5432
(Burada ise herokuda oluşturduğumuz ücretsiz databasenin credential informations da bulunan portunu yazıyoruz.)

Enter database user
zzlimvlciyrewy
(Burada ise herokuda oluşturduğumuz ücretsiz databasenin credential informations da bulunan user kismini yazıyoruz.)

Enter database password
[hidden]
(Burada ise herokuda oluşturduğumuz ücretsiz databasenin credential informations da bulunan Password kısmını yazıyoruz.)

Enter database name (the database includes the schema)
dfm7njqompn05g
(Burada ise herokuda oluşturduğumuz ücretsiz databasenin credential informations da bulunan database kısmını yazıyoruz.)

Use SSL?
Yes
(Heroku da SSL oldugu icin buraya Yes diyoruz)

Select the programming language for the generated Prisma client
Don’t generate
(Herhangi boilerplate’ye ihtiyacımız olmadığı için dont generate yapıyoruz.)

Ve bitti. Bu bize 3 dosya oluşturacak prisma klasörü altında aşagıda ki gibi.

Datamodel.prisma => Bizim schema.graphql ile aynısıdır, hiçbir farkı yoktur sadece prisma icin type definitionlarimizi tanımlariz burada. Prisma bunu kullanarak herhangi bir seçtiğimiz database için database structuremızı kurar ve hazırlar bizim için.

Prisma.yml => prisma’ya ait default ayarlar burada bulunur.

Docker-compose.yml => Burada ise docker servisleri ve database ayarlarına ait ayarlar bulunur.

Adım 4: datamodel.prisma’nın adını datamodel.graphql yapıyoruz. ve prisma.yml icindede datamadel: datamodel.graphql yapiyoruz.

ÖNEMLİ AYARLAR

generated.graphql

Adım 5: Her prisma deploy işlemini yaptıktan sonra otomatik generated.graphql dosyamızın oluşması için aşağıdaki prisma hooksunu prisma.yml içine ekliyoruz. (Bu generated.graphql dosyası bizim prismada oluşturduğumuz databasede yapacaklarımız Query Mutation işlemlerinin hepsini barındıran, datamode.graphql içinde olan type lara göre oluşturulmuş .graphql dosyasıdır.)

Environment Variables

Adım 6:

• Aşağıdaki npm modülünü yüklüyoruz.

npm install env-cmd --save-dev

• root dizininde config klasörü ve içinde env klasörü oluşturuyoruz. Ve env klasörü içinde 3 tane dev.env-test.env-prod.env adında 3 dosya oluşturuyoruz. Ve örnek olarak ben dev.env’yi aşağıdaki şekilde ki gibi ayarlıyorum.

• Şimdide prisma klasöründe ki prisma.yml dosyasını aşağıda ki gibi oluşturduğum environment variable’ı dahil ediyorum.

Adım 7: prisma deploy yapmadan önce son olarak package.json’daki dev scriptini aşağıdaki gibi ayarlıyorum ki environment variablelarım çalıştırıldığında nodejs bunları görsün ve kullandığımız yerlerde tanısın.

Adım 8: Daha sonra oluşturduğum tüm prisma klasörüne geliyoruz terminalde ve aşağıda ki kodu çalıştırıyoruz.

prisma deploy

Adım 9:

• Daha sonra aşağıda ki ekran gibi bir ekran sonucu almalıyız. Aşağıda çıkan 2 tane uyarılara aldırmıyoruz. Sonra diğer 3 tane soruyu cevaplıyoruz. Burada prisma.io üzerindeki sunucumuz üzerinde servisimizi ayağa kaldırıyoruz.

• Ve sizinde farkedeceğiniz üzere prisma.yml aşağıdaki gibi olmuş olacak. Bizin environment yazısı yorum olmuş.

• Biz buradaki yeni linkimizi alıp dev.env’ye gidip PRISMA endpointe veriyoruz ve prisma.yml içindeki endpointide silip eski environment ile çalışan endpoint: ${env:PRISMA_ENDPOINT} yapıyoruz tekrardan.

Adım 10: prisma deploy işlemini yapmadan önce datamodel.graphql dosyasına gelip aşağıdaki mock User type’ını ekleyelim. Buraya daha sonra graphql servisimizde oluşturduğumuz typeları ekleyeceğiz.

Adım 11: Artık deploy işlemimizi environment variable a göre aşağıda ki gibi yapabiliriz.

prisma1 deploy -e ../config/env/prod.env

Adım 12: Artık endpoınt envıronment variable tanımladığımız adrese gittiğimizde aşağıdaki görüntüdeki gibi bir playground ile karşılacağız.

Prisma-GraphQL Servisimizi Dışarıya Kapatmak

Adım 13:

• Prisma servisimize direk olarak clientlarin ulaşamaması için servisimizi dış dünyaya kapatmalıyız. GraphQL servisimiz ise Prisma ile belirleyecegimiz bir sifre ile haberlesmesini saglayacagiz.
• Yani açıklık getirmek gerekirse. Artık elimizde 2 tane GraphQL playground olacak. Bunlardan birincisi bizim elimizle kendi mutation ve querylerimizi yazdığımız GraphQL servisi ve bir diğeride Prismaya deploy ederek Prismanın bu deploy işlemi ile bize oluşturduğu GraphQL servisi var. Client side tarafı bu prismanın bize oluşturduğu GraphQL servisi ile haberleşmeyecek. Biz Kendi GraphQL servisimizle, prismanın bizim için oluşturduğu bu GraphQL servisi ile haberleşeceğiz ve Clientside tarafıda bizim GraphQL servisimizde yazdığımız Mutation ve Querylerle haberleşerek çalışacak.
• Tabi biz Prisma GraphQL servisine bir secret key belirleyeceğiz ve bizim GraphQL servisimiz bu keyi Prismanın GraphQL servisine vererek haberleşecek. Browserdan bu servise ulaşmak istersek isek bizde prisma servisimizden alacağımız bir token ile Prisma GraphQL servisimize browserdan manuel olarakda erişebileceğiz zaten.

• Prisma servisimizin dosyalarının olduğu yerde ki prisma.yml dosyasının içine gelip aşağıda ki gibi secret key belirliyoruz. Ben önce environment variable a ekledim secret keyimi sonra prisma.yml içinde aşağıdaki gibi kullandım.

• Ve prisma klasor dizinimize terminalden gelip prisma deploy komutunu calıştırarak secret keyimizi prismaya gönderiyoruz.

• Ve artın endpoınte gittiğinizde göreceksiniz ki Prisma servisiniz GraphQL playgrounduna erişemiyorsunuz.

PRİSMA TOKEN

• Browserdan prisma playgrounda erişebilmek için prisma token almamız gerekiyor ve bu prisma tokenı Prisma Graphql playgrounduna http headers kısmında Authorızation’a başına bearer yazıp göndermemiz gerekiyor.
• Aşağıdaki kod ile tokenimızı resimdeki gibi alıyoruz.

prisma1 token -e ../config/env/dev.env

• Daha sonra bu tokenı playgroundumuz altında bulunan HTTP HEADERS’a girip Authorization’a Bearer diyip yanına tokenı yapıştırıp aşağıda ki gibi tanımlamamız gerekiyor. Ve artık prisma playgrounduda şifreli kullanabiliyor olacağız.

PRİSMA DELETE

• Diyelim ki User alanına yeni bir nullable alan ekledik, diğer önce ki datalarda bu yeni alan olmayacağı için prisma deploy başarısız olacaktır. O yüzden burada once delete yaparak tüm dataları temizliyoruz ve daha sonra password alanı ekliyoruz ve deploy edebiliriz artık.

PRİSMA ve GRAPHQL SERVİSİNİ BAĞLAMAK

Adım 14: PRISMA-BINDING

npm install prisma-binding

• Ve artık prisma servisimizi ve bizim nodejs ile oluşturduğumuz graphql servisimizi, prisma-binding kütüphanesi ile birbirine bağlayabiliriz.

• src dizini altında prisma.js adında dosyamızı oluşturup içine aşağıdaki kodları yazıyoruz.

• Prisma objesini prisma-binding kütüphanesi içinde alarak import ediyoruz. Ve daha sonra bunu bir değişkene atarak new ile Prisma oluşturuyoruz.

• typeDefs propertysine prisma deploy işlemleri sonrası belirlediğimiz yoldaki generated klasörü içinde oluşan prisma.graphql dosyasının yolunu veriyoruz.
• endpoint olarak environment variabledaki endpointimizi veriyoruz.
• secret olarakda Nodejs GraphQL servisimizin Prisma’ya koyduğumuz secret keyi tanıması ve bilmesi daha sonrada prisma GraphQL servisine söylemesi için environment variable’daki oluşturduğumuz secret keyi veriyoruz.

• Daha sonra index.js dosyamıza gelip bu oluşturduğumuz prisma.js dosyasını import ediyoruz ve GraphQL servisimize context olarak aşağıdaki gibi veriyoruz.

• Ve artık GraphQL servisimizde oluşturacağımız Query ve Mutationlarda bu prismayı contextden yakalayıp GraphQL servisimiz içinden prisma servisine bağlanarak istediğimiz Query ve Mutationları oluşturabileceğiz.

Adım 15: FINAL

• Ve gelin son olarak oluşturduğumuz bu projeyle, GraphQL servisine bir mutation yazalım ve prismaya bağlanıp bir User oluşturalım.

• Once schema.graphql dosyasina gelip aşağıdaki gibi bir mutation ve bu mutation için basit bir input oluşturuyoruz.

• Ve daha sonra resolver içindeki Mutation.js dosyasına gelip aşağıda ki mutationu oluşturuyoruz.

• Ve daha sonra localhostteki graphql servisimize gelip aşağıdaki mutationumuzu çalıştırdığımızda prismaya bağlanıp databasemize kaydettiğimiz ilk userımızı oluşturmuş olacağız. :)

Şimdilik bu kadar. Bu GraphQL ve pisma servislerimizi bağladığımız ve gerekli konfigrasyon ayarlarını yaptığımız bir yazı serisiydi. Bir sonraki serimde ise Prisma ile yapabileceğimiz ve rest api ımızı şekillendireceğimiz işlemleri yapacağız. Şimdilik hoşçakalın.