Gerekli Araçlar ve Ortam Kurulumu

Modern web uygulamaları geliştirirken, kullanıcı deneyimini ve geliştirici verimliliğini artırmak için doğru teknoloji yığınını seçmek kritik öneme sahiptir. Bu rehberde, dinamik ve güçlü bir blog uygulaması oluşturmak için Vue.js’in reaktif gücünü, GraphQL’in esnek veri sorgulama yeteneğini ve Apollo Client’ın kapsamlı durum yönetimi özelliklerini nasıl bir araya getireceğinizi adım adım inceleyeceğiz.

Vue.js, kullanıcı arayüzleri oluşturmak için aşamalı bir JavaScript çerçevesidir. GraphQL, API’ler için bir sorgu dili ve çalışma zamanıdır, istemcinin tam olarak ihtiyacı olan veriyi istemesine olanak tanır. Apollo Client ise, GraphQL verilerini yönetmek ve önbelleğe almak için kapsamlı bir kütüphanedir, Vue uygulamalarınızla sorunsuz bir şekilde entegre olur.

Bu kombinasyon, performanslı, ölçeklenebilir ve bakımı kolay bloglar veya herhangi bir veri odaklı uygulama oluşturmak için idealdir.

Gerekli Araçlar ve Ortam Kurulumu

Başlamadan önce, geliştirme ortamımızı hazırlamamız gerekiyor. Aşağıdaki araçlara ihtiyacınız olacak:

• Node.js ve npm/yarn: JavaScript çalışma zamanı ve paket yöneticisi. Node.js’in en son LTS (Uzun Süreli Destek) sürümünü resmi web sitesinden indirip kurabilirsiniz. npm (Node Package Manager) veya yarn, Node.js ile birlikte gelir.
• Vue CLI: Vue.js projelerini hızlı bir şekilde oluşturmak ve yönetmek için komut satırı arayüzü. Terminalinizde aşağıdaki komutu çalıştırarak kurabilirsiniz:

  npm install -g @vue/cli
  veya
  yarn global add @vue/cli

• Bir Kod Düzenleyici: Visual Studio Code gibi modern bir kod düzenleyici, syntax vurgulama ve uzantılarla geliştirme sürecinizi büyük ölçüde kolaylaştıracaktır.

Bu araçları kurduktan sonra, hem GraphQL sunucumuz hem de Vue istemci uygulamamız için temel proje yapılarını oluşturmaya hazırız.

GraphQL Sunucusu Kurulumu

Blog yazılarımızı depolayacak ve istemci uygulamamızın sorgulayabileceği bir GraphQL sunucusu oluşturarak başlayacağız. Bu örnekte, hızlı ve kolay kurulumu nedeniyle apollo-server kullanacağız.

1. Proje Dizini Oluşturma:

   mkdir blog-server
   cd blog-server
   npm init -y

2. Gerekli Paketleri Kurma:

   npm install apollo-server graphql

3. Sunucuyu Oluşturma (index.js):

   Aşağıdaki kod, basit bir blog şeması ve bazı sahte verilerle bir GraphQL sunucusu oluşturur. Bu sunucu, blog yazılarını sorgulamak için bir API sağlayacaktır.

   // index.js
   const { ApolloServer, gql } = require('apollo-server');
   
   // Sahte Veriler
   const posts = [
     {
       id: '1',
       title: 'Vue.js ile İlk Blog Yazım',
       content: 'Vue.js kullanarak harika bir kullanıcı arayüzü oluşturmak çok kolay!',
       author: 'Ali Can',
     },
     {
       id: '2',
       title: 'GraphQL Neden Önemli?',
       content: 'GraphQL, REST API\'lere göre daha esnek ve verimli veri çekme imkanı sunar.',
       author: 'Ayşe Demir',
     },
     {
       id: '3',
       title: 'Apollo Client ile Durum Yönetimi',
       content: 'Apollo Client, GraphQL verilerini önbelleğe almak ve yönetmek için güçlü bir çözümdür.',
       author: 'Mehmet Yılmaz',
     },
   ];
   
   // GraphQL Şeması
   const typeDefs = gql
     type Post {
       id: ID!
       title: String!
       content: String!
       author: String!
     }
   
     type Query {
       posts: [Post]
       post(id: ID!): Post
     }
   ;
   
   // Çözümleyiciler (Resolvers)
   const resolvers = {
     Query: {
       posts: () => posts,
       post: (parent, { id }) => posts.find(post => post.id === id),
     },
   };
   
   // Apollo Sunucusunu Başlatma
   const server = new ApolloServer({ typeDefs, resolvers });
   
   server.listen({ port: 4000 }).then(({ url }) => {
     console.log(  GraphQL Sunucusu ${url} adresinde hazır!);
   });
   

4. Sunucuyu Çalıştırma:

   node index.js

   Terminalinizde “GraphQL Sunucusu http://localhost:4000/ adresinde hazır!” mesajını görmelisiniz. Bu adrese giderek Apollo Studio’yu (önceki adıyla GraphQL Playground) kullanarak sorgularınızı test edebilirsiniz.

