JavaScript ve GraphQL: Temel ve İleri Seviye Kullanım

Giriş

Modern web geliştirmede, istemci ve sunucu arasındaki veri yönetimi oldukça önemlidir. Geleneksel olarak REST API'leri kullanılsa da, GraphQL daha verimli ve esnek bir veri çekme yöntemi sunarak devrim yaratıyor.

Bu rehberde, JavaScript ile GraphQL'in temel ve ileri seviye kullanımını adım adım öğreneceksiniz. Kurulumdan gelişmiş sorgu optimizasyonlarına kadar her şeyi, örnekler ve açıklamalarla detaylıca ele alacağız.

???? GraphQL Nedir?

GraphQL, Facebook tarafından geliştirilen açık kaynaklı bir API sorgulama dilidir. İstemcilerin yalnızca ihtiyaç duyduğu verileri talep etmesine olanak tanır, böylece gereksiz veri alışverişi önlenir.

GraphQL’in Temel Özellikleri

• ???? Deklaratif Veri Çekme: Sadece ihtiyaç duyulan verileri çekin.
• ⚡ Verimli: Ağ kullanımını minimize eder.
• ???? Tip Güvenli Şema: Verilerin tutarlılığını sağlar.
• ???? Gerçek Zamanlı Destek: Abonelikler sayesinde canlı veri akışı mümkündür.

???? Node.js ile Temel Bir GraphQL Sunucusu Kurulumu

İlk olarak gerekli paketleri yükleyin:

npm init -y
npm install express express-graphql graphql

server.js

const express = require('express');
const { graphqlHTTP } = require('express-graphql');
const { buildSchema } = require('graphql');

// Şema Tanımı
const schema = buildSchema(`
  type Query {
    hello: String
    greet(name: String!): String
  }
`);

// Resolver Fonksiyonları
const root = {
  hello: () => 'Merhaba, Dünya!',
  greet: ({ name }) => `Merhaba, ${name}!`,
};

// Express Sunucusunu Kurma
const app = express();
app.use('/graphql', graphqlHTTP({
  schema: schema,
  rootValue: root,
  graphiql: true, // GraphiQL arayüzünü aktif et
}));

app.listen(4000, () => console.log('Sunucu http://localhost:4000/graphql adresinde çalışıyor'));

Sunucuyu Çalıştırın

node server.js

http://localhost:4000/graphql adresinden GraphiQL arayüzünü kullanarak sorgular yapabilirsiniz.

???? Temel GraphQL Sorguları

1. Basit Sorgu

{
  hello
}

Yanıt:

{
  "data": {
    "hello": "Merhaba, Dünya!"
  }
}

2. Parametreli Sorgu

{
  greet(name: "Ahmet")
}

Yanıt:

{
  "data": {
    "greet": "Merhaba, Ahmet!"
  }
}

????️ İleri Seviye GraphQL Konseptleri

1. Özel Türler ve Resolver Tanımlama

Bir kullanıcı sistemi geliştirelim.

const schema = buildSchema(`
  type User {
    id: ID!
    name: String!
    email: String!
  }

  type Query {
    getUser(id: ID!): User
  }

  type Mutation {
    createUser(name: String!, email: String!): User
  }
`);

const users = [];
let idCounter = 1;

const root = {
  getUser: ({ id }) => users.find(user => user.id === id),
  createUser: ({ name, email }) => {
    const user = { id: idCounter++, name, email };
    users.push(user);
    return user;
  },
};

2. Mutation ile Veri Ekleme

mutation {
  createUser(name: "Mehmet", email: "mehmet@example.com") {
    id
    name
    email
  }
}

Yanıt:

{
  "data": {
    "createUser": {
      "id": "1",
      "name": "Mehmet",
      "email": "mehmet@example.com"
    }
  }
}

3. Değişkenlerle Sorgu Kullanımı

query getUser($userId: ID!) {
  getUser(id: $userId) {
    id
    name
    email
  }
}

Değişkenler:

{
  "userId": "1"
}

⚡ GraphQL ile Gerçek Zamanlı Veri (Abonelikler)

GraphQL, abonelikler (subscriptions) aracılığıyla gerçek zamanlı veri akışını destekler.

Kurulum:

npm install graphql-subscriptions ws

Not: Subscriptions genellikle Apollo Server gibi gelişmiş kütüphaneler ile daha kolay yönetilir.

✅ GraphQL Geliştirirken Dikkat Edilmesi Gerekenler

1. Tip Güvenli Şema Kullanın: Veri tutarlılığı için önemlidir.
2. Sayfalama ve Filtreleme Uygulayın: Büyük veri yüklemelerinden kaçının.
3. Sorguları Gruplayın: DataLoader gibi kütüphaneler kullanarak N+1 problemini önleyin.
4. API'yi Güvenli Hale Getirin: Kimlik doğrulama ve yetkilendirme kontrollerini ekleyin.
5. Performans Optimizasyonu Yapın: Resolver fonksiyonlarını verimli kullanın.

???? REST ve GraphQL Karşılaştırması

???? JavaScript'te Apollo Client ile GraphQL Kullanımı

Apollo Client'ı yükleyin:

npm install @apollo/client graphql

Apollo Client Kurulumu (React Örneği)

import { ApolloClient, InMemoryCache, ApolloProvider, gql, useQuery } from '@apollo/client';

const client = new ApolloClient({
  uri: 'http://localhost:4000/graphql',
  cache: new InMemoryCache()
});

function App() {
  return (
    <ApolloProvider client={client}>
      <Users />
    </ApolloProvider>
  );
}

function Users() {
  const { loading, error, data } = useQuery(gql`
    {
      getUser(id: "1") {
        name
        email
      }
    }
  `);

  if (loading) return <p>Yükleniyor...</p>;
  if (error) return <p>Hata :(</p>;

  return <div>{data.getUser.name}</div>;
}

???? Sonuç

GraphQL, modern API geliştirme için devrim niteliğinde bir teknolojidir. JavaScript ile birleştiğinde:

• Verimli ve ölçeklenebilir API'ler geliştirebilirsiniz.
• Veri çekme esnekliğini artırabilirsiniz.
• Ağ üzerindeki yükü azaltabilirsiniz.
• Gerçek zamanlı iletişimi kolayca destekleyebilirsiniz.

Başlangıç seviyesinden ileri seviye kullanımlara kadar, GraphQL, güçlü ve verimli API geliştirme için mükemmel bir çözümdür.