Modern web uygulamalar\u0131, kullan\u0131c\u0131lar\u0131na zengin ve dinamik deneyimler sunmak i\u00e7in s\u00fcrekli olarak daha verimli ve esnek veri al\u0131\u015fveri\u015fi y\u00f6ntemlerine ihtiya\u00e7 duyar. Bu ba\u011flamda, Facebook taraf\u0131ndan geli\u015ftirilen GraphQL, API geli\u015ftirmeye ve kullanmaya y\u00f6nelik devrim niteli\u011finde bir yakla\u015f\u0131m sunmaktad\u0131r. Geleneksel REST mimarisine k\u0131yasla daha g\u00fc\u00e7l\u00fc ve esnek bir alternatif olarak ortaya \u00e7\u0131kan GraphQL, \u00f6zellikle React gibi component tabanl\u0131 kullan\u0131c\u0131 aray\u00fcz\u00fc k\u00fct\u00fcphaneleriyle birle\u015fti\u011finde, geli\u015ftiricilere e\u015fsiz bir verimlilik ve kontrol sa\u011flar.<\/p>\n
Bu makalede, React uygulamalar\u0131n\u0131zda GraphQL’i nas\u0131l kullanaca\u011f\u0131n\u0131z\u0131, \u00f6zellikle de Apollo Client ekosistemini (React Apollo ve Apollo Boost’un modern kar\u015f\u0131l\u0131\u011f\u0131 olan GraphQL, API’ler i\u00e7in bir sorgulama dili ve \u00e7al\u0131\u015fma zaman\u0131 ortam\u0131d\u0131r. Geleneksel REST API’lerinin aksine, GraphQL ile istemci tam olarak hangi veriye ihtiyac\u0131 oldu\u011funu belirtebilir ve sunucu da sadece o veriyi d\u00f6nd\u00fcr\u00fcr. Bu, * Under-fetching:<\/strong> REST API’lerinde, tek bir endpoint \u00fczerinden istenen t\u00fcm veriler al\u0131namayabilir. \u00d6rne\u011fin, bir kullan\u0131c\u0131n\u0131n bilgilerini ve o kullan\u0131c\u0131n\u0131n t\u00fcm sipari\u015flerini almak i\u00e7in iki ayr\u0131 istek yapmak gerekebilir. GraphQL, tek bir endpoint \u00fczerinden, istemcinin belirtti\u011fi karma\u015f\u0131k veri yap\u0131lar\u0131n\u0131 sorgulama yetene\u011fi sunar. Bu, a\u011f isteklerinin say\u0131s\u0131n\u0131 azalt\u0131r, veri transferini optimize eder ve istemci taraf\u0131nda veri i\u015fleme mant\u0131\u011f\u0131n\u0131 basitle\u015ftirir. Ayr\u0131ca, g\u00fc\u00e7l\u00fc bir tip sistemi sayesinde API’nizin t\u00fcm yetenekleri ve veri yap\u0131s\u0131 net bir \u015fekilde tan\u0131mlan\u0131r, bu da istemci ve sunucu aras\u0131nda daha iyi bir ileti\u015fim ve hata ay\u0131klama deneyimi sa\u011flar.<\/p>\n React uygulamalar\u0131nda GraphQL ile etkile\u015fime girmek i\u00e7in bir\u00e7ok k\u00fct\u00fcphane bulunmaktad\u0131r. Bunlar aras\u0131nda en pop\u00fcler ve kapsaml\u0131 olan\u0131 Apollo Client’t\u0131r. Apollo Client, React uygulamalar\u0131nda GraphQL sorgular\u0131, mutasyonlar\u0131 ve aboneliklerini y\u00f6netmek i\u00e7in bir dizi ara\u00e7 ve \u00f6zellik sunar. \u00d6nbellekleme, durum y\u00f6netimi, hata y\u00f6netimi ve UI entegrasyonu gibi konularda geli\u015ftiricilere b\u00fcy\u00fck kolayl\u0131klar sa\u011flar.<\/p>\n Ba\u015flang\u0131\u00e7ta Apollo Client kurulumu i\u00e7in React uygulamalar\u0131nda GraphQL kullanmaya ba\u015flamadan \u00f6nce, GraphQL’in temel yap\u0131 ta\u015flar\u0131n\u0131 anlamak \u00f6nemlidir.<\/p>\n GraphQL’in kalbinde \u015fema ve tip sistemi bulunur. \u015eema, API’nizin hangi verileri sorgulayabilece\u011finizi, de\u011fi\u015ftirebilece\u011finizi ve hangi tiplere sahip olduklar\u0131n\u0131 tan\u0131mlayan bir s\u00f6zle\u015fmedir. Her GraphQL API’sinin bir \u015femas\u0131 vard\u0131r. Bu \u015fema, API’nin istemciye sundu\u011fu t\u00fcm veri tiplerini, alanlar\u0131n\u0131 ve operasyonlar\u0131n\u0131 belirtir.<\/p>\n * Object Types (Nesne Tipleri):<\/strong> Uygulaman\u0131zdaki veri nesnelerini temsil eder. \u00d6rne\u011fin, bir \u00d6rnek bir GraphQL \u015femas\u0131 tan\u0131m\u0131 (sunucu taraf\u0131nda):<\/p>\n Bu \u015fema, GraphQL’de veri okumak i\u00e7in sorgular kullan\u0131l\u0131r. \u0130stemci, sunucudan tam olarak hangi alanlara ihtiyac\u0131 oldu\u011funu belirterek bir sorgu g\u00f6nderir.<\/p>\n Bu sorgu, t\u00fcm \u00fcr\u00fcnlerin De\u011fi\u015fkenlerle sorgu yapmak:<\/p>\n Bu sorgu, Veri olu\u015fturmak, g\u00fcncellemek veya silmek i\u00e7in mutasyonlar kullan\u0131l\u0131r. Mutasyonlar, sorgulara benzer bir yap\u0131ya sahiptir ancak veri \u00fczerinde bir de\u011fi\u015fiklik yapma amac\u0131 ta\u015f\u0131rlar.<\/p>\n Bu mutasyon, yeni bir \u00fcr\u00fcn ekler ve eklenen \u00fcr\u00fcn\u00fcn GraphQL abonelikleri, istemcinin sunucudan ger\u00e7ek zamanl\u0131 g\u00fcncellemeler almas\u0131n\u0131 sa\u011flar. Bir olay meydana geldi\u011finde (\u00f6rne\u011fin, yeni bir mesaj g\u00f6nderildi\u011finde), sunucu istemciye veri g\u00f6nderir. Bu genellikle WebSocket ba\u011flant\u0131lar\u0131 \u00fczerinden ger\u00e7ekle\u015ftirilir.<\/p>\n Bu abonelik, her yeni \u00fcr\u00fcn eklendi\u011finde Apollo Client, GraphQL API’leri ile etkile\u015fim kurmak i\u00e7in kapsaml\u0131 bir istemci taraf\u0131 k\u00fct\u00fcphanesidir. React, Vue, Angular gibi \u00e7e\u015fitli UI k\u00fct\u00fcphaneleriyle entegre olabilir. Temel \u00f6zellikleri \u015funlard\u0131r:<\/p>\n * Veri \u00c7ekme ve Y\u00f6netimi:<\/strong> GraphQL sorgular\u0131n\u0131 ve mutasyonlar\u0131n\u0131 kolayca yapman\u0131z\u0131 sa\u011flar. Apollo Client, sadece bir veri \u00e7ekme k\u00fct\u00fcphanesi olman\u0131n \u00f6tesinde, uygulaman\u0131z\u0131n veri katman\u0131n\u0131 y\u00f6netmek i\u00e7in g\u00fc\u00e7l\u00fc bir \u00e7\u00f6z\u00fcm sunar.<\/p>\n Modern React uygulamalar\u0131nda Apollo Client kullanmak i\u00e7in * Node.js ve npm\/yarn kurulu olmal\u0131. React projenizin k\u00f6k dizininde a\u015fa\u011f\u0131daki komutu \u00e7al\u0131\u015ft\u0131rarak Uygulaman\u0131z\u0131n Bu kurulumla birlikte, React uygulaman\u0131z art\u0131k GraphQL API’nizle ileti\u015fim kurmaya haz\u0131r hale gelmi\u015ftir.<\/p>\n Apollo Client’\u0131n \u00dcr\u00fcnler y\u00fckleniyor...<\/p>;\n if (error) return Hata olu\u015ftu: {error.message}<\/p>;\n\n return (\n Fiyat: {product.price} TL<\/p>\n Kategori: {product.category?.name}<\/p>\n <\/div>\n ))}\n <\/div>\n );\n}\n\nexport default ProductsList;<\/code><\/pre>\n Bu \u00f6rnekte: Sorgulara dinamik de\u011ferler g\u00f6ndermek i\u00e7in \u00dcr\u00fcn detay\u0131 y\u00fckleniyor...<\/p>;\n if (error) return Hata olu\u015ftu: {error.message}<\/p>;\n if (!data.product) return \u00dcr\u00fcn bulunamad\u0131.<\/p>;\n\n const { product } = data;\n\n return (\n {product.description}<\/p>\n Fiyat: {product.price} TL<\/p>\n <\/div>\n );\n}\n\nexport default ProductDetail;<\/code><\/pre>\n Burada, Apollo Client, g\u00fc\u00e7l\u00fc bir \u00f6nbelle\u011fe alma mekanizmas\u0131na sahiptir. * @apollo\/client<\/code> paketi) derinlemesine inceleyece\u011fiz. GraphQL’in temel prensiplerinden ba\u015flayarak, bir React uygulamas\u0131nda veri sorgulama, de\u011fi\u015ftirme ve hatta ger\u00e7ek zamanl\u0131 g\u00fcncellemeler yapma s\u00fcre\u00e7lerini ad\u0131m ad\u0131m ele alaca\u011f\u0131z. Amac\u0131m\u0131z, bu g\u00fc\u00e7l\u00fc teknolojileri bir araya getirerek modern ve performansl\u0131 React uygulamalar\u0131 geli\u015ftirmek i\u00e7in sa\u011flam bir temel olu\u015fturmakt\u0131r.<\/p>\nGraphQL Nedir ve Neden \u00d6nemlidir?<\/h3>\n
under-fetching<\/code> (gere\u011finden az veri \u00e7ekme) ve over-fetching<\/code> (gere\u011finden fazla veri \u00e7ekme) gibi sorunlar\u0131 ortadan kald\u0131r\u0131r.<\/p>\n
\n* Over-fetching:<\/strong> Bir endpoint, istemcinin ihtiyac\u0131ndan daha fazla veri d\u00f6nd\u00fcrebilir. Bu durum, \u00f6zellikle mobil cihazlarda bant geni\u015fli\u011fi ve performans sorunlar\u0131na yol a\u00e7abilir.<\/p>\nApollo Client Ekosistemi<\/h3>\n
apollo-boost<\/code> ad\u0131nda bir paket mevcuttu. Bu paket, temel Apollo Client kurulumunu “s\u0131f\u0131r konfig\u00fcrasyon” yakla\u015f\u0131m\u0131yla basitle\u015ftirmeyi ama\u00e7l\u0131yordu. Ancak zamanla, Apollo Client’\u0131n ana paketi olan @apollo\/client<\/code>, bu kolayl\u0131klar\u0131 kendi i\u00e7ine entegre etti ve apollo-boost<\/code> paketi art\u0131k ayr\u0131 bir ba\u011f\u0131ml\u0131l\u0131k olarak kullan\u0131lmamaktad\u0131r. G\u00fcn\u00fcm\u00fczde, @apollo\/client<\/code> paketi hem temel Apollo Client i\u015flevselli\u011fini hem de basit kurulum kolayl\u0131klar\u0131n\u0131 tek bir \u00e7at\u0131 alt\u0131nda sunmaktad\u0131r. Bu makalede de g\u00fcncel yakla\u015f\u0131ma uygun olarak @apollo\/client<\/code> paketini kullanarak \u00f6rnekler verece\u011fiz.<\/p>\nGraphQL Temelleri<\/h2>\n
Schema (\u015eema) ve Type System (Tip Sistemi)<\/h3>\n
User<\/code> veya Product<\/code> tipi.
\n* Fields (Alanlar):<\/strong> Bir nesne tipinin sahip oldu\u011fu \u00f6zelliklerdir. \u00d6rne\u011fin, User<\/code> tipinin id<\/code>, name<\/code>, email<\/code> gibi alanlar\u0131 olabilir.
\n* Scalar Types (Skaler Tipler):<\/strong> Temel veri tipleridir (String, Int, Float, Boolean, ID).
\n* Enums (Numaraland\u0131rmalar):<\/strong> Belirli bir de\u011fer k\u00fcmesinden birini alabilen tiplerdir.
\n* Input Types (Girdi Tipleri):<\/strong> Mutasyonlara g\u00f6nderilen verilerin yap\u0131s\u0131n\u0131 tan\u0131mlamak i\u00e7in kullan\u0131l\u0131r.
\n* Interface (Aray\u00fcz) ve Union (Birle\u015fim):<\/strong> Polimorfik veri yap\u0131lar\u0131 olu\u015fturmak i\u00e7in kullan\u0131l\u0131r.<\/p>\ntype Product {\n id: ID!\n name: String!\n description: String\n price: Float!\n category: Category\n}\n\ntype Category {\n id: ID!\n name: String!\n products: [Product]\n}\n\ntype Query {\n products: [Product]\n product(id: ID!): Product\n categories: [Category]\n}\n\ntype Mutation {\n addProduct(name: String!, description: String, price: Float!, categoryId: ID!): Product\n updateProduct(id: ID!, name: String, description: String, price: Float, categoryId: ID): Product\n deleteProduct(id: ID!): Boolean\n}<\/code><\/pre>\nProduct<\/code> ve Category<\/code> ad\u0131nda iki nesne tipi, bu tiplerin alanlar\u0131 ve Query<\/code> ile Mutation<\/code> operasyonlar\u0131n\u0131n nas\u0131l yap\u0131laca\u011f\u0131n\u0131 tan\u0131mlar. Query<\/code> tipi veri okuma operasyonlar\u0131n\u0131, Mutation<\/code> tipi ise veri yazma (olu\u015fturma, g\u00fcncelleme, silme) operasyonlar\u0131n\u0131 temsil eder.<\/p>\nQuery (Sorgu)<\/h3>\n
query GetProductList {\n products {\n id\n name\n price\n category {\n name\n }\n }\n}<\/code><\/pre>\nid<\/code>, name<\/code>, price<\/code> alanlar\u0131n\u0131 ve ili\u015fkili kategorinin name<\/code> alan\u0131n\u0131 isteyecektir.<\/p>\nquery GetProductById($productId: ID!) {\n product(id: $productId) {\n id\n name\n description\n price\n }\n}<\/code><\/pre>\n$productId<\/code> de\u011fi\u015fkeni ile belirli bir \u00fcr\u00fcn\u00fc getirir. !<\/code> i\u015fareti, de\u011fi\u015fkenin zorunlu oldu\u011funu g\u00f6sterir.<\/p>\nMutation (De\u011fi\u015fiklik)<\/h3>\n
mutation AddNewProduct($name: String!, $description: String, $price: Float!, $categoryId: ID!) {\n addProduct(name: $name, description: $description, price: $price, categoryId: $categoryId) {\n id\n name\n price\n }\n}<\/code><\/pre>\nid<\/code>, name<\/code> ve price<\/code> alanlar\u0131n\u0131 d\u00f6nd\u00fcr\u00fcr.<\/p>\nSubscription (Abonelik)<\/h3>\n
subscription OnProductAdded {\n productAdded {\n id\n name\n price\n }\n}<\/code><\/pre>\nproductAdded<\/code> olay\u0131n\u0131 dinler ve eklenen \u00fcr\u00fcn\u00fcn bilgilerini al\u0131r.<\/p>\nApollo Client Nedir?<\/h2>\n
\n* \u00d6nbellekleme:<\/strong> \u00c7ekilen verileri otomatik olarak \u00f6nbelle\u011fe al\u0131r, b\u00f6ylece ayn\u0131 veriler i\u00e7in tekrar a\u011f iste\u011fi yap\u0131lmas\u0131na gerek kalmaz. Bu, uygulaman\u0131n performans\u0131n\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131r\u0131r.
\n* Durum Y\u00f6netimi:<\/strong> Uygulaman\u0131z\u0131n yerel durumunu GraphQL verileriyle birlikte y\u00f6netmenizi sa\u011flar.
\n* Hata Y\u00f6netimi:<\/strong> A\u011f ve GraphQL hatalar\u0131n\u0131 kolayca yakalaman\u0131z\u0131 ve i\u015flemenizi sa\u011flar.
\n* Ger\u00e7ek Zamanl\u0131 G\u00fcncellemeler:<\/strong> Abonelikler arac\u0131l\u0131\u011f\u0131yla ger\u00e7ek zamanl\u0131 veri ak\u0131\u015f\u0131n\u0131 destekler.
\n* UI Entegrasyonu:<\/strong> React gibi UI k\u00fct\u00fcphaneleri i\u00e7in \u00f6zel Hook’lar ve bile\u015fenler sunar, bu da veri ba\u011flamay\u0131 ve UI g\u00fcncellemelerini basitle\u015ftirir.<\/p>\nReact Apollo ve Apollo Boost Kurulumu<\/h2>\n
@apollo\/client<\/code> paketini kurman\u0131z yeterlidir. Bu paket, eski apollo-boost<\/code> paketinin t\u00fcm kolayl\u0131klar\u0131n\u0131 ve Apollo Client’\u0131n t\u00fcm g\u00fcc\u00fcn\u00fc birle\u015ftirir.<\/p>\nGereksinimler<\/h3>\n
\n* Yeni veya mevcut bir React projesi (Create React App veya Vite ile olu\u015fturulmu\u015f olabilir).<\/p>\nKurulum Ad\u0131mlar\u0131<\/h3>\n
@apollo\/client<\/code> ve graphql<\/code> paketlerini kurun:<\/p>\nnpm install @apollo\/client graphql\nveya<\/h2>\nyarn add @apollo\/client graphql<\/code><\/pre>\n
graphql<\/code> paketi, sorgular\u0131 ayr\u0131\u015ft\u0131rmak (parse etmek) i\u00e7in gereklidir.<\/p>\nApolloClient \u00d6rne\u011fi Olu\u015fturma<\/h3>\n
src\/index.js<\/code> veya src\/App.js<\/code> dosyas\u0131nda, bir ApolloClient<\/code> \u00f6rne\u011fi olu\u015fturman\u0131z gerekir. Bu \u00f6rnek, GraphQL sunucunuzun adresini ve \u00f6nbellekleme stratejilerini i\u00e7erecektir.<\/p>\n\/\/ src\/index.js veya src\/App.js\nimport React from 'react';\nimport ReactDOM from 'react-dom\/client';\nimport App from '.\/App';\nimport { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo\/client';\n\n\/\/ GraphQL sunucunuzun URI'sini belirtin\nconst client = new ApolloClient({\n uri: 'http:\/\/localhost:4000\/graphql', \/\/ Kendi GraphQL sunucu adresinizle de\u011fi\u015ftirin\n cache: new InMemoryCache(), \/\/ \u00d6nbellekleme i\u00e7in InMemoryCache kullan\u0131n\n});\n\nconst root = ReactDOM.createRoot(document.getElementById('root'));\nroot.render(\n ApolloProvider ile React Uygulamas\u0131na Entegrasyon<\/h3>\n
ApolloProvider<\/code> bile\u015feni, ApolloClient<\/code> \u00f6rne\u011fini React component a\u011fac\u0131na sa\u011flar. Bu sayede, alt\u0131ndaki t\u00fcm React bile\u015fenleri useQuery<\/code>, useMutation<\/code> ve useSubscription<\/code> gibi Apollo Hook’lar\u0131na eri\u015febilir. Uygulaman\u0131z\u0131n en \u00fcst seviyesinde (App<\/code> bile\u015feninin sarmalay\u0131c\u0131s\u0131 olarak) ApolloProvider<\/code>‘\u0131 kullanmak en yayg\u0131n yakla\u015f\u0131md\u0131r.<\/p>\nGraphQL Sorgular\u0131 Yapma (useQuery)<\/h2>\n
useQuery<\/code> Hook’u, React bile\u015fenlerinizden GraphQL sorgular\u0131 yapman\u0131n birincil yoludur. Bu Hook, sorgunun durumunu (y\u00fckleniyor, hata var, veri geldi) y\u00f6netir ve bile\u015feninizi otomatik olarak g\u00fcnceller.<\/p>\nuseQuery Hook’unun Kullan\u0131m\u0131<\/h3>\n
useQuery<\/code> Hook’u, bir GraphQL sorgu dizesi (template literal i\u00e7inde) al\u0131r ve bir nesne d\u00f6nd\u00fcr\u00fcr. Bu nesne genellikle \u00fc\u00e7 \u00f6nemli \u00f6zellik i\u00e7erir: loading<\/code>, error<\/code> ve data<\/code>.<\/p>\nimport React from 'react';\nimport { gql, useQuery } from '@apollo\/client';\n\n\/\/ GraphQL sorgusunu tan\u0131mlay\u0131n\nconst GET_PRODUCTS = gql\n query GetProducts {\n products {\n id\n name\n price\n category {\n name\n }\n }\n }\n<\/code>;\n\nfunction ProductsList() {\n const { loading, error, data } = useQuery(GET_PRODUCTS);\n\n if (loading) return \u00dcr\u00fcn Listesi<\/h2>\n {data.products.map(product => (\n
{product.name}<\/h3>\n
\n* GET_PRODUCTS<\/code> sabiti, gql<\/code> template literal etiketi kullan\u0131larak GraphQL sorgusunu tan\u0131mlar. Bu etiket, sorguyu ayr\u0131\u015ft\u0131r\u0131r ve Apollo Client’\u0131n anlayabilece\u011fi bir formata d\u00f6n\u00fc\u015ft\u00fcr\u00fcr.
\n* useQuery(GET_PRODUCTS)<\/code> \u00e7a\u011fr\u0131s\u0131, sorguyu yapar ve loading<\/code>, error<\/code>, data<\/code> durumlar\u0131n\u0131 d\u00f6nd\u00fcr\u00fcr.
\n* loading<\/code> do\u011fru oldu\u011funda, bir y\u00fckleme mesaj\u0131 g\u00f6sterilir.
\n* error<\/code> varsa, bir hata mesaj\u0131 g\u00f6sterilir.
\n* data<\/code> geldi\u011finde, \u00fcr\u00fcn listesi render edilir.<\/p>\nDe\u011fi\u015fkenlerle Sorgu Yapma<\/h3>\n
variables<\/code> se\u00e7ene\u011fini kullanabilirsiniz.<\/p>\nimport React from 'react';\nimport { gql, useQuery } from '@apollo\/client';\n\nconst GET_PRODUCT_BY_ID = gql\n query GetProductById($productId: ID!) {\n product(id: $productId) {\n id\n name\n description\n price\n }\n }\n<\/code>;\n\nfunction ProductDetail({ productId }) {\n const { loading, error, data } = useQuery(GET_PRODUCT_BY_ID, {\n variables: { productId }, \/\/ productId de\u011fi\u015fkenini g\u00f6nderiyoruz\n });\n\n if (loading) return {product.name}<\/h2>\n
productId<\/code> prop’u variables<\/code> nesnesi arac\u0131l\u0131\u011f\u0131yla GraphQL sorgusuna iletilir.<\/p>\nfetchPolicy ve \u00d6nbellekleme Stratejileri<\/h3>\n
useQuery<\/code> Hook’una fetchPolicy<\/code> se\u00e7ene\u011fini ileterek bu \u00f6nbelle\u011fin nas\u0131l kullan\u0131laca\u011f\u0131n\u0131 kontrol edebilirsiniz:<\/p>\ncache-first<\/code> (varsay\u0131lan): \u00d6nce \u00f6nbelle\u011fe bakar. Veri varsa onu d\u00f6nd\u00fcr\u00fcr. Yoksa a\u011f\u0131 kullan\u0131r ve sonucu \u00f6nbelle\u011fe al\u0131r.
\n* network-only<\/code>: \u00d6nbelle\u011fi tamamen atlar ve her zaman a\u011fdan veri \u00e7eker.
\n* cache-and-network<\/code>: \u00d6nce \u00f6nbellekten veriyi d\u00f6nd\u00fcr\u00fcr, ard\u0131ndan a\u011f\u0131 kullanarak g\u00fcncel veriyi \u00e7eker ve \u00f6nbelle\u011fi g\u00fcnceller.
\n* no-cache<\/code>: \u00d6nbelle\u011fi kullanmaz ve a\u011fdan gelen veriyi \u00f6nbelle\u011fe almaz.
\n* standby<\/code>: Sorguyu \u00e7al\u0131\u015ft\u0131rmaz, ancak di\u011fer sorgular taraf\u0131ndan tetiklenebilir.<\/p>\nconst { loading, error, data } = useQuery(GET_PRODUCTS, {\n fetchPolicy: 'network-only', \/\/ Her zaman a\u011fdan \u00e7ek\n});<\/code><\/pre>\nGraphQL Mutasyonlar\u0131 Yapma (useMutation)<\/h2>\n
useMutation<\/code> Hook’u, GraphQL API’nizde veri olu\u015fturmak, g\u00fcncellemek veya silmek i\u00e7in kullan\u0131l\u0131r. useQuery<\/code> gibi, loading<\/code>, error<\/code> durumlar\u0131n\u0131 ve mutasyonu tetikleyecek bir fonksiyonu d\u00f6nd\u00fcr\u00fcr.<\/p>\nuseMutation Hook’unun Kullan\u0131m\u0131<\/h3>\n
useMutation<\/code> Hook’u, bir GraphQL mutasyon dizesi al\u0131r ve bir dizi d\u00f6nd\u00fcr\u00fcr: ilk \u00f6\u011fe mutasyon fonksiyonu, ikinci \u00f6\u011fe ise mutasyonun durumunu i\u00e7eren bir nesnedir.<\/p>\nimport React, { useState } from 'react';\nimport { gql, useMutation } from '@apollo\/client';\n\nconst ADD_PRODUCT = gql\n mutation AddProduct($name: String!, $description: String, $price: Float!, $categoryId: ID!) {\n addProduct(name: $name, description: $description, price: $price, categoryId: $categoryId) {\n id\n name\n price\n }\n }\n<\/code>;\n\n\/\/ \u00dcr\u00fcn listesini g\u00fcncelleyebilmek i\u00e7in GET_PRODUCTS sorgusunu da alal\u0131m\nimport { GET_PRODUCTS } from '.\/ProductsList'; \/\/ ProductsList bile\u015feninde tan\u0131mlad\u0131\u011f\u0131m\u0131z sorgu\n\nfunction AddProductForm() {\n const [name, setName] = useState('');\n const [description, setDescription] = useState('');\n const [price, setPrice] = useState('');\n const [categoryId, setCategoryId] = useState('');\n\n const [addProduct, { loading, error }] = useMutation(ADD_PRODUCT, {\n \/\/ Mutasyon ba\u015far\u0131l\u0131 oldu\u011funda \u00f6nbelle\u011fi g\u00fcncelleme stratejisi\n update(cache, { data: { addProduct } }) {\n \/\/ \u00d6nbellekteki GET_PRODUCTS sorgusunun sonucunu oku\n const existingProducts = cache.readQuery({ query: GET_PRODUCTS });\n\n \/\/ Yeni \u00fcr\u00fcn\u00fc mevcut \u00fcr\u00fcn listesine ekle\n cache.writeQuery({\n query: GET_PRODUCTS,\n data: { products: [...existingProducts.products, addProduct] },\n });\n },\n \/\/ Veya daha basit: mutasyon sonras\u0131 belirli sorgular\u0131 yeniden \u00e7ek\n \/\/ refetchQueries: [{ query: GET_PRODUCTS }],\n });\n\n const handleSubmit = async (e) => {\n e.preventDefault();\n try {\n await addProduct({\n variables: {\n name,\n description,\n price: parseFloat(price),\n categoryId,\n },\n });\n alert('\u00dcr\u00fcn ba\u015far\u0131yla eklendi!');\n \/\/ Formu temizle\n setName('');\n setDescription('');\n setPrice('');\n setCategoryId('');\n } catch (err) {\n console.error(\"\u00dcr\u00fcn eklenirken hata olu\u015ftu:\", err);\n }\n };\n\n return (\n