Vue Uygulaması Kurulumu ve Apollo Client Entegrasyonu

Şimdi istemci tarafı Vue uygulamamızı oluşturalım ve GraphQL sunucumuzla iletişim kurmak için Apollo Client’ı entegre edelim.

1. Vue Projesi Oluşturma:

   vue create blog-client

   Sorulduğunda “Default (Vue 3)” veya “Manually select features” seçeneğini seçebilirsiniz. Manuel seçerseniz, Router özelliğini dahil ettiğinizden emin olun.

2. Vue Apollo Eklentisini Ekleme:

   Vue CLI, Apollo Client’ı Vue uygulamalarına entegre etmek için harika bir eklentiye sahiptir:

   cd blog-client
   vue add apollo

   Bu komut, gerekli paketleri yükleyecek (vue-apollo, graphql, apollo-boost, graphql-tag) ve temel Apollo Client yapılandırmasını src/main.js veya ayrı bir src/apollo.js dosyasına ekleyecektir. Varsayılan olarak, GraphQL sunucu URL’sini http://localhost:4000/graphql olarak ayarlayacaktır, bu da bizim sunucumuzla eşleşiyor.

   Eğer vue add apollo kullanmak istemezseniz, aşağıdaki adımları manuel olarak yapabilirsiniz:

   npm install vue-apollo graphql apollo-boost graphql-tag

   Ve src/main.js dosyanızı güncelleyin:

   // src/main.js (Manuel Kurulum)
   import { createApp } from 'vue';
   import App from './App.vue';
   import router from './router';
   
   import { ApolloClient, createHttpLink, InMemoryCache } from '@apollo/client/core';
   import { provideApolloClient } from '@vue/apollo-composable';
   
   // HTTP bağlantısı oluştur
   const httpLink = createHttpLink({
     uri: 'http://localhost:4000/', // GraphQL sunucunuzun adresi
   });
   
   // Apollo Client örneğini oluştur
   const apolloClient = new ApolloClient({
     link: httpLink,
     cache: new InMemoryCache(),
   });
   
   const app = createApp(App);
   
   app.use(router);
   
   // Vue uygulamasına Apollo Client'ı sağla
   provideApolloClient(apolloClient);
   
   app.mount('#app');
   

   vue add apollo kullandığınızda, bu yapılandırmaların çoğu otomatik olarak halledilir ve genellikle src/main.js dosyanızda apolloProvider‘ı uygulamanıza bağlayan bir kod bloğu görürsünüz.

Blog İçeriğini Çekme ve Görüntüleme

Şimdi blog yazılarımızı GraphQL sunucumuzdan çekip Vue bileşenlerimizde görüntüleyelim.

Tüm Blog Yazılarını Listeleme (PostList.vue)

Öncelikle tüm blog yazılarını listeleyecek bir bileşen oluşturalım. src/views/Home.vue dosyasını düzenleyebiliriz.

Tek Bir Blog Yazısını Görüntüleme (PostDetail.vue)

Şimdi belirli bir blog yazısının detaylarını göstermek için bir bileşen oluşturalım. src/views/PostDetail.vue adında yeni bir dosya oluşturun.

Vue Router Yapılandırması

Son olarak, PostDetail bileşenini URL’ye bağlamak için Vue Router’ı yapılandırmamız gerekiyor. src/router/index.js dosyasını güncelleyin:

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import PostDetail from '../views/PostDetail.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/post/:id',
    name: 'PostDetail',
    component: PostDetail,
    props: true, // Route parametrelerini bileşene prop olarak geçirmek için
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

Şimdi Vue uygulamanızı başlatın:

npm run serve

Tarayıcınızda http://localhost:8080/ adresine giderek blog yazılarınızı listelenmiş ve detay sayfalarını görebilmelisiniz.

Pratik İpuçları ve Geliştirmeler

Uygulamanızı daha sağlam ve kullanıcı dostu hale getirmek için bazı pratik ipuçları ve geliştirmeler:

1. Yükleme Durumu ve Hata Yönetimi:

   Yukarıdaki örneklerde gördüğünüz gibi, useQuery kompozisyonu loading ve error reaktif referansları sağlar. Bu sayede veriler yüklenirken bir “Yükleniyor…” mesajı gösterebilir veya bir hata oluştuğunda kullanıcıyı bilgilendirebilirsiniz. Bu, kullanıcı deneyimi için kritik öneme sahiptir.

2. Veri Önbellekleme (Caching):

   Apollo Client, güçlü bir önbellekleme mekanizmasıyla gelir (InMemoryCache). Aynı veriyi tekrar talep ettiğinizde, sunucuya yeni bir istek göndermek yerine önbellekten çeker. Bu, performansı önemli ölçüde artırır. Önbelleği daha verimli kullanmak için sorgularınızda benzersiz kimlikler (id alanları) sağlamak önemlidir.

