\n React uygulaman\u0131zda AppSync WebSockets ve GraphQL abonelikleri kurarken kar\u015f\u0131la\u015ft\u0131\u011f\u0131n\u0131z zorluklar m\u0131 var? Ger\u00e7ek zamanl\u0131 veri ak\u0131\u015f\u0131n\u0131 sorunsuz bir \u015fekilde entegre etmek \u00e7o\u011fu zaman beklenenden daha karma\u015f\u0131k olabilir. Bu kapsaml\u0131 rehberle, AppSync WebSockets’lerle ge\u00e7irdi\u011fim 4 saatlik m\u00fccadeleyi geride b\u0131rak\u0131p, ad\u0131m ad\u0131m sorunsuz bir entegrasyonu nas\u0131l ba\u015faraca\u011f\u0131n\u0131z\u0131, yayg\u0131n hatalardan nas\u0131l ka\u00e7\u0131naca\u011f\u0131n\u0131z\u0131 ve uygulaman\u0131z\u0131 nas\u0131l g\u00fc\u00e7lendirece\u011finizi \u00f6\u011frenin.\n <\/p>\n
\n G\u00fcn\u00fcm\u00fcz\u00fcn modern web uygulamalar\u0131nda, kullan\u0131c\u0131lar\u0131n anl\u0131k etkile\u015fim bekledi\u011fi, verilerin ger\u00e7ek zamanl\u0131 olarak g\u00fcncellendi\u011fi senaryolar giderek daha \u00f6nemli hale geliyor. Sohbet uygulamalar\u0131ndan canl\u0131 spor skorlar\u0131na, hisse senedi takibinden \u00e7ok kullan\u0131c\u0131l\u0131 i\u015f birli\u011fi platformlar\u0131na kadar pek \u00e7ok alanda, sunucudan istemciye anl\u0131k veri ak\u0131\u015f\u0131 kritik bir ba\u015far\u0131 fakt\u00f6r\u00fcd\u00fcr. AWS AppSync, geli\u015ftiricilere GraphQL API’leri ve entegre ger\u00e7ek zamanl\u0131 aboneliklerle bu ihtiyac\u0131 kar\u015f\u0131lama s\u00f6z\u00fc verir. Ancak, bu g\u00fc\u00e7l\u00fc arac\u0131n t\u00fcm yeteneklerinden faydalanmaya \u00e7al\u0131\u015f\u0131rken, ba\u015flang\u0131\u00e7ta kar\u015f\u0131la\u015f\u0131lan karma\u015f\u0131kl\u0131klar \u00e7o\u011fu zaman geli\u015ftiricileri saatlerce s\u00fcren bir hata ay\u0131klama d\u00f6ng\u00fcs\u00fcne sokabilir. Benim de AppSync WebSockets ile tan\u0131\u015fmam tam olarak b\u00f6yle oldu; beklentilerim y\u00fcksekti, ancak ilk kurulum ve entegrasyon ad\u0131mlar\u0131 beklenmedik engellerle doluydu.\n <\/p>\n
\n \u00d6zellikle React gibi istemci taraf\u0131 k\u00fct\u00fcphaneleriyle AppSync’i bir araya getirirken, GraphQL istemcisinin (genellikle Apollo Client) do\u011fru yap\u0131land\u0131r\u0131lmas\u0131, kimlik do\u011frulama mekanizmalar\u0131n\u0131n y\u00f6netimi ve WebSockets ba\u011flant\u0131s\u0131n\u0131n ya\u015fam d\u00f6ng\u00fcs\u00fc, \u00e7o\u011fu zaman ba\u015f a\u011fr\u0131t\u0131c\u0131 detaylar bar\u0131nd\u0131r\u0131r. \u00d6rne\u011fin, ba\u011flant\u0131 kesintileri, yeniden ba\u011flanma stratejileri, yetkilendirme sorunlar\u0131 veya aboneliklerin beklenen verileri tetiklememesi gibi durumlar s\u0131k\u00e7a ya\u015fanabilir. Bu makale, tam da bu zorluklar\u0131 a\u015fman\u0131z i\u00e7in size yol g\u00f6sterecek. Amac\u0131m, benim ge\u00e7irdi\u011fim 4 saatlik karma\u015f\u0131k s\u00fcreci sizin i\u00e7in basitle\u015ftirmek ve AppSync’in ger\u00e7ek zamanl\u0131 potansiyelini React uygulaman\u0131za kolayca entegre etmenizi sa\u011flamakt\u0131r. B\u00f6ylece, kullan\u0131c\u0131lar\u0131n\u0131za kesintisiz ve dinamik bir deneyim sunabilirsiniz.\n <\/p>\n
\n Ger\u00e7ek zamanl\u0131 uygulamalar\u0131n gerektirdi\u011fi \u00f6l\u00e7eklenebilirlik ve d\u00fc\u015f\u00fck gecikme s\u00fcresi, AppSync gibi y\u00f6netilen bir hizmetin sundu\u011fu avantajlar\u0131 daha da belirginle\u015ftirir. Manuel WebSocket sunucular\u0131 kurmak ve y\u00f6netmek yerine, AppSync arka plandaki t\u00fcm bu karma\u015f\u0131kl\u0131\u011f\u0131 \u00fcstlenir. Ancak bu otomasyonun bir bedeli vard\u0131r: servisin \u00e7al\u0131\u015fma \u015feklini ve \u00f6zellikle de GraphQL aboneliklerini nas\u0131l ele ald\u0131\u011f\u0131n\u0131 anlamak esast\u0131r. Bu rehber boyunca, basit bir todo list uygulamas\u0131ndan, canl\u0131 bir sohbet uygulamas\u0131n\u0131n temel mekaniklerine kadar \u00e7e\u015fitli senaryolar\u0131 ele alarak, AppSync WebSockets’\u0131 tam anlam\u0131yla kavraman\u0131za yard\u0131mc\u0131 olaca\u011f\u0131m. Dolay\u0131s\u0131yla, bu konuya yeni ba\u015flayanlardan, mevcut bir projesinde AppSync entegrasyonunda zorlanan deneyimli geli\u015ftiricilere kadar herkes i\u00e7in de\u011ferli bilgiler bulacaks\u0131n\u0131z.\n <\/p>\n
\n Ger\u00e7ek zamanl\u0131 uygulamalar\u0131n kalbinde yatan temel mekanizmalardan biri GraphQL Abonelikleridir. Geleneksel HTTP tabanl\u0131 sorgu ve mutasyon modellerinde, istemci sunucuya bir istek g\u00f6nderir ve bir yan\u0131t al\u0131r. Ancak aboneliklerde durum farkl\u0131d\u0131r: istemci, sunucuya belirli bir veri de\u011fi\u015fikli\u011fini dinlemek istedi\u011fini bildirir ve ard\u0131ndan sunucu, o veri de\u011fi\u015fikli\u011fi her ger\u00e7ekle\u015fti\u011finde istemciye otomatik olarak bildirim g\u00f6nderir. Bu, s\u00fcrekli bir “\u00e7ekme” (polling) mekanizmas\u0131na ihtiya\u00e7 duymadan anl\u0131k veri ak\u0131\u015f\u0131 sa\u011flar. Genellikle bu s\u00fcrekli ba\u011flant\u0131, WebSockets protokol\u00fc arac\u0131l\u0131\u011f\u0131yla kurulur ve s\u00fcrd\u00fcr\u00fcl\u00fcr, \u00e7\u00fcnk\u00fc WebSockets hem sunucu hem de istemci aras\u0131nda \u00e7ift y\u00f6nl\u00fc, d\u00fc\u015f\u00fck gecikmeli bir ileti\u015fim kanal\u0131 sunar.\n <\/p>\n
\n AWS AppSync, bu GraphQL aboneliklerini AWS ekosistemi i\u00e7inde y\u00f6netmenizi sa\u011flayan tam y\u00f6netilen bir GraphQL hizmetidir. AppSync, veri kaynaklar\u0131n\u0131z\u0131 (DynamoDB, Lambda, Elasticsearch gibi) GraphQL \u015feman\u0131zla birle\u015ftirerek, istemcilerinizin tek bir API u\u00e7 noktas\u0131ndan t\u00fcm veriye eri\u015fmesini ve manip\u00fcle etmesini sa\u011flar. Abonelikler i\u00e7in AppSync, arkadaki WebSockets altyap\u0131s\u0131n\u0131 tamamen soyutlar; yani manuel olarak bir WebSocket sunucusu kurman\u0131za, ba\u011flant\u0131lar\u0131 y\u00f6netmenize veya \u00f6l\u00e7ekleme sorunlar\u0131yla u\u011fra\u015fman\u0131za gerek kalmaz. Sadece GraphQL \u015feman\u0131z\u0131 tan\u0131mlar, abonelikleri etkinle\u015ftirir ve AppSync gerisini halleder. Bu, \u00f6zellikle b\u00fcy\u00fck \u00f6l\u00e7ekli ve y\u00fcksek performans gerektiren ger\u00e7ek zamanl\u0131 uygulamalar geli\u015ftirenler i\u00e7in muazzam bir kolayl\u0131k sa\u011flar.\n <\/p>\n
\n Peki, AppSync bunu nas\u0131l ba\u015far\u0131yor? Temel olarak, bir istemci bir GraphQL aboneli\u011fi ba\u015flatt\u0131\u011f\u0131nda, AppSync bu iste\u011fi al\u0131r, istemci ile bir WebSocket ba\u011flant\u0131s\u0131 kurar ve aboneli\u011fin tetikleyece\u011fi olay\u0131 dinlemeye ba\u015flar. \u00d6rne\u011fin, bir DynamoDB tablosuna yeni bir \u00f6\u011fe eklendi\u011finde veya mevcut bir \u00f6\u011fe g\u00fcncellendi\u011finde, AppSync bu de\u011fi\u015fikli\u011fi alg\u0131lar ve abone olan t\u00fcm istemcilere ilgili verileri WebSocket \u00fczerinden an\u0131nda iletir. Bu mekanizma, olay odakl\u0131 mimarilerin temelini olu\u015fturur ve uygulaman\u0131z\u0131n \u00e7evik ve tepkisel olmas\u0131n\u0131 sa\u011flar. Do\u011fru yap\u0131land\u0131r\u0131ld\u0131\u011f\u0131nda, AppSync’in performans\u0131 ve \u00f6l\u00e7eklenebilirli\u011fi, milyonlarca e\u015fzamanl\u0131 ba\u011flant\u0131y\u0131 destekleyebilir, b\u00f6ylece uygulaman\u0131z\u0131n b\u00fcy\u00fcmesiyle ilgili endi\u015feleri ortadan kald\u0131r\u0131r. Bu nedenle, AppSync’in nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 anlamak, React uygulaman\u0131zda sorunsuz ger\u00e7ek zamanl\u0131 \u00f6zellikler sa\u011flaman\u0131n ilk ad\u0131m\u0131d\u0131r.\n <\/p>\n
\n React uygulaman\u0131zda AppSync GraphQL aboneliklerini kullanabilmek i\u00e7in \u00f6ncelikle AWS Amplify CLI ile bir AppSync API’si olu\u015fturman\u0131z ve ard\u0131ndan React projenizde gerekli k\u00fct\u00fcphaneleri yap\u0131land\u0131rman\u0131z gerekir. Bu ad\u0131mlar, AppSync’in g\u00fc\u00e7l\u00fc \u00f6zelliklerini uygulamalar\u0131n\u0131za entegre etmenin temelini olu\u015fturur. \u0130lk olarak, bir terminal a\u00e7\u0131n ve Amplify CLI’yi hen\u00fcz y\u00fcklemediyseniz global olarak kurun:\n <\/p>\n
\nnpm install -g @aws-amplify\/cli\n <\/pre>\n<\/code><\/p>\n
\n Ard\u0131ndan, mevcut React projenizin k\u00f6k dizininde veya yeni bir proje olu\u015fturarak Amplify'\u0131 ba\u015flat\u0131n:\n <\/p>\n
\namplify init\n <\/pre>\n<\/code><\/p>\n
\n Bu komut sizi bir dizi soruyla y\u00f6nlendirecek (proje ad\u0131, ortam, AWS profili vb.). Bu ad\u0131mlar\u0131 tamamlad\u0131ktan sonra projenize bir GraphQL API ekleyebilirsiniz:\n <\/p>\n
\namplify add api\n <\/pre>\n<\/code><\/p>\n
\n API type<\/code> olarak GraphQL<\/code>'i se\u00e7in ve Authorization type<\/code> i\u00e7in \u015fimdilik API key<\/code>'i tercih edebiliriz. Daha sonra \u015feman\u0131z\u0131 olu\u015fturman\u0131z istenecektir; Amplify size \u00f6rnek \u015femalar sunabilir veya s\u0131f\u0131rdan ba\u015flayabilirsiniz. Bu ad\u0131m, amplify push<\/code> komutuyla API'nizi AWS'ye da\u011f\u0131tman\u0131za olanak tan\u0131r.\n <\/p>\n\n API'niz da\u011f\u0131t\u0131ld\u0131ktan sonra, React projenize AppSync'i entegre etmek i\u00e7in gerekli AWS Amplify ve Apollo Client k\u00fct\u00fcphanelerini kurman\u0131z gerekir. Apollo Client, GraphQL API'leri ile etkile\u015fim kurmak i\u00e7in piyasadaki en pop\u00fcler ve esnek istemcilerden biridir ve AppSync aboneliklerini y\u00f6netmek i\u00e7in de harikad\u0131r. Y\u00fcklemeniz gereken temel paketler \u015funlard\u0131r:\n <\/p>\n
\nnpm install aws-amplify @aws-amplify\/ui-react @apollo\/client graphql aws-appsync-auth-link aws-appsync-subscription-link\n <\/pre>\n<\/code><\/p>\n
\n Kurulum tamamland\u0131\u011f\u0131nda, projenizin k\u00f6k dizininde otomatik olarak olu\u015fturulan src\/aws-exports.js<\/code> dosyas\u0131n\u0131 kullanarak Amplify ve Apollo Client'\u0131 yap\u0131land\u0131rman\u0131z gerekecek. Bu dosya, AppSync API'nizin u\u00e7 noktas\u0131, b\u00f6lgesi ve kimlik do\u011frulama detaylar\u0131 gibi \u00f6nemli yap\u0131land\u0131rma bilgilerini i\u00e7erir. \u0130\u015fte tipik bir index.js<\/code> veya App.js<\/code> dosyas\u0131nda bu yap\u0131land\u0131rman\u0131n nas\u0131l g\u00f6r\u00fcnece\u011fi:\n <\/p>\n\n import React from 'react';\n import ReactDOM from 'react-dom\/client';\n import App from '.\/App';\n import {\n Amplify\n } from 'aws-amplify';\n import config from '.\/aws-exports';\n import {\n ApolloProvider,\n ApolloClient,\n InMemoryCache,\n split,\n HttpLink\n } from '@apollo\/client';\n import {\n getMainDefinition\n } from '@apollo\/client\/utils';\n import {\n AuthLink\n } from 'aws-appsync-auth-link';\n import {\n createAuthLink\n } from 'aws-appsync-auth-link';\n import {\n createSubscriptionHandshakeLink\n } from 'aws-appsync-subscription-link';\n\n Amplify.configure(config);\n\n const httpLink = new HttpLink({\n uri: config.aws_appsync_graphqlEndpoint\n });\n\n const authLink = createAuthLink({\n url: config.aws_appsync_graphqlEndpoint,\n region: config.aws_appsync_region,\n auth: {\n type: config.aws_appsync_authenticationType,\n apiKey: config.aws_appsync_apiKey\n }\n });\n\n const link = split(\n ({\n query\n }) => {\n const definition = getMainDefinition(query);\n return (\n definition.kind === 'OperationDefinition' &&\n definition.operation === 'subscription'\n );\n },\n createSubscriptionHandshakeLink({\n region: config.aws_appsync_region,\n url: config.aws_appsync_graphqlEndpoint,\n auth: {\n type: config.aws_appsync_authenticationType,\n apiKey: config.aws_appsync_apiKey\n }\n }, authLink.concat(httpLink)),\n authLink.concat(httpLink)\n );\n\n const client = new ApolloClient({\n link,\n cache: new InMemoryCache()\n });\n\n const root = ReactDOM.createRoot(document.getElementById('root'));\n root.render(\n \n <\/code><\/p>\n
\n Bu yap\u0131land\u0131rma, HTTP tabanl\u0131 sorgular ve mutasyonlar i\u00e7in standart bir HttpLink<\/code> ve abonelikler i\u00e7in \u00f6zel bir SubscriptionHandshakeLink<\/code> olu\u015fturur. split<\/code> fonksiyonu, gelen GraphQL i\u015flemlerinin t\u00fcr\u00fcne g\u00f6re hangi linkin kullan\u0131laca\u011f\u0131n\u0131 belirler; bu sayede abonelikler WebSocket \u00fczerinden, di\u011fer i\u015flemler ise HTTP \u00fczerinden ger\u00e7ekle\u015fir. Bu kurulum, AppSync ile React aras\u0131nda g\u00fc\u00e7l\u00fc ve esnek bir k\u00f6pr\u00fc kurarak, ger\u00e7ek zamanl\u0131 veri ak\u0131\u015f\u0131n\u0131n \u00f6n\u00fcn\u00fc a\u00e7ar.\n <\/p>\nAppSync GraphQL \u015eeman\u0131z\u0131 Aboneliklere Uygun Hale Getirme Ad\u0131mlar\u0131 Nelerdir?<\/h3>\n
\n AppSync'in ger\u00e7ek zamanl\u0131 abonelik \u00f6zelliklerini kullanabilmek i\u00e7in GraphQL \u015feman\u0131z\u0131 do\u011fru bir \u015fekilde tan\u0131mlaman\u0131z b\u00fcy\u00fck \u00f6nem ta\u015f\u0131r. Amplify CLI ile bir AppSync API'si olu\u015fturdu\u011funuzda, \u015fema genellikle amplify\/backend\/api\/\/schema.graphql<\/code> yolunda bulunur. Bu \u015fema dosyas\u0131, veri modellerinizi, sorgular\u0131n\u0131z\u0131 (queries), mutasyonlar\u0131n\u0131z\u0131 (mutations) ve en \u00f6nemlisi aboneliklerinizi (subscriptions) i\u00e7erir. Abonelikleri etkinle\u015ftirmenin en kolay yolu, AWS Amplify'\u0131n \u00f6zel @aws_subscribe<\/code> direktifini kullanmakt\u0131r. Bu direktif, belirli bir mutasyonun tetikledi\u011fi de\u011fi\u015fikliklerin hangi abonelikler arac\u0131l\u0131\u011f\u0131yla yay\u0131nlanaca\u011f\u0131n\u0131 AppSync'e bildirir.\n <\/p>\n\n Bir \u00f6rnek \u00fczerinden gidelim: Basit bir mesajla\u015fma uygulamas\u0131 geli\u015ftirdi\u011fimizi varsayal\u0131m. Kullan\u0131c\u0131lar mesaj g\u00f6nderebilir ve yeni mesajlar\u0131 ger\u00e7ek zamanl\u0131 olarak alabilirler. Bunun i\u00e7in Message<\/code> ad\u0131nda bir model ve createMessage<\/code> mutasyonu tan\u0131mlayal\u0131m:\n <\/p>\n\ntype Message @model {\n id: ID!\n content: String!\n sender: String!\n timestamp: AWSDateTime!\n}\n\ntype Mutation {\n createMessage(content: String!, sender: String!): Message\n}\n\ntype Subscription {\n onCreateMessage: Message\n @aws_subscribe(mutations: [\"createMessage\"])\n}\n <\/pre>\n<\/code><\/p>\n
\n Yukar\u0131daki \u015femada, @model<\/code> direktifi DynamoDB tablosunu otomatik olarak olu\u015fturur ve CRUD (Create, Read, Update, Delete) operasyonlar\u0131 i\u00e7in standart sorgu ve mutasyonlar\u0131 sa\u011flar. Ancak, Subscription<\/code> tipi i\u00e7indeki onCreateMessage<\/code> alan\u0131 as\u0131l abonelik mekanizmas\u0131n\u0131 tan\u0131mlar. @aws_subscribe(mutations: [\"createMessage\"])<\/code> direktifi, createMessage<\/code> mutasyonu her \u00e7a\u011fr\u0131ld\u0131\u011f\u0131nda, onCreateMessage<\/code> aboneli\u011finin tetiklenece\u011fini AppSync'e bildirir. Bu, yeni bir mesaj olu\u015fturuldu\u011funda, bu aboneli\u011fi dinleyen t\u00fcm istemcilerin an\u0131nda yeni mesaj verilerini alaca\u011f\u0131 anlam\u0131na gelir.\n <\/p>\n\n AppSync, bu direktifleri yorumlayarak gerekli Resolver'lar\u0131 ve WebSocket altyap\u0131s\u0131n\u0131 otomatik olarak yap\u0131land\u0131r\u0131r. Yani, createMessage<\/code> mutasyonu bir DynamoDB tablosuna yeni bir \u00f6\u011fe ekledi\u011finde, AppSync bu olay\u0131 yakalar ve onCreateMessage<\/code> aboneli\u011fine abone olan t\u00fcm istemcilere veriyi iletir. Bu otomatik mekanizma, manuel olarak Resolver yazma veya olay tetikleyicileri (triggers) kurma y\u00fck\u00fcn\u00fc ortadan kald\u0131r\u0131r. Bu sayede, geli\u015ftiriciler daha \u00e7ok uygulaman\u0131n i\u015f mant\u0131\u011f\u0131na odaklanabilirler.\n <\/p>\n\n Daha karma\u015f\u0131k senaryolarda, belirli filtreleme veya yetkilendirme gerektiren abonelikler de tan\u0131mlayabilirsiniz. \u00d6rne\u011fin, yaln\u0131zca belirli bir sohbet odas\u0131na ait mesajlar\u0131 dinlemek i\u00e7in onCreateMessage(chatRoomId: ID!): Message<\/code> gibi bir abonelik tan\u0131mlayabilir ve @aws_subscribe<\/code> direktifine ek filtreleme parametreleri ekleyebilirsiniz. Bu, aboneliklerinizi daha gran\u00fcler hale getirmenize ve gereksiz veri trafi\u011fini azaltman\u0131za olanak tan\u0131r. \u015eeman\u0131z\u0131 g\u00fcncelledikten sonra, de\u011fi\u015fiklikleri AWS ortam\u0131n\u0131za da\u011f\u0131tmak i\u00e7in amplify push<\/code> komutunu \u00e7al\u0131\u015ft\u0131rmay\u0131 unutmay\u0131n. Bu ad\u0131m, AppSync API'nizin yeni abonelikleri tan\u0131mas\u0131n\u0131 ve bunlar\u0131 do\u011fru bir \u015fekilde i\u015flemesini sa\u011flar.\n <\/p>\nReact Bile\u015feninizde Ger\u00e7ek Zamanl\u0131 Verileri Nas\u0131l Dinlersiniz?<\/h2>\n
\n AppSync API'niz ve GraphQL \u015feman\u0131z abonelikler i\u00e7in haz\u0131r oldu\u011funda, React uygulaman\u0131zda ger\u00e7ek zamanl\u0131 verileri dinlemek i\u00e7in Apollo Client'\u0131n useSubscription<\/code> hook'unu kullanmak olduk\u00e7a basittir. Bu hook, React bile\u015fenlerinizin bir GraphQL aboneli\u011fine abone olmas\u0131n\u0131, gelen verileri i\u015flemesini ve kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fc (UI) otomatik olarak g\u00fcncellemesini sa\u011flar. \u00d6rnek olarak, \u00f6nceki b\u00f6l\u00fcmde tan\u0131mlad\u0131\u011f\u0131m\u0131z onCreateMessage<\/code> aboneli\u011fini kullanan basit bir mesaj listesi bile\u015feni olu\u015ftural\u0131m.\n <\/p>\n\n \u0130lk olarak, abonelik sorgunuzu tan\u0131mlaman\u0131z gerekir. Bu sorgu, AppSync'ten ne t\u00fcr verilerin gelmesini bekledi\u011finizi belirtir:\n <\/p>\n
\n\/\/ src\/graphql\/subscriptions.js veya bile\u015fen dosyan\u0131z\u0131n i\u00e7inde\nimport { gql } from '@apollo\/client';\n\nexport const ON_CREATE_MESSAGE = gqlsubscription OnCreateMessage {\n onCreateMessage {\n id\n content\n sender\n timestamp\n }\n }<\/code>;\n <\/pre>\n<\/code><\/p>\n
\n Bu sorgu, onCreateMessage<\/code> olay\u0131 tetiklendi\u011finde id<\/code>, content<\/code>, sender<\/code> ve timestamp<\/code> alanlar\u0131n\u0131 i\u00e7eren bir Message<\/code> objesi bekledi\u011fimizi belirtir. Ard\u0131ndan, bir React bile\u015feni i\u00e7inde useSubscription<\/code> hook'unu kullanarak bu aboneli\u011fi dinleyebiliriz:\n <\/p>\n\n import React, {\n useState,\n useEffect\n } from 'react';\n import {\n useSubscription\n } from '@apollo\/client';\n import {\n ON_CREATE_MESSAGE\n } from '..\/graphql\/subscriptions'; \/\/ Abonelik sorgunuzu import edin\n\n function MessageList() {\n const [messages, setMessages] = useState([]);\n\n \/\/ useSubscription hook'unu kullanarak aboneli\u011fi dinleyin\n const {\n data,\n loading,\n error\n } = useSubscription(ON_CREATE_MESSAGE, {\n onSubscriptionData: ({\n subscriptionData\n }) => {\n \/\/ Yeni gelen abonelik verilerini i\u015fleyin\n const newMessage = subscriptionData.data.onCreateMessage;\n if (newMessage) {\n setMessages((prevMessages) => [...prevMessages, newMessage]);\n }\n },\n });\n\n \/\/ \u0130sterseniz ilk y\u00fcklemede mevcut mesajlar\u0131 \u00e7ekmek i\u00e7in useQuery kullanabilirsiniz.\n \/\/ Bu \u00f6rnek sadece yeni mesajlar\u0131n nas\u0131l dinlendi\u011fini g\u00f6stermektedir.\n\n if (loading) return Mesajlar y\u00fckleniyor...<\/p>;\n if (error) return
Hata olu\u015ftu: {error.message}<\/p>;\n\n return (\n
\n Canl\u0131 Mesajlar<\/h3>\n \n {messages.map((message) => (\n - \n {message.sender}:<\/strong> {message.content} (\n {new Date(message.timestamp).toLocaleTimeString()}<\/small>)\n <\/li>\n ))}\n <\/ul>\n <\/div>\n );\n }\n\n export default MessageList;\n <\/pre>\n
<\/code><\/p>\n
\n Bu \u00f6rnekte, useSubscription<\/code> hook'u ON_CREATE_MESSAGE<\/code> sorgusu ile \u00e7a\u011fr\u0131l\u0131r. Hook'un d\u00f6nd\u00fcrd\u00fc\u011f\u00fc data<\/code>, loading<\/code> ve error<\/code> de\u011fi\u015fkenleri, aboneli\u011fin anl\u0131k durumunu yans\u0131t\u0131r. En kritik k\u0131s\u0131m, onSubscriptionData<\/code> geri \u00e7a\u011f\u0131rma (callback) fonksiyonudur. Bu fonksiyon, her yeni veri geldi\u011finde tetiklenir ve bize subscriptionData<\/code> objesini sunar. Biz de bu objeden onCreateMessage<\/code> alan\u0131na eri\u015ferek yeni mesaj\u0131 al\u0131r ve setMessages<\/code> state g\u00fcncelleyicisi ile mevcut mesaj listesine ekleriz. B\u00f6ylece, kullan\u0131c\u0131 aray\u00fcz\u00fc otomatik olarak yeni mesajla birlikte yeniden render edilir.\n <\/p>\n\n onSubscriptionData<\/code> kullanmak, Apollo Client'\u0131n kendi cache g\u00fcncelleme mekanizmalar\u0131ndan ba\u011f\u0131ms\u0131z olarak, abonelik verilerini do\u011frudan ele alman\u0131z\u0131 sa\u011flar. Bu \u00f6zellikle, mevcut listeye ekleme gibi basit UI g\u00fcncellemeleri i\u00e7in olduk\u00e7a etkilidir. Ayr\u0131ca, ba\u011flant\u0131 durumlar\u0131 ve hatalar\u0131 y\u00f6netmek i\u00e7in loading<\/code> ve error<\/code> de\u011fi\u015fkenlerini kullanabilirsiniz; bu, kullan\u0131c\u0131lara uygun geri bildirimler sunmak ve uygulaman\u0131z\u0131n daha sa\u011flam olmas\u0131n\u0131 sa\u011flamak i\u00e7in \u00f6nemlidir. Sonu\u00e7 olarak, useSubscription<\/code> hook'u, AppSync WebSockets ile ger\u00e7ek zamanl\u0131 veri ak\u0131\u015f\u0131n\u0131 React bile\u015fenlerinize entegre etmenin zarif ve g\u00fc\u00e7l\u00fc bir yoludur.\n <\/p>\n\nUzman \u0130pucu: Aboneliklerden gelen verileri mevcut sorgu sonu\u00e7lar\u0131n\u0131za eklemek i\u00e7in useSubscription<\/code> ile birlikte useQuery<\/code>'nin subscribeToMore<\/code> \u00f6zelli\u011fini kullanmak daha iyi bir yakla\u015f\u0131md\u0131r. Bu, Apollo Cache'inizi otomatik olarak g\u00fcncelleyerek veri tutarl\u0131l\u0131\u011f\u0131n\u0131 art\u0131r\u0131r ve tekrar eden veri \u00e7ekme i\u015flemlerini azalt\u0131r.<\/p>\n<\/blockquote>\nAppSync WebSockets Ba\u011flant\u0131lar\u0131n\u0131 Optimize Etmek ve Hata Ay\u0131klamak \u0130\u00e7in \u0130pu\u00e7lar\u0131 Nelerdir?<\/h3>\n
\n AppSync WebSockets ile \u00e7al\u0131\u015f\u0131rken, \u00f6zellikle production ortamlar\u0131nda, ba\u011flant\u0131 kesintileri, yeniden ba\u011flanma stratejileri ve kimlik do\u011frulama sorunlar\u0131 gibi yayg\u0131n zorluklarla kar\u015f\u0131la\u015fmak olas\u0131d\u0131r. Bu sorunlar\u0131 do\u011fru bir \u015fekilde y\u00f6netmek, uygulaman\u0131z\u0131n kararl\u0131l\u0131\u011f\u0131 ve kullan\u0131c\u0131 deneyimi i\u00e7in kritik \u00f6neme sahiptir. \u0130lk olarak, ba\u011flant\u0131 kesintileri ve yeniden ba\u011flanma stratejileri konusunda, Apollo Client genellikle bu t\u00fcr durumlar\u0131 otomatik olarak y\u00f6netir. Ancak, a\u011f ko\u015fullar\u0131na veya sunucu taraf\u0131ndaki de\u011fi\u015fikliklere ba\u011fl\u0131 olarak \u00f6zel durumlar\u0131 ele almak gerekebilir. \u00d6rne\u011fin, istemci taraf\u0131nda network ba\u011flant\u0131lar\u0131n\u0131 dinleyerek manuel olarak yeniden ba\u011flanma tetikleyicileri olu\u015fturabilirsiniz.\n <\/p>\n
\n Kimlik do\u011frulama mekanizmalar\u0131 AppSync'in \u00f6nemli bir par\u00e7as\u0131d\u0131r ve WebSockets ba\u011flant\u0131lar\u0131 \u00fczerinde de etkilidir. API Key, IAM, Amazon Cognito User Pools ve OIDC gibi \u00e7e\u015fitli y\u00f6ntemler aras\u0131ndan uygulaman\u0131z\u0131n g\u00fcvenlik gereksinimlerine en uygun olan\u0131 se\u00e7melisiniz. \u00d6zellikle Cognito User Pools veya IAM kullan\u0131rken, istemcinin kimlik do\u011frulama tokenlar\u0131n\u0131n ge\u00e7erli oldu\u011fundan ve s\u00fcrekli olarak yenilendi\u011finden emin olman\u0131z gerekir. Token s\u00fcresi dolarsa, WebSocket ba\u011flant\u0131s\u0131 kesilebilir ve manuel olarak yeniden kimlik do\u011frulama ve ba\u011flanma gerekebilir. AuthLink<\/code> ve SubscriptionHandshakeLink<\/code> yap\u0131land\u0131rmas\u0131nda do\u011fru kimlik do\u011frulama tipini ve token mekanizmas\u0131n\u0131 sa\u011flamak bu noktada hayati rol oynar.\n <\/p>\n\n Performans optimizasyonu a\u00e7\u0131s\u0131ndan, aboneliklerden gelen verileri i\u015flerken gereksiz render'lar\u0131 \u00f6nlemek \u00f6nemlidir. useSubscription<\/code> hook'unun onSubscriptionData<\/code> callback'i i\u00e7inde, yaln\u0131zca ger\u00e7ekten de\u011fi\u015fen veya eklenen verileri i\u015fledi\u011finizden emin olun. Ayr\u0131ca, \u00e7ok say\u0131da e\u015fzamanl\u0131 abonelik veya \u00e7ok s\u0131k veri ak\u0131\u015f\u0131 olan durumlarda, istemci taraf\u0131 \u00f6nbelle\u011fini (cache) etkili bir \u015fekilde kullanmak, UI g\u00fcncellemelerini optimize etmek ve gereksiz a\u011f trafi\u011fini azaltmak i\u00e7in \u00e7ok \u00f6nemlidir. AppSync'in kendi taraf\u0131nda ise, Resolver'lar\u0131n\u0131z\u0131n verimli \u00e7al\u0131\u015ft\u0131\u011f\u0131ndan ve DynamoDB gibi veri kaynaklar\u0131n\u0131z\u0131n do\u011fru bir \u015fekilde \u00f6l\u00e7eklendi\u011finden emin olmak, genel abonelik performans\u0131n\u0131 art\u0131racakt\u0131r.\n <\/p>\n\n Yayg\u0131n hatalardan baz\u0131lar\u0131 \u015funlard\u0131r:\n <\/p>\n
\n- \n Kimlik Do\u011frulama Hatalar\u0131:<\/strong> API anahtar\u0131n\u0131n s\u00fcresinin dolmas\u0131 veya Cognito tokenlar\u0131n\u0131n ge\u00e7erlili\u011fini yitirmesi. \u00c7\u00f6z\u00fcm:
aws-exports.js<\/code> dosyan\u0131zdaki kimlik do\u011frulama bilgilerini kontrol edin ve token yenileme mekanizmalar\u0131n\u0131 do\u011fru yap\u0131land\u0131r\u0131n.\n <\/li>\n- \n \u015eema Uyu\u015fmazl\u0131klar\u0131:<\/strong> \u0130stemci taraf\u0131ndaki abonelik sorgusu ile AppSync \u015femas\u0131ndaki abonelik tan\u0131m\u0131 aras\u0131nda bir uyu\u015fmazl\u0131k olmas\u0131. \u00c7\u00f6z\u00fcm: \u015eema dosyan\u0131z\u0131 ve istemci sorgunuzu dikkatlice kar\u015f\u0131la\u015ft\u0131r\u0131n.
amplify codegen<\/code> kullanarak otomatik olarak \u015fema t\u00fcrleri ve sorgular olu\u015fturmak bu t\u00fcr hatalar\u0131 azaltabilir.\n <\/li>\n- \n Ba\u011flant\u0131 Kesintileri:<\/strong> A\u011f sorunlar\u0131 veya arka plan AppSync hizmetindeki ge\u00e7ici sorunlar nedeniyle WebSocket ba\u011flant\u0131s\u0131n\u0131n kesilmesi. \u00c7\u00f6z\u00fcm: Apollo Client'\u0131n dahili yeniden ba\u011flanma mekanizmalar\u0131na g\u00fcvenin, ancak daha kritik durumlarda uygulama i\u00e7i bildirimler veya manuel yeniden deneme se\u00e7enekleri sunun.\n <\/li>\n<\/ul>\n
\n Bu ipu\u00e7lar\u0131, AppSync WebSockets entegrasyonunuzu daha sa\u011flam, performansl\u0131 ve hataya dayan\u0131kl\u0131 hale getirmenize yard\u0131mc\u0131 olacakt\u0131r. Unutmay\u0131n ki, iyi bir hata ay\u0131klama s\u00fcreci, taray\u0131c\u0131n\u0131z\u0131n geli\u015ftirici ara\u00e7lar\u0131ndaki a\u011f sekmesini kullanarak WebSocket ba\u011flant\u0131lar\u0131n\u0131 ve veri ak\u0131\u015f\u0131n\u0131 izlemekle ba\u015flar.\n <\/p>\n
Sonu\u00e7: AppSync WebSockets ile Ger\u00e7ek Zamanl\u0131 Geli\u015ftirme Art\u0131k Bir K\u00e2bus De\u011fil<\/h2>\n
\n AppSync WebSockets ve GraphQL abonelikleri, React uygulamalar\u0131n\u0131za ger\u00e7ek zamanl\u0131 yetenekler kazand\u0131rmak i\u00e7in g\u00fc\u00e7l\u00fc ve \u00f6l\u00e7eklenebilir bir yol sunar. \u0130lk ba\u015fta karma\u015f\u0131k ve zorlay\u0131c\u0131 gibi g\u00f6r\u00fcnse de, bu rehber boyunca \u00f6\u011frendi\u011fimiz ad\u0131mlar ve ipu\u00e7lar\u0131 sayesinde, AppSync'in vaat etti\u011fi sorunsuz ger\u00e7ek zamanl\u0131 deneyimi hayata ge\u00e7irmek art\u0131k \u00e7ok daha eri\u015filebilir hale geldi. AWS Amplify CLI ile API olu\u015fturmaktan, Apollo Client'\u0131 React projenize entegre etmeye, GraphQL \u015feman\u0131z\u0131 abonelikler i\u00e7in yap\u0131land\u0131rmaktan, React bile\u015fenlerinizde ger\u00e7ek zamanl\u0131 verileri dinlemeye ve hatta geli\u015fmi\u015f hata ay\u0131klama tekniklerine kadar t\u00fcm s\u00fcreci ele ald\u0131k.\n <\/p>\n
\n Bu yolculukta edindi\u011fimiz en \u00f6nemli ders, do\u011fru yap\u0131land\u0131rman\u0131n ve AppSync'in temel mekaniklerini anlaman\u0131n ne kadar kritik oldu\u011fudur. AppSync, WebSockets altyap\u0131s\u0131n\u0131 sizin i\u00e7in y\u00f6neterek geli\u015ftirme y\u00fck\u00fcn\u00fc azalt\u0131rken, ayn\u0131 zamanda GraphQL'in esnekli\u011fiyle veri ak\u0131\u015f\u0131n\u0131z\u0131 kontrol etme g\u00fcc\u00fc verir. Ger\u00e7ek d\u00fcnya senaryolar\u0131nda, bu yetenekler sayesinde kullan\u0131c\u0131lar\u0131n\u0131za anl\u0131k bildirimler, canl\u0131 sohbetler, ger\u00e7ek zamanl\u0131 analiz panolar\u0131 veya i\u015f birli\u011fi ara\u00e7lar\u0131 gibi interaktif ve dinamik deneyimler sunabilirsiniz. Art\u0131k 4 saatlik bir m\u00fccadele yerine, birka\u00e7 ad\u0131mda AppSync'in g\u00fcc\u00fcn\u00fc React projenize entegre edebilirsiniz.\n <\/p>\n
\n Gelecekte, AppSync'i daha da ileriye ta\u015f\u0131yarak, sunucusuz mimarilerle (Lambda fonksiyonlar\u0131 gibi) entegrasyonunu derinle\u015ftirebilir, karma\u015f\u0131k yetkilendirme kurallar\u0131n\u0131 uygulayabilir veya ger\u00e7ek zamanl\u0131 arama yetenekleri i\u00e7in Elasticsearch ile entegre edebilirsiniz. Potansiyel s\u0131n\u0131rs\u0131zd\u0131r ve bu rehberle edindi\u011finiz temel bilgiler, bu ileri d\u00fczey \u00f6zelliklerin kap\u0131lar\u0131n\u0131 aralayacakt\u0131r. Unutmay\u0131n, herhangi bir teknolojiyle m\u00fccadele ederken en iyi \u00f6\u011frenme y\u00f6ntemi, ad\u0131m ad\u0131m ilerlemek, k\u00fc\u00e7\u00fck denemeler yapmak ve kar\u015f\u0131la\u015f\u0131lan her hatadan ders \u00e7\u0131karmakt\u0131r. AppSync'in sundu\u011fu olanaklar\u0131 ke\u015ffetmeye devam edin ve uygulamalar\u0131n\u0131z\u0131 bir sonraki seviyeye ta\u015f\u0131y\u0131n.\n <\/p>\n
S\u0131k\u00e7a Sorulan Sorular<\/h3>\n\n- \n AppSync abonelikleri maliyetli midir?<\/strong><\/p>\n
\n AppSync'in fiyatland\u0131rmas\u0131, yapt\u0131\u011f\u0131n\u0131z GraphQL sorgular\u0131n\u0131n say\u0131s\u0131na, ger\u00e7ek zamanl\u0131 ba\u011flant\u0131 dakikalar\u0131na ve iletilen veri miktar\u0131na g\u00f6re belirlenir. Yo\u011fun ger\u00e7ek zamanl\u0131 uygulamalar i\u00e7in maliyetler artabilir, ancak genel olarak AppSync, y\u00f6netilen bir hizmet oldu\u011fu d\u00fc\u015f\u00fcn\u00fcld\u00fc\u011f\u00fcnde, kendi WebSocket altyap\u0131n\u0131z\u0131 kurup y\u00f6netmekten daha uygun maliyetli olabilir. Genellikle, ilk kullan\u0131mlar i\u00e7in \u00fccretsiz katman (free tier) mevcuttur. Detayl\u0131 maliyet tahmini i\u00e7in AWS AppSync fiyatland\u0131rma sayfas\u0131n\u0131 incelemek en do\u011frusudur.\n <\/p>\n<\/li>\n
- \n Farkl\u0131 kimlik do\u011frulama y\u00f6ntemleri nas\u0131l kullan\u0131l\u0131r?<\/strong><\/p>\n
\n AppSync, API Key, IAM, Amazon Cognito User Pools ve OpenID Connect (OIDC) olmak \u00fczere \u00e7e\u015fitli kimlik do\u011frulama y\u00f6ntemlerini destekler. Uygulaman\u0131z\u0131n g\u00fcvenlik gereksinimlerine g\u00f6re Amplify CLI ile API'nizi yap\u0131land\u0131r\u0131rken bu y\u00f6ntemlerden birini se\u00e7ebilirsiniz. \u00d6rne\u011fin, son kullan\u0131c\u0131lar\u0131n\u0131z\u0131 y\u00f6netmek i\u00e7in Cognito User Pools, AWS kaynaklar\u0131 aras\u0131nda g\u00fcvenli ileti\u015fim i\u00e7in IAM kullanabilirsiniz. createAuthLink<\/code> fonksiyonunu yap\u0131land\u0131r\u0131rken auth<\/code> objesi i\u00e7inde ilgili kimlik do\u011frulama tipini ve parametrelerini sa\u011flaman\u0131z yeterlidir.\n <\/p>\n<\/li>\n- \n Mobil uygulamalarda da AppSync abonelikleri kullan\u0131labilir mi?<\/strong><\/p>\n
\n Evet, kesinlikle! AWS Amplify SDK's\u0131 React Native, iOS ve Android gibi mobil platformlar i\u00e7in de mevcuttur. Bu sayede, ayn\u0131 AppSync API'nizi ve GraphQL \u015feman\u0131z\u0131 kullanarak mobil uygulamalar\u0131n\u0131za ger\u00e7ek zamanl\u0131 abonelik \u00f6zelliklerini kolayca entegre edebilirsiniz. Temel prensipler ve yap\u0131land\u0131rma ad\u0131mlar\u0131 React web uygulamalar\u0131na olduk\u00e7a benzerdir. Mobil uyumluluk, AppSync'in temel tasar\u0131m hedeflerinden biridir.\n <\/p>\n<\/li>\n
- \n Abonelikler neden bazen \u00e7al\u0131\u015fm\u0131yor gibi g\u00f6r\u00fcn\u00fcyor?<\/strong><\/p>\n
\n Aboneliklerin \u00e7al\u0131\u015fmama nedenleri genellikle kimlik do\u011frulama sorunlar\u0131, \u015fema uyu\u015fmazl\u0131klar\u0131 veya a\u011f ba\u011flant\u0131s\u0131 kesintilerinden kaynaklan\u0131r. Taray\u0131c\u0131n\u0131z\u0131n geli\u015ftirici ara\u00e7lar\u0131nda \"Network\" sekmesini kontrol ederek WebSocket ba\u011flant\u0131s\u0131n\u0131n kurulup kurulmad\u0131\u011f\u0131n\u0131 ve hatalar\u0131n olup olmad\u0131\u011f\u0131n\u0131 g\u00f6zlemleyin. Ayr\u0131ca, AppSync konsolundaki API g\u00fcnl\u00fcklerini (logs) kontrol etmek, Resolver hatalar\u0131n\u0131 veya yetkilendirme sorunlar\u0131n\u0131 belirlemenize yard\u0131mc\u0131 olabilir. \u0130stemci taraf\u0131ndaki abonelik sorgusunun, AppSync \u015femas\u0131nda tan\u0131mlanan abonelikle birebir e\u015fle\u015fti\u011finden emin olun.\n <\/p>\n<\/li>\n
- \n AppSync yerine ba\u015fka se\u00e7enekler var m\u0131?<\/strong><\/p>\n
\n Evet, AppSync'e alternatif olarak ba\u015fka ger\u00e7ek zamanl\u0131 GraphQL \u00e7\u00f6z\u00fcmleri de bulunmaktad\u0131r. \u00d6rne\u011fin, Hasura<\/a>, mevcut veritabanlar\u0131n\u0131z \u00fczerine ger\u00e7ek zamanl\u0131 GraphQL API'leri olu\u015fturman\u0131za olanak tan\u0131r. Kendi WebSocket sunucunuzu kurup y\u00f6netmek isterseniz, Socket.IO<\/a> veya GraphQL Yoga<\/a> gibi k\u00fct\u00fcphanelerle \u00f6zel \u00e7\u00f6z\u00fcmler geli\u015ftirebilirsiniz. Ancak, AppSync'in ana avantaj\u0131, t\u00fcm altyap\u0131y\u0131 y\u00f6netmesi ve AWS ekosistemiyle derin entegrasyonu sayesinde b\u00fcy\u00fck \u00f6l\u00e7ekli ve kurumsal uygulamalar i\u00e7in sa\u011flam bir temel sunmas\u0131d\u0131r.\n <\/p>\n<\/li>\n<\/ol>\n<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"React uygulaman\u0131zda AppSync WebSockets ve GraphQL abonelikleri kurarken kar\u015f\u0131la\u015ft\u0131\u011f\u0131n\u0131z zorluklar m\u0131 var? Ger\u00e7ek zamanl\u0131 veri ak\u0131\u015f\u0131n\u0131 sorunsuz bir…","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[128],"tags":[],"class_list":{"0":"post-33889","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-react","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\n
AppSync WebSockets ile React Uygulamalar\u0131nda Ger\u00e7ek Zamanl\u0131 GraphQL Abonelikleri<\/title>\n<meta name=\"description\" content=\"React uygulaman\u0131zda AppSync WebSockets ve GraphQL abonelikleri kurarken kar\u015f\u0131la\u015ft\u0131\u011f\u0131n\u0131z zorluklar m\u0131 var? Ger\u00e7ek zamanl\u0131 veri ak\u0131\u015f\u0131n\u0131 sorunsuz bir \u015fekilde entegre etmek \u00e7o\u011fu zaman beklenenden daha karma\u015f\u0131k olabilir. Bu kapsaml\u0131 rehberle, AppSync WebSockets'lerle ge\u00e7irdi\u011fim 4 saatlik m\u00fccadeleyi geride b\u0131rak\u0131p, ad\u0131m ad\u0131m sorunsuz bir entegrasyonu nas\u0131l ba\u015faraca\u011f\u0131n\u0131z\u0131, yayg\u0131n hatalardan nas\u0131l ka\u00e7\u0131naca\u011f\u0131n\u0131z\u0131 ve uygulaman\u0131z\u0131 nas\u0131l g\u00fc\u00e7lendirece\u011finizi \u00f6\u011frenin.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/appsync-websockets-ile-react-uygulamalarinda-gercek-zamanli-graphql-abonelikleri\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"AppSync WebSockets ile React Uygulamalar\u0131nda Ger\u00e7ek Zamanl\u0131 GraphQL Abonelikleri\" \/>\n<meta property=\"og:description\" content=\"React uygulaman\u0131zda AppSync WebSockets ve GraphQL abonelikleri kurarken kar\u015f\u0131la\u015ft\u0131\u011f\u0131n\u0131z zorluklar m\u0131 var? Ger\u00e7ek zamanl\u0131 veri ak\u0131\u015f\u0131n\u0131 sorunsuz bir \u015fekilde entegre etmek \u00e7o\u011fu zaman beklenenden daha karma\u015f\u0131k olabilir. Bu kapsaml\u0131 rehberle, AppSync WebSockets'lerle ge\u00e7irdi\u011fim 4 saatlik m\u00fccadeleyi geride b\u0131rak\u0131p, ad\u0131m ad\u0131m sorunsuz bir entegrasyonu nas\u0131l ba\u015faraca\u011f\u0131n\u0131z\u0131, yayg\u0131n hatalardan nas\u0131l ka\u00e7\u0131naca\u011f\u0131n\u0131z\u0131 ve uygulaman\u0131z\u0131 nas\u0131l g\u00fc\u00e7lendirece\u011finizi \u00f6\u011frenin.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/appsync-websockets-ile-react-uygulamalarinda-gercek-zamanli-graphql-abonelikleri\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-11-08T09:30:56+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"19 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/appsync-websockets-ile-react-uygulamalarinda-gercek-zamanli-graphql-abonelikleri\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/appsync-websockets-ile-react-uygulamalarinda-gercek-zamanli-graphql-abonelikleri\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"AppSync WebSockets ile React Uygulamalar\u0131nda Ger\u00e7ek Zamanl\u0131 GraphQL Abonelikleri\",\"datePublished\":\"2025-11-08T09:30:56+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/appsync-websockets-ile-react-uygulamalarinda-gercek-zamanli-graphql-abonelikleri\/\"},\"wordCount\":3419,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"React\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/appsync-websockets-ile-react-uygulamalarinda-gercek-zamanli-graphql-abonelikleri\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/appsync-websockets-ile-react-uygulamalarinda-gercek-zamanli-graphql-abonelikleri\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/appsync-websockets-ile-react-uygulamalarinda-gercek-zamanli-graphql-abonelikleri\/\",\"name\":\"AppSync WebSockets ile React Uygulamalar\u0131nda Ger\u00e7ek Zamanl\u0131 GraphQL Abonelikleri\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-11-08T09:30:56+00:00\",\"description\":\"React uygulaman\u0131zda AppSync WebSockets ve GraphQL abonelikleri kurarken kar\u015f\u0131la\u015ft\u0131\u011f\u0131n\u0131z zorluklar m\u0131 var? Ger\u00e7ek zamanl\u0131 veri ak\u0131\u015f\u0131n\u0131 sorunsuz bir \u015fekilde entegre etmek \u00e7o\u011fu zaman beklenenden daha karma\u015f\u0131k olabilir. Bu kapsaml\u0131 rehberle, AppSync WebSockets'lerle ge\u00e7irdi\u011fim 4 saatlik m\u00fccadeleyi geride b\u0131rak\u0131p, ad\u0131m ad\u0131m sorunsuz bir entegrasyonu nas\u0131l ba\u015faraca\u011f\u0131n\u0131z\u0131, yayg\u0131n hatalardan nas\u0131l ka\u00e7\u0131naca\u011f\u0131n\u0131z\u0131 ve uygulaman\u0131z\u0131 nas\u0131l g\u00fc\u00e7lendirece\u011finizi \u00f6\u011frenin.\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/appsync-websockets-ile-react-uygulamalarinda-gercek-zamanli-graphql-abonelikleri\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/appsync-websockets-ile-react-uygulamalarinda-gercek-zamanli-graphql-abonelikleri\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/appsync-websockets-ile-react-uygulamalarinda-gercek-zamanli-graphql-abonelikleri\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"AppSync WebSockets ile React Uygulamalar\u0131nda Ger\u00e7ek Zamanl\u0131 GraphQL Abonelikleri\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"AppSync WebSockets ile React Uygulamalar\u0131nda Ger\u00e7ek Zamanl\u0131 GraphQL Abonelikleri","description":"React uygulaman\u0131zda AppSync WebSockets ve GraphQL abonelikleri kurarken kar\u015f\u0131la\u015ft\u0131\u011f\u0131n\u0131z zorluklar m\u0131 var? Ger\u00e7ek zamanl\u0131 veri ak\u0131\u015f\u0131n\u0131 sorunsuz bir \u015fekilde entegre etmek \u00e7o\u011fu zaman beklenenden daha karma\u015f\u0131k olabilir. Bu kapsaml\u0131 rehberle, AppSync WebSockets'lerle ge\u00e7irdi\u011fim 4 saatlik m\u00fccadeleyi geride b\u0131rak\u0131p, ad\u0131m ad\u0131m sorunsuz bir entegrasyonu nas\u0131l ba\u015faraca\u011f\u0131n\u0131z\u0131, yayg\u0131n hatalardan nas\u0131l ka\u00e7\u0131naca\u011f\u0131n\u0131z\u0131 ve uygulaman\u0131z\u0131 nas\u0131l g\u00fc\u00e7lendirece\u011finizi \u00f6\u011frenin.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/appsync-websockets-ile-react-uygulamalarinda-gercek-zamanli-graphql-abonelikleri\/","og_locale":"tr_TR","og_type":"article","og_title":"AppSync WebSockets ile React Uygulamalar\u0131nda Ger\u00e7ek Zamanl\u0131 GraphQL Abonelikleri","og_description":"React uygulaman\u0131zda AppSync WebSockets ve GraphQL abonelikleri kurarken kar\u015f\u0131la\u015ft\u0131\u011f\u0131n\u0131z zorluklar m\u0131 var? Ger\u00e7ek zamanl\u0131 veri ak\u0131\u015f\u0131n\u0131 sorunsuz bir \u015fekilde entegre etmek \u00e7o\u011fu zaman beklenenden daha karma\u015f\u0131k olabilir. Bu kapsaml\u0131 rehberle, AppSync WebSockets'lerle ge\u00e7irdi\u011fim 4 saatlik m\u00fccadeleyi geride b\u0131rak\u0131p, ad\u0131m ad\u0131m sorunsuz bir entegrasyonu nas\u0131l ba\u015faraca\u011f\u0131n\u0131z\u0131, yayg\u0131n hatalardan nas\u0131l ka\u00e7\u0131naca\u011f\u0131n\u0131z\u0131 ve uygulaman\u0131z\u0131 nas\u0131l g\u00fc\u00e7lendirece\u011finizi \u00f6\u011frenin.","og_url":"https:\/\/fatihsoysal.com\/blog\/appsync-websockets-ile-react-uygulamalarinda-gercek-zamanli-graphql-abonelikleri\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-11-08T09:30:56+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"19 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/appsync-websockets-ile-react-uygulamalarinda-gercek-zamanli-graphql-abonelikleri\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/appsync-websockets-ile-react-uygulamalarinda-gercek-zamanli-graphql-abonelikleri\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"AppSync WebSockets ile React Uygulamalar\u0131nda Ger\u00e7ek Zamanl\u0131 GraphQL Abonelikleri","datePublished":"2025-11-08T09:30:56+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/appsync-websockets-ile-react-uygulamalarinda-gercek-zamanli-graphql-abonelikleri\/"},"wordCount":3419,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["React"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/appsync-websockets-ile-react-uygulamalarinda-gercek-zamanli-graphql-abonelikleri\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/appsync-websockets-ile-react-uygulamalarinda-gercek-zamanli-graphql-abonelikleri\/","url":"https:\/\/fatihsoysal.com\/blog\/appsync-websockets-ile-react-uygulamalarinda-gercek-zamanli-graphql-abonelikleri\/","name":"AppSync WebSockets ile React Uygulamalar\u0131nda Ger\u00e7ek Zamanl\u0131 GraphQL Abonelikleri","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-11-08T09:30:56+00:00","description":"React uygulaman\u0131zda AppSync WebSockets ve GraphQL abonelikleri kurarken kar\u015f\u0131la\u015ft\u0131\u011f\u0131n\u0131z zorluklar m\u0131 var? Ger\u00e7ek zamanl\u0131 veri ak\u0131\u015f\u0131n\u0131 sorunsuz bir \u015fekilde entegre etmek \u00e7o\u011fu zaman beklenenden daha karma\u015f\u0131k olabilir. Bu kapsaml\u0131 rehberle, AppSync WebSockets'lerle ge\u00e7irdi\u011fim 4 saatlik m\u00fccadeleyi geride b\u0131rak\u0131p, ad\u0131m ad\u0131m sorunsuz bir entegrasyonu nas\u0131l ba\u015faraca\u011f\u0131n\u0131z\u0131, yayg\u0131n hatalardan nas\u0131l ka\u00e7\u0131naca\u011f\u0131n\u0131z\u0131 ve uygulaman\u0131z\u0131 nas\u0131l g\u00fc\u00e7lendirece\u011finizi \u00f6\u011frenin.","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/appsync-websockets-ile-react-uygulamalarinda-gercek-zamanli-graphql-abonelikleri\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/appsync-websockets-ile-react-uygulamalarinda-gercek-zamanli-graphql-abonelikleri\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/appsync-websockets-ile-react-uygulamalarinda-gercek-zamanli-graphql-abonelikleri\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"AppSync WebSockets ile React Uygulamalar\u0131nda Ger\u00e7ek Zamanl\u0131 GraphQL Abonelikleri"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/33889","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=33889"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/33889\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=33889"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=33889"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=33889"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}