{"id":38619,"date":"2026-02-04T08:40:55","date_gmt":"2026-02-04T05:40:55","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=38619"},"modified":"2026-02-04T08:40:55","modified_gmt":"2026-02-04T05:40:55","slug":"react-prisma-ve-graphql-ile-bir-yemek-tarifi-uygulamasi-nasil-gelistirilir","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/react-prisma-ve-graphql-ile-bir-yemek-tarifi-uygulamasi-nasil-gelistirilir\/","title":{"rendered":"React, Prisma ve GraphQL ile Bir Yemek Tarifi Uygulamas\u0131 Nas\u0131l Geli\u015ftirilir?"},"content":{"rendered":"

<\/p>\n

React, Prisma ve GraphQL ile Bir Yemek Tarifi Uygulamas\u0131 Nas\u0131l Geli\u015ftirilir?<\/h2>\n

Giri\u015f<\/h2>\n

G\u00fcn\u00fcm\u00fcz\u00fcn h\u0131zla de\u011fi\u015fen dijital d\u00fcnyas\u0131nda, kullan\u0131c\u0131 deneyimini merkeze alan, performansl\u0131 ve \u00f6l\u00e7eklenebilir uygulamalar geli\u015ftirmek b\u00fcy\u00fck \u00f6nem ta\u015f\u0131maktad\u0131r. Bu makalede, modern web geli\u015ftirmenin en g\u00fc\u00e7l\u00fc ara\u00e7lar\u0131ndan baz\u0131lar\u0131n\u0131 bir araya getirerek dinamik bir yemek tarifi uygulamas\u0131 olu\u015fturma s\u00fcrecini ad\u0131m ad\u0131m inceleyece\u011fiz: React ile zengin bir kullan\u0131c\u0131 aray\u00fcz\u00fc, GraphQL ile esnek ve verimli bir API katman\u0131 ve Prisma ile g\u00fc\u00e7l\u00fc, tip g\u00fcvenli bir veritaban\u0131 etkile\u015fimi sa\u011flayaca\u011f\u0131z.<\/p>\n

Yemek tarifi uygulamalar\u0131, genellikle karma\u015f\u0131k veri yap\u0131lar\u0131na (tarifler, malzemeler, ad\u0131mlar, kategoriler, kullan\u0131c\u0131 yorumlar\u0131 vb.) ve \u00e7e\u015fitli kullan\u0131c\u0131 etkile\u015fimlerine (tarif arama, filtreleme, ekleme, d\u00fczenleme, favorilere ekleme) sahip olduklar\u0131 i\u00e7in, bu teknolojilerin g\u00fcc\u00fcn\u00fc sergilemek i\u00e7in m\u00fckemmel birer \u00f6rnek te\u015fkil eder. Bu teknoloji y\u0131\u011f\u0131n\u0131, geli\u015ftiricilere hem frontend hem de backend taraf\u0131nda \u00fcst d\u00fczey bir verimlilik ve esneklik sunar.<\/p>\n

Bu makalenin amac\u0131, ba\u015flang\u0131\u00e7 seviyesinden ileri seviyeye kadar t\u00fcm geli\u015ftiricilere hitap eden kapsaml\u0131 bir rehber sunmakt\u0131r. Proje kurulumundan veritaban\u0131 modellemeye, GraphQL sunucusu olu\u015fturmaktan React bile\u015fenlerini entegre etmeye kadar her ad\u0131m\u0131 detayl\u0131ca ele alaca\u011f\u0131z. Ayr\u0131ca, kimlik do\u011frulama, hata y\u00f6netimi ve da\u011f\u0131t\u0131m gibi geli\u015fmi\u015f konulara da de\u011finerek uygulaman\u0131z\u0131 \u00fcretime haz\u0131r hale getirme konusunda size yol g\u00f6sterece\u011fiz.<\/p>\n

Teknoloji Se\u00e7imleri ve Nedenleri<\/h2>\n

Bu projede kulland\u0131\u011f\u0131m\u0131z her bir teknoloji, belirli bir problemi \u00e7\u00f6zmek ve geli\u015ftirme s\u00fcrecini optimize etmek i\u00e7in \u00f6zenle se\u00e7ilmi\u015ftir. \u0130\u015fte bu teknolojilerin tercih edilme nedenleri:<\/p>\n

React (Frontend)<\/h3>\n

React, Facebook taraf\u0131ndan geli\u015ftirilen ve kullan\u0131c\u0131 aray\u00fczleri olu\u015fturmak i\u00e7in kullan\u0131lan pop\u00fcler bir JavaScript k\u00fct\u00fcphanesidir. Bile\u015fen tabanl\u0131 mimarisi sayesinde, uygulaman\u0131n farkl\u0131 b\u00f6l\u00fcmlerini ba\u011f\u0131ms\u0131z, yeniden kullan\u0131labilir par\u00e7alara ay\u0131rmak m\u00fcmk\u00fcnd\u00fcr. Bu, kodun daha d\u00fczenli, bak\u0131m\u0131 daha kolay ve geli\u015ftirme s\u00fcrecinin daha h\u0131zl\u0131 olmas\u0131n\u0131 sa\u011flar. Sanal DOM (Virtual DOM) kullan\u0131m\u0131 sayesinde, DOM g\u00fcncellemeleri optimize edilir ve bu da y\u00fcksek performansl\u0131 kullan\u0131c\u0131 aray\u00fczleri sunar. Geni\u015f bir geli\u015ftirici toplulu\u011fu ve zengin bir ekosisteme sahip olmas\u0131, kar\u015f\u0131la\u015f\u0131lan sorunlara h\u0131zl\u0131 \u00e7\u00f6z\u00fcmler bulunmas\u0131n\u0131 ve haz\u0131r k\u00fct\u00fcphanelerden faydalan\u0131lmas\u0131n\u0131 kolayla\u015ft\u0131r\u0131r. Yemek tarifi uygulamam\u0131zda, tarif listelerini, detay sayfalar\u0131n\u0131, formlar\u0131 ve di\u011fer etkile\u015fimli elemanlar\u0131 olu\u015fturmak i\u00e7in React’\u0131n g\u00fcc\u00fcnden faydalanaca\u011f\u0131z.<\/p>\n

GraphQL (API Katman\u0131)<\/h3>\n

GraphQL, API’ler i\u00e7in bir sorgu dili ve \u00e7al\u0131\u015fma zaman\u0131d\u0131r. RESTful API’lere k\u0131yasla bir\u00e7ok avantaj sunar. En b\u00fcy\u00fck avantajlar\u0131ndan biri, istemcinin tam olarak ihtiyac\u0131 olan veriyi talep etmesine olanak tan\u0131mas\u0131d\u0131r. Bu, “over-fetching” (gere\u011finden fazla veri \u00e7ekme) ve “under-fetching” (gereken t\u00fcm veriyi tek seferde alamama) sorunlar\u0131n\u0131 ortadan kald\u0131r\u0131r. Tek bir endpoint \u00fczerinden t\u00fcm veri i\u015flemlerini y\u00f6netebilir, b\u00f6ylece API geli\u015ftirme ve bak\u0131m\u0131n\u0131 basitle\u015ftirebilirsiniz. G\u00fc\u00e7l\u00fc tip sistemi sayesinde, API’nizin ne t\u00fcr veriler d\u00f6nd\u00fcrece\u011fi ve ne t\u00fcr arg\u00fcmanlar kabul edece\u011fi a\u00e7\u0131k\u00e7a tan\u0131mlan\u0131r; bu da istemci ve sunucu aras\u0131ndaki ileti\u015fimi daha g\u00fcvenilir hale getirir. GraphiQL gibi ara\u00e7lar, API’yi ke\u015ffetmeyi ve test etmeyi son derece kolayla\u015ft\u0131r\u0131r. Yemek tarifi uygulamam\u0131zda, tarifleri sorgulamak, yeni tarifler eklemek, mevcut tarifleri g\u00fcncellemek veya silmek i\u00e7in GraphQL’i kullanaca\u011f\u0131z.<\/p>\n

Prisma (ORM\/Veritaban\u0131 Katman\u0131)<\/h3>\n

Prisma, modern bir veritaban\u0131 ara\u00e7 tak\u0131m\u0131d\u0131r ve \u00f6zellikle TypeScript ile m\u00fckemmel bir uyum i\u00e7indedir. Bir Object-Relational Mapper (ORM) olarak, veritaban\u0131 i\u015flemlerini JavaScript\/TypeScript kodunuzla yapman\u0131z\u0131 sa\u011flar, SQL sorgular\u0131 yazma ihtiyac\u0131n\u0131 ortadan kald\u0131r\u0131r. Prisma’n\u0131n en g\u00fc\u00e7l\u00fc \u00f6zelliklerinden biri, schema.prisma<\/code> dosyas\u0131 arac\u0131l\u0131\u011f\u0131yla veritaban\u0131 \u015feman\u0131z\u0131 kod olarak tan\u0131mlayabilmenizdir (Schema-as-Code). Bu, veritaban\u0131 \u015feman\u0131z\u0131n versiyon kontrol\u00fcn\u00fc yapman\u0131za ve prisma migrate<\/code> komutlar\u0131yla kolayca de\u011fi\u015fiklikleri uygulaman\u0131za olanak tan\u0131r. Tip g\u00fcvenli\u011fi, otomatik tamamlama ve derleme zaman\u0131 kontrolleri sayesinde geli\u015ftirici deneyimini \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131r\u0131r ve hatalar\u0131 azalt\u0131r. PostgreSQL, MySQL, SQLite, SQL Server ve MongoDB gibi \u00e7e\u015fitli veritabanlar\u0131n\u0131 destekler. Yemek tarifi uygulamam\u0131zda, tarifler ve malzemeler gibi modelleri tan\u0131mlamak, bu modeller \u00fczerinde CRUD (Olu\u015fturma, Okuma, G\u00fcncelleme, Silme) i\u015flemleri yapmak ve veritaban\u0131 ile etkile\u015fim kurmak i\u00e7in Prisma’y\u0131 kullanaca\u011f\u0131z.<\/p>\n

Proje Kurulumu ve Temel Yap\u0131land\u0131rma<\/h2>\n

Uygulamam\u0131z\u0131 geli\u015ftirmeye ba\u015flamadan \u00f6nce, frontend ve backend i\u00e7in ayr\u0131 ayr\u0131 projeler olu\u015fturup temel yap\u0131land\u0131rmalar\u0131 yapmam\u0131z gerekiyor.<\/p>\n

Proje Ba\u015flatma (Frontend)<\/h3>\n

React uygulamas\u0131n\u0131 ba\u015flatmak i\u00e7in Vite veya Create React App kullanabiliriz. Vite, daha h\u0131zl\u0131 bir geli\u015ftirme deneyimi sunar, bu y\u00fczden onu tercih edece\u011fiz:<\/p>\n

# Frontend projesi olu\u015fturma\nnpm create vite@latest recipe-app-frontend -- --template react-ts\ncd recipe-app-frontend\nnpm install\nnpm run dev<\/code><\/pre>\n
Bu komutlar, recipe-app-frontend<\/code> ad\u0131nda bir dizin olu\u015fturacak, temel React projesini kuracak ve geli\u015ftirme sunucusunu ba\u015flatacakt\u0131r.<\/p>\n
Backend Kurulumu (GraphQL Sunucusu ve Prisma)<\/h3>\n
Backend projemizi ayr\u0131 bir dizinde olu\u015fturaca\u011f\u0131z. Bu dizin, GraphQL sunucumuzu ve Prisma konfig\u00fcrasyonlar\u0131m\u0131z\u0131 i\u00e7erecek.<\/p>\n
# Backend projesi olu\u015fturma\nmkdir recipe-app-backend\ncd recipe-app-backend\nnpm init -y\n\n
Gerekli paketleri y\u00fckleme<\/h2>\nnpm install express apollo-server-express graphql prisma @prisma\/client typescript ts-node nodemon dotenv\nnpm install --save-dev @types\/express @types\/graphql @types\/node\n\n
TypeScript yap\u0131land\u0131rmas\u0131<\/h2>\nnpx tsc --init<\/code><\/pre>\n
tsconfig.json<\/code> dosyas\u0131n\u0131 d\u00fczenleyerek outDir<\/code> ve rootDir<\/code> gibi ayarlar\u0131 yapabilirsiniz. \u00d6rne\u011fin:<\/p>\n
\/\/ tsconfig.json\n{\n  \"compilerOptions\": {\n    \"target\": \"es2016\",\n    \"module\": \"commonjs\",\n    \"outDir\": \".\/dist\",\n    \"rootDir\": \".\/src\",\n    \"strict\": true,\n    \"esModuleInterop\": true,\n    \"skipLibCheck\": true,\n    \"forceConsistentCasingInFileNames\": true\n  },\n  \"include\": [\"src\/<\/em>\/*.ts\"],\n  \"exclude\": [\"node_modules\"]\n}<\/code><\/pre>\n
\u015eimdi Prisma’y\u0131 projemize dahil edelim:<\/p>\n
npx prisma init --datasource-provider postgresql<\/code><\/pre>\n
Bu komut, prisma<\/code> dizini i\u00e7inde schema.prisma<\/code> dosyas\u0131n\u0131 ve .env<\/code> dosyas\u0131n\u0131 olu\u015fturacakt\u0131r. .env<\/code> dosyas\u0131na veritaban\u0131 ba\u011flant\u0131 URL’nizi eklemeniz gerekmektedir. \u00d6rne\u011fin:<\/p>\n
# .env\nDATABASE_URL=\"postgresql:\/\/user:password@localhost:5432\/recipe_db?schema=public\"<\/code><\/pre>\n
Veritaban\u0131 URL’nizi kendi veritaban\u0131 bilgilerinize g\u00f6re de\u011fi\u015ftirmeyi unutmay\u0131n. Yerel bir PostgreSQL veritaban\u0131 kullanabilir veya Render, Supabase gibi bulut servislerinden faydalanabilirsiniz.<\/p>\n
Veritaban\u0131 \u015eemas\u0131 Tan\u0131mlama (Prisma Schema)<\/h3>\n
prisma\/schema.prisma<\/code> dosyas\u0131n\u0131 a\u00e7arak yemek tarifi uygulamam\u0131z i\u00e7in temel modelleri tan\u0131mlayaca\u011f\u0131z. Recipe<\/code> (Tarif) ve Ingredient<\/code> (Malzeme) modelleri, bu uygulaman\u0131n \u00e7ekirde\u011fini olu\u015fturacakt\u0131r.<\/p>\n
\/\/ prisma\/schema.prisma\ngenerator client {\n  provider = \"prisma-client-js\"\n}\n\ndatasource db {\n  provider = \"postgresql\"\n  url      = env(\"DATABASE_URL\")\n}\n\nmodel Recipe {\n  id          String      @id @default(uuid())\n  title       String      @unique\n  description String?\n  instructions String\n  prepTime    Int?\n  cookTime    Int?\n  servings    Int?\n  category    String?\n  imageUrl    String?\n  createdAt   DateTime    @default(now())\n  updatedAt   DateTime    @updatedAt\n  ingredients Ingredient[] \/\/ Bir tarifin birden fazla malzemesi olabilir\n}\n\nmodel Ingredient {\n  id       String  @id @default(uuid())\n  name     String\n  quantity String? \/\/ \u00d6rne\u011fin: \"2 su barda\u011f\u0131\", \"yar\u0131m \u00e7ay ka\u015f\u0131\u011f\u0131\"\n  recipeId String\n  recipe   Recipe  @relation(fields: [recipeId], references: [id])\n}<\/code><\/pre>\n
Burada Recipe<\/code> modeli, bir yeme\u011fin temel bilgilerini i\u00e7erirken, Ingredient<\/code> modeli ise o yeme\u011fin malzemelerini tutar. Recipe<\/code> ve Ingredient<\/code> aras\u0131nda bire \u00e7ok (one-to-many) bir ili\u015fki tan\u0131mlad\u0131k: bir tarifin birden fazla malzemesi olabilir, ancak bir malzeme yaln\u0131zca tek bir tarife aittir. id<\/code> alanlar\u0131 i\u00e7in uuid()<\/code> kullanmak, benzersiz ve tahmin edilemez kimlikler sa\u011flar.<\/p>\n
Veritaban\u0131 Migrasyonlar\u0131<\/h3>\n
\u015eema tan\u0131mlad\u0131ktan sonra, bu \u015femay\u0131 veritaban\u0131m\u0131za uygulamam\u0131z gerekiyor. Prisma’n\u0131n migration arac\u0131 bu konuda bize yard\u0131mc\u0131 olur:<\/p>\n
npx prisma migrate dev --name init<\/code><\/pre>\n
Bu komut, Prisma \u015femas\u0131na g\u00f6re veritaban\u0131n\u0131zda tablolar\u0131 olu\u015fturacak ve prisma\/migrations<\/code> dizini alt\u0131na bir migration dosyas\u0131 ekleyecektir. \u0130lk migration’\u0131m\u0131z genellikle init<\/code> olarak adland\u0131r\u0131l\u0131r.<\/p>\n
GraphQL Sunucusu Olu\u015fturma<\/h2>\n
Backend projemizin src<\/code> dizini alt\u0131nda GraphQL sunucumuzu kuraca\u011f\u0131z. src\/index.ts<\/code> ana dosyam\u0131z olacak.<\/p>\n
GraphQL \u015eemas\u0131 Tan\u0131mlama (Type Definitions)<\/h3>\n
GraphQL \u015femas\u0131, API’mizin d\u0131\u015f d\u00fcnyaya hangi veri tiplerini ve hangi operasyonlar\u0131 (sorgular ve mutasyonlar) sundu\u011funu tan\u0131mlar. src\/schema.ts<\/code> dosyas\u0131nda bu tan\u0131mlar\u0131 yapaca\u011f\u0131z:<\/p>\n
\/\/ src\/schema.ts\nimport { gql } from 'apollo-server-express';\n\nexport const typeDefs = gql\n  type Recipe {\n    id: ID!\n    title: String!\n    description: String\n    instructions: String!\n    prepTime: Int\n    cookTime: Int\n    servings: Int\n    category: String\n    imageUrl: String\n    createdAt: String!\n    updatedAt: String!\n    ingredients: [Ingredient!]!\n  }\n\n  type Ingredient {\n    id: ID!\n    name: String!\n    quantity: String\n  }\n\n  input IngredientInput {\n    name: String!\n    quantity: String\n  }\n\n  input CreateRecipeInput {\n    title: String!\n    description: String\n    instructions: String!\n    prepTime: Int\n    cookTime: Int\n    servings: Int\n    category: String\n    imageUrl: String\n    ingredients: [IngredientInput!]!\n  }\n\n  input UpdateRecipeInput {\n    id: ID!\n    title: String\n    description: String\n    instructions: String\n    prepTime: Int\n    cookTime: Int\n    servings: Int\n    category: String\n    imageUrl: String\n    ingredients: [IngredientInput!]\n  }\n\n  type Query {\n    recipes: [Recipe!]!\n    recipe(id: ID!): Recipe\n  }\n\n  type Mutation {\n    createRecipe(input: CreateRecipeInput!): Recipe!\n    updateRecipe(input: UpdateRecipeInput!): Recipe!\n    deleteRecipe(id: ID!): Recipe!\n  }\n<\/code>;<\/code><\/pre>\n
Burada Recipe<\/code> ve Ingredient<\/code> tiplerini, Prisma modellerimizle uyumlu olacak \u015fekilde tan\u0131mlad\u0131k. Query<\/code> tipi, veri okuma operasyonlar\u0131n\u0131 (t\u00fcm tarifleri listeleme, tek bir tarifi getirme) i\u00e7erirken, Mutation<\/code> tipi veri yazma operasyonlar\u0131n\u0131 (yeni tarif olu\u015fturma, g\u00fcncelleme, silme) tan\u0131mlar. Input<\/code> tipleri ise mutasyonlara g\u00f6nderilecek verilerin yap\u0131s\u0131n\u0131 belirler.<\/p>\n
\u00c7\u00f6z\u00fcmleyiciler (Resolvers)<\/h3>\n
\u00c7\u00f6z\u00fcmleyiciler (Resolvers), GraphQL \u015femas\u0131ndaki her bir alan i\u00e7in ger\u00e7ek veriyi d\u00f6nd\u00fcrmekten sorumlu fonksiyonlard\u0131r. Bu fonksiyonlar, veritaban\u0131 ile etkile\u015fim kurmak i\u00e7in Prisma istemcisini kullan\u0131r. src\/resolvers.ts<\/code> dosyas\u0131nda \u00e7\u00f6z\u00fcmleyicilerimizi tan\u0131mlayal\u0131m:<\/p>\n
\/\/ src\/resolvers.ts\nimport { PrismaClient } from '@prisma\/client';\n\nconst prisma = new PrismaClient();\n\nexport const resolvers = {\n  Query: {\n    recipes: async () => {\n      return prisma.recipe.findMany({\n        include: {\n          ingredients: true, \/\/ Tariflerle birlikte malzemeleri de getir\n        },\n      });\n    },\n    recipe: async (_parent: any, { id }: { id: string }) => {\n      return prisma.recipe.findUnique({\n        where: { id },\n        include: {\n          ingredients: true,\n        },\n      });\n    },\n  },\n  Mutation: {\n    createRecipe: async (_parent: any, { input }: { input: any }) => {\n      const { ingredients, ...recipeData } = input;\n      return prisma.recipe.create({\n        data: {\n          ...recipeData,\n          ingredients: {\n            create: ingredients, \/\/ \u0130li\u015fkili malzemeleri de olu\u015ftur\n          },\n        },\n        include: {\n          ingredients: true,\n        },\n      });\n    },\n    updateRecipe: async (_parent: any, { input }: { input: any }) => {\n      const { id, ingredients, ...recipeData } = input;\n      \/\/ Mevcut malzemeleri silip yenilerini olu\u015fturmak veya g\u00fcncellemek daha karma\u015f\u0131k olabilir.\n      \/\/ Basitlik ad\u0131na, burada sadece tarifin kendisini g\u00fcncelleyelim.\n      \/\/ Malzemelerin g\u00fcncellenmesi i\u00e7in ayr\u0131 bir mutasyon veya daha detayl\u0131 bir mant\u0131k gerekebilir.\n      return prisma.recipe.update({\n        where: { id },\n        data: recipeData, \/\/ Sadece recipeData'y\u0131 g\u00fcncelliyoruz\n        include: {\n          ingredients: true,\n        },\n      });\n    },\n    deleteRecipe: async (_parent: any, { id }: { id: string }) => {\n      \/\/ \u0130li\u015fkili malzemeleri de silmek i\u00e7in CASCADE delete ayar\u0131 yap\u0131labilir\n      \/\/ veya \u00f6nce malzemeleri manuel olarak silmek gerekebilir.\n      await prisma.ingredient.deleteMany({\n        where: { recipeId: id },\n      });\n      return prisma.recipe.delete({\n        where: { id },\n      });\n    },\n  },\n};<\/code><\/pre>\n
\u00c7\u00f6z\u00fcmleyicilerimiz, prisma<\/code> istemcisini kullanarak veritaban\u0131 sorgular\u0131 yapar. findMany<\/code>, findUnique<\/code>, create<\/code>, update<\/code> ve delete<\/code> gibi Prisma y\u00f6ntemleri, veritaban\u0131 i\u015flemlerini kolayca ger\u00e7ekle\u015ftirmemizi sa\u011flar. \u00d6zellikle createRecipe<\/code> mutasyonunda, ingredients<\/code> alan\u0131 i\u00e7in create<\/code> anahtar kelimesini kullanarak, tek bir i\u015flemde hem tarifi hem de ili\u015fkili malzemeleri olu\u015fturabildi\u011fimize dikkat edin.<\/p>\n
Apollo Sunucusunu Ba\u015flatma<\/h3>\n
Son olarak, GraphQL \u015femam\u0131z\u0131 ve \u00e7\u00f6z\u00fcmleyicilerimizi bir araya getirerek Apollo Server’\u0131 ba\u015flataca\u011f\u0131z. src\/index.ts<\/code> dosyam\u0131z \u015f\u00f6yle g\u00f6r\u00fcnecek:<\/p>\n
\/\/ src\/index.ts\nimport 'dotenv\/config'; \/\/ .env dosyas\u0131n\u0131 y\u00fcklemek i\u00e7in\nimport express from 'express';\nimport { ApolloServer } from 'apollo-server-express';\nimport { typeDefs } from '.\/schema';\nimport { resolvers } from '.\/resolvers';\nimport { PrismaClient } from '@prisma\/client';\n\nconst prisma = new PrismaClient();\n\nasync function startApolloServer() {\n  const app = express();\n\n  const server = new ApolloServer({\n    typeDefs,\n    resolvers,\n    context: ({ req, res }) => ({\n      prisma, \/\/ Prisma istemcisini t\u00fcm \u00e7\u00f6z\u00fcmleyicilere eri\u015filebilir hale getir\n      \/\/ req, res \/\/ \u0130htiya\u00e7 duyulursa HTTP iste\u011fi ve yan\u0131t nesnelerine eri\u015fim\n    }),\n  });\n\n  await server.start();\n  server.applyMiddleware({ app, path: '\/graphql' });\n\n  const PORT = process.env.PORT || 4000;\n\n  app.listen(PORT, () => {\n    console.log(Server ready at http:\/\/localhost:${PORT}\/graphql<\/code>);\n  });\n}\n\nstartApolloServer();<\/code><\/pre>\n
Bu kod par\u00e7as\u0131, express<\/code> ile bir HTTP sunucusu olu\u015fturur, ApolloServer<\/code>‘\u0131 ba\u015flat\u0131r ve GraphQL endpoint’ini \/graphql<\/code> yolu \u00fczerinde yap\u0131land\u0131r\u0131r. context<\/code> \u00f6zelli\u011fi sayesinde prisma<\/code> istemcisini t\u00fcm \u00e7\u00f6z\u00fcmleyicilere kolayca iletebiliriz. dotenv\/config<\/code> ile .env<\/code> dosyas\u0131ndaki ortam de\u011fi\u015fkenlerinin y\u00fcklenmesini sa\u011fl\u0131yoruz.<\/p>\n
Backend projesini \u00e7al\u0131\u015ft\u0131rmak i\u00e7in package.json<\/code> dosyan\u0131za a\u015fa\u011f\u0131daki script’leri ekleyebilirsiniz:<\/p>\n
\/\/ package.json\n{\n  \"name\": \"recipe-app-backend\",\n  \"version\": \"1.0.0\",\n  \"main\": \"dist\/index.js\",\n  \"scripts\": {\n    \"build\": \"npx tsc\",\n    \"start\": \"node dist\/index.js\",\n    \"dev\": \"nodemon --exec ts-node src\/index.ts\"\n  },\n  \/\/ ... di\u011fer ba\u011f\u0131ml\u0131l\u0131klar\n}<\/code><\/pre>\n
\u015eimdi npm run dev<\/code> komutunu \u00e7al\u0131\u015ft\u0131rarak GraphQL sunucunuzu ba\u015flatabilirsiniz. http:\/\/localhost:4000\/graphql<\/code> adresine giderek GraphiQL aray\u00fcz\u00fcn\u00fc g\u00f6rebilir ve sorgular\u0131n\u0131z\u0131 test edebilirsiniz.<\/p>\n
React Frontend Entegrasyonu<\/h2>\n
Frontend uygulamam\u0131zda GraphQL API’mizle etkile\u015fim kurmak i\u00e7in Apollo Client’\u0131 kullanaca\u011f\u0131z.<\/p>\n
Apollo Client Kurulumu<\/h3>\n
React projemizin k\u00f6k dizininde (recipe-app-frontend) Apollo Client’\u0131 kural\u0131m:<\/p>\n
cd recipe-app-frontend\nnpm install @apollo\/client graphql<\/code><\/pre>\n
src\/main.tsx<\/code> veya src\/index.tsx<\/code> dosyas\u0131n\u0131 g\u00fcncelleyerek ApolloProvider<\/code> ile uygulamam\u0131z\u0131 sarmalayaca\u011f\u0131z:<\/p>\n
\/\/ src\/main.tsx (Vite i\u00e7in)\nimport React from 'react';\nimport ReactDOM from 'react-dom\/client';\nimport App from '.\/App.tsx';\nimport '.\/index.css';\n\nimport { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo\/client';\n\nconst client = new ApolloClient({\n  uri: 'http:\/\/localhost:4000\/graphql', \/\/ GraphQL sunucumuzun adresi\n  cache: new InMemoryCache(),\n});\n\nReactDOM.createRoot(document.getElementById('root')!).render(\n  \n    \n      \n    <\/ApolloProvider>\n  <\/React.StrictMode>,\n);<\/code><\/pre>\n
Bu yap\u0131land\u0131rma, App<\/code> bile\u015fenimiz ve alt bile\u015fenlerinin t\u00fcm\u00fcn\u00fcn Apollo Client’a eri\u015fmesini sa\u011flar.<\/p>\n
Veri \u00c7ekme (Queries)<\/h3>\n
GraphQL sorgular\u0131n\u0131 React bile\u015fenlerimizde kullanmak i\u00e7in @apollo\/client<\/code> k\u00fct\u00fcphanesinin useQuery<\/code> hook’unu kullanaca\u011f\u0131z. T\u00fcm tarifleri listeleyen bir RecipeList<\/code> bile\u015feni olu\u015ftural\u0131m:<\/p>\n
\/\/ src\/components\/RecipeList.tsx\nimport React from 'react';\nimport { useQuery, gql } from '@apollo\/client';\n\nconst GET_RECIPES = gql\n  query GetRecipes {\n    recipes {\n      id\n      title\n      description\n      imageUrl\n      prepTime\n      cookTime\n      servings\n    }\n  }\n<\/code>;\n\ninterface Recipe {\n  id: string;\n  title: string;\n  description?: string;\n  imageUrl?: string;\n  prepTime?: number;\n  cookTime?: number;\n  servings?: number;\n}\n\nfunction RecipeList() {\n  const { loading, error, data } = useQuery<{ recipes: Recipe[] }>(GET_RECIPES);\n\n  if (loading) return 
Y\u00fckleniyor...<\/p>;\n  if (error) return 
Hata: {error.message}<\/p>;\n\n  return (\n    
\n      
T\u00fcm Tarifler<\/h2>\n      
\n        {data?.recipes.map((recipe) => (\n          
\n            {recipe.imageUrl && {recipe.title}}\n            
{recipe.title}<\/h3>\n            
{recipe.description}<\/p>\n            {\/ Di\u011fer detaylar eklenebilir <\/em>\/}\n          <\/div>\n        ))}\n      <\/div>\n    <\/div>\n  );\n}\n\nexport default RecipeList;<\/code><\/pre>\n
useQuery<\/code> hook’u loading<\/code>, error<\/code> ve data<\/code> nesnelerini d\u00f6nd\u00fcr\u00fcr. Bu sayede uygulaman\u0131z\u0131n y\u00fcklenme, hata ve veri durumlar\u0131n\u0131 kolayca y\u00f6netebilirsiniz.<\/p>\n
Tek bir tarifi g\u00f6r\u00fcnt\u00fclemek i\u00e7in RecipeDetail<\/code> bile\u015fenini ve useQuery<\/code> hook’unu kullanabiliriz.<\/p>\n
\/\/ src\/components\/RecipeDetail.tsx\nimport React from 'react';\nimport { useQuery, gql } from '@apollo\/client';\nimport { useParams } from 'react-router-dom'; \/\/ React Router kullan\u0131yorsan\u0131z\n\nconst GET_RECIPE_BY_ID = gql\n  query GetRecipeById($id: ID!) {\n    recipe(id: $id) {\n      id\n      title\n      description\n      instructions\n      prepTime\n      cookTime\n      servings\n      category\n      imageUrl\n      ingredients {\n        id\n        name\n        quantity\n      }\n    }\n  }\n<\/code>;\n\ninterface Ingredient {\n  id: string;\n  name: string;\n  quantity?: string;\n}\n\ninterface RecipeDetailType {\n  id: string;\n  title: string;\n  description?: string;\n  instructions: string;\n  prepTime?: number;\n  cookTime?: number;\n  servings?: number;\n  category?: string;\n  imageUrl?: string;\n  ingredients: Ingredient[];\n}\n\nfunction RecipeDetail() {\n  const { id } = useParams<{ id: string }>(); \/\/ URL'den id'yi al\n  const { loading, error, data } = useQuery<{ recipe: RecipeDetailType }>(GET_RECIPE_BY_ID, {\n    variables: { id },\n  });\n\n  if (loading) return 
Tarif y\u00fckleniyor...<\/p>;\n  if (error) return 
Hata: {error.message}<\/p>;\n  if (!data?.recipe) return 
Tarif bulunamad\u0131.<\/p>;\n\n  const { recipe } = data;\n\n  return (\n    
\n      
{recipe.title}<\/h2>\n      {recipe.imageUrl && {recipe.title}}\n      
A\u00e7\u0131klama:<\/strong> {recipe.description}<\/p>\n      
Haz\u0131rl\u0131k S\u00fcresi:<\/strong> {recipe.prepTime ? ${recipe.prepTime} dk<\/code> : 'Belirtilmemi\u015f'}<\/p>\n      
Pi\u015firme S\u00fcresi:<\/strong> {recipe.cookTime ? ${recipe.cookTime} dk<\/code> : 'Belirtilmemi\u015f'}<\/p>\n      
Porsiyon:<\/strong> {recipe.servings || 'Belirtilmemi\u015f'}<\/p>\n      
Kategori:<\/strong> {recipe.category || 'Belirtilmemi\u015f'}<\/p>\n\n      
Malzemeler:<\/h3>\n      
    \n        {recipe.ingredients.map((ingredient) => (\n          
  • \n            {ingredient.quantity} {ingredient.name}\n          <\/li>\n        ))}\n      <\/ul>\n\n      
    Haz\u0131rlan\u0131\u015f\u0131:<\/h3>\n      
    {recipe.instructions}<\/p>\n    <\/div>\n  );\n}\n\nexport default RecipeDetail;<\/code><\/pre>\n
    Bu bile\u015fen, URL’den tarifin ID’sini al\u0131r ve bu ID ile GraphQL API’mizden ilgili tarifi \u00e7eker.<\/p>\n
    Veri G\u00f6nderme (Mutations)<\/h3>\n
    Yeni tarif ekleme veya mevcut tarifleri g\u00fcncelleme gibi i\u015flemler i\u00e7in useMutation<\/code> hook’unu kullanaca\u011f\u0131z. Bir RecipeForm<\/code> bile\u015feni olu\u015ftural\u0131m:<\/p>\n
    \/\/ src\/components\/RecipeForm.tsx\nimport React, { useState } from 'react';\nimport { useMutation, gql } from '@apollo\/client';\nimport { useNavigate } from 'react-router-dom';\n\nconst CREATE_RECIPE = gql\n  mutation CreateRecipe($input: CreateRecipeInput!) {\n    createRecipe(input: $input) {\n      id\n      title\n      description\n      imageUrl\n    }\n  }\n<\/code>;\n\nconst GET_RECIPES = gql\n  query GetRecipes {\n    recipes {\n      id\n      title\n      description\n      imageUrl\n    }\n  }\n<\/code>;\n\nfunction RecipeForm() {\n  const navigate = useNavigate();\n  const [formData, setFormData] = useState({\n    title: '',\n    description: '',\n    instructions: '',\n    prepTime: '',\n    cookTime: '',\n    servings: '',\n    category: '',\n    imageUrl: '',\n    ingredients: [{ name: '', quantity: '' }],\n  });\n\n  const [createRecipe, { loading, error }] = useMutation(CREATE_RECIPE, {\n    refetchQueries: [{ query: GET_RECIPES }], \/\/ Yeni tarif eklendi\u011finde liste g\u00fcncellensin\n    onCompleted: () => {\n      navigate('\/'); \/\/ Ba\u015far\u0131l\u0131 olursa ana sayfaya y\u00f6nlendir\n    },\n  });\n\n  const handleChange = (e: React.ChangeEvent) => {\n    const { name, value } = e.target;\n    setFormData((prev) => ({ ...prev, [name]: value }));\n  };\n\n  const handleIngredientChange = (index: number, e: React.ChangeEvent) => {\n    const { name, value } = e.target;\n    const newIngredients = [...formData.ingredients];\n    newIngredients[index] = { ...newIngredients[index], [name]: value };\n    setFormData((prev) => ({ ...prev, ingredients: newIngredients }));\n  };\n\n  const addIngredient = () => {\n    setFormData((prev) => ({\n      ...prev,\n      ingredients: [...prev.ingredients, { name: '', quantity: '' }],\n    }));\n  };\n\n  const removeIngredient = (index: number) => {\n    const newIngredients = formData.ingredients.filter((_, i) => i !== index);\n    setFormData((prev) => ({ ...prev, ingredients: newIngredients }));\n  };\n\n  const handleSubmit = async (e: React.FormEvent) => {\n    e.preventDefault();\n    try {\n      await createRecipe({\n        variables: {\n          input: {\n            ...formData,\n            prepTime: formData.prepTime ? parseInt(formData.prepTime) : null,\n            cookTime: formData.cookTime ? parseInt(formData.cookTime) : null,\n            servings: formData.servings ? parseInt(formData.servings) : null,\n            ingredients: formData.ingredients.filter(ing => ing.name.trim() !== ''),\n          },\n        },\n      });\n    } catch (err) {\n      console.error(\"Tarif olu\u015fturulurken hata olu\u015ftu:\", err);\n    }\n  };\n\n  return (\n    
    \n      
    Yeni Tarif Ekle<\/h2>\n      {error && 
    Hata: {error.message}<\/p>}\n\n