3. Mutasyonlar (Veri Ekleme/Güncelleme/Silme):

   Blogunuza yeni yazı eklemek veya mevcut yazıları düzenlemek/silmek için GraphQL mutasyonlarını kullanmanız gerekir. useMutation kompozisyonu, mutasyonları kolayca çalıştırmanıza olanak tanır. Örneğin, yeni bir yazı eklemek için:

   GraphQL sunucunuzda bu mutasyonu destekleyen bir resolver tanımlamanız gerekecektir.

4. Sayfalama ve Filtreleme:

   Büyük bloglar için sayfalama (pagination) ve filtreleme özellikleri önemlidir. GraphQL sorgularınıza limit, offset veya first, after gibi argümanlar ekleyerek bu işlevselliği kolayca uygulayabilirsiniz.

5. Gerçek Zamanlı Güncellemeler (Subscriptions):

   Yorumlar gibi gerçek zamanlı güncellemeler gerektiren özellikler için GraphQL Subscriptions kullanabilirsiniz. Apollo Client, WebSocket bağlantıları üzerinden Subscriptions’ı destekler ve bu sayede veriler sunucuda değiştiğinde istemcinize otomatik olarak push edilir.

6. Sunucu Tarafı Oluşturma (SSR) veya Statik Site Oluşturma (SSG):

   SEO ve ilk yükleme performansı için Nuxt.js gibi çerçevelerle SSR veya SSG uygulayabilirsiniz. Nuxt.js, Vue ve Apollo Client ile sorunsuz bir şekilde çalışır ve önceden oluşturulmuş veya sunucu tarafında oluşturulmuş sayfalar sunmanıza olanak tanır.

Sonuç ve Sıkça Sorulan Sorular (SSS)

Bu rehberde, Vue.js’in reaktif doğasını, GraphQL’in esnek veri yönetimini ve Apollo Client’ın kapsamlı durum yönetimini birleştirerek nasıl dinamik bir blog uygulaması oluşturabileceğinizi öğrendiniz. Bu üç teknolojinin birleşimi, modern ve performanslı web uygulamaları geliştirmek için güçlü bir temel sunar.

Artık temel bir blog uygulamanız olduğuna göre, daha fazla özellik ekleyebilir, UI/UX’i geliştirebilir ve uygulamanızı daha da optimize edebilirsiniz. Mutasyonlar ekleyerek yeni blog yazıları oluşturabilir, yorum sistemleri entegre edebilir ve hatta kullanıcı kimlik doğrulaması ekleyerek daha karmaşık bir platform inşa edebilirsiniz.

Sıkça Sorulan Sorular (SSS)

GraphQL neden REST üzerinden tercih edilir?

GraphQL, istemcinin tam olarak ihtiyacı olan veriyi tek bir istekte almasına olanak tanır, bu da “over-fetching” (gereğinden fazla veri çekme) ve “under-fetching” (gereğinden az veri çekme) sorunlarını ortadan kaldırır. Ayrıca, güçlü tür sistemi sayesinde API’niz için otomatik dokümantasyon ve daha iyi geliştirici deneyimi sunar.

Apollo Client kullanmanın faydaları nelerdir?

Apollo Client, GraphQL için kapsamlı bir durum yönetim kütüphanesidir. Gelişmiş önbellekleme (caching), yükleme ve hata durumlarının kolay yönetimi, optimistik UI güncellemeleri, mutasyonlar ve abonelikler (subscriptions) için yerleşik destek gibi özellikler sunar. Ayrıca, Vue, React ve Angular gibi popüler çerçevelerle derin entegrasyonu vardır.

Bu blog yapısı büyük ölçekli uygulamalar için uygun mudur?

Kesinlikle. Vue, GraphQL ve Apollo Client kombinasyonu, küçük bloglardan kurumsal düzeyde karmaşık uygulamalara kadar her ölçekteki projeler için oldukça uygundur. GraphQL’in esnekliği ve Apollo Client’ın sağlam önbellekleme ve durum yönetimi yetenekleri, uygulamanız büyüdükçe yönetimi kolaylaştırır.

Nuxt.js ile birlikte kullanabilir miyim?

Evet, Nuxt.js (Vue tabanlı bir çerçeve) ile Apollo Client’ı sorunsuz bir şekilde kullanabilirsiniz. Nuxt.js için özel olarak tasarlanmış @nuxtjs/apollo modülü, sunucu tarafı oluşturma (SSR) ve statik site oluşturma (SSG) gibi Nuxt.js’in güçlü özelliklerinden faydalanırken Apollo Client’ı kolayca entegre etmenizi sağlar.

Kimlik Doğrulama ve Yetkilendirme nasıl yapılır?

Kimlik doğrulama (Authentication) ve yetkilendirme (Authorization) için genellikle JWT (JSON Web Tokens) veya çerez tabanlı oturumlar kullanılır. Apollo Client tarafında, Apollo Link‘leri kullanarak her GraphQL isteğine kimlik doğrulama token’ını (örneğin, HTTP başlığında) ekleyebilirsiniz. GraphQL sunucunuzda ise, gelen isteğin kimlik bilgilerini doğrulayarak ve kullanıcının belirli bir işlemi yapma yetkisine sahip olup olmadığını kontrol ederek yetkilendirme uygulayabilirsiniz.