Modern yaz\u0131l\u0131m geli\u015ftirme, \u00f6zellikle mikroservisler ve da\u011f\u0131t\u0131k mimariler \u00e7a\u011f\u0131nda, karma\u015f\u0131kl\u0131\u011f\u0131 y\u00f6netmek ve hata oran\u0131n\u0131 en aza indirmek giderek daha kritik bir hal al\u0131yor. Bir tarafta h\u0131zla de\u011fi\u015fen kullan\u0131c\u0131 talepleri, di\u011fer tarafta b\u00fcy\u00fcyen ve birbirinden farkl\u0131 teknolojilerle in\u015fa edilmi\u015f bir\u00e7ok servis… Bu senaryoda frontend ve backend ekipleri aras\u0131nda net bir ileti\u015fim ve anla\u015fma olmadan ilerlemek, adeta g\u00f6zleri kapal\u0131 bir may\u0131n tarlas\u0131nda y\u00fcr\u00fcmek gibidir. Peki ya bu s\u00fcre\u00e7te en \u00e7ok kar\u015f\u0131la\u015f\u0131lan sorunlardan biri olan “kontrat uyumsuzluklar\u0131n\u0131” nas\u0131l ortadan kald\u0131rabiliriz? Monorepo ve BFF (Backend-for-Frontend) mimarilerinin sundu\u011fu avantajlar\u0131 kullanarak, geli\u015ftirme s\u00fcre\u00e7lerinizi nas\u0131l daha g\u00fcvenli, h\u0131zl\u0131 ve i\u015fbirlik\u00e7i hale getirebiliriz? \u0130\u015fte bu rehber, monorepo ve BFF mimarilerinde TypeScript tiplerini etkili bir \u015fekilde payla\u015farak geli\u015ftirme s\u00fcrecinizi nas\u0131l h\u0131zland\u0131raca\u011f\u0131n\u0131z\u0131 ve hata oran\u0131n\u0131 d\u00fc\u015f\u00fcrece\u011finizi ke\u015ffetmenizi sa\u011flayacak.<\/p>\n
Tip g\u00fcvenli\u011fi, g\u00fcn\u00fcm\u00fcz yaz\u0131l\u0131m d\u00fcnyas\u0131nda \u00fczerinde en \u00e7ok durulan konulardan biridir. \u00d6zellikle JavaScript ekosisteminde, \u00e7al\u0131\u015fma zaman\u0131 hatalar\u0131n\u0131n b\u00fcy\u00fck bir k\u0131sm\u0131 tip uyumsuzluklar\u0131ndan kaynaklan\u0131r. TypeScript, bu problemi derleme an\u0131nda yakalayarak bize \u00f6nemli bir g\u00fcvence sunar. Ancak, projeler b\u00fcy\u00fcd\u00fck\u00e7e ve farkl\u0131 servisler aras\u0131nda veri al\u0131\u015fveri\u015fi artt\u0131k\u00e7a, bu tipleri y\u00f6netmek ve t\u00fcm ekosistemde tutarl\u0131l\u0131\u011f\u0131 sa\u011flamak ba\u015fl\u0131 ba\u015f\u0131na bir meydan okumaya d\u00f6n\u00fc\u015f\u00fcr. \u00d6rne\u011fin, bir frontend uygulamas\u0131 bir API’den kullan\u0131c\u0131 verisi beklerken, backend bu veriyi farkl\u0131 bir formatta g\u00f6nderebilir. Bu t\u00fcr senaryolar, hem geli\u015ftirme s\u00fcresini uzat\u0131r hem de potansiyel hatalara zemin haz\u0131rlar. Monorepo yap\u0131lar\u0131, birden fazla projenin tek bir depoda bar\u0131nd\u0131r\u0131lmas\u0131yla bu tip y\u00f6netimi i\u00e7in ideal bir ortam sunarken, BFF ise frontend’e \u00f6zel API katman\u0131 olu\u015fturarak veri d\u00f6n\u00fc\u015f\u00fcmlerini daha kontroll\u00fc hale getirir. Bu iki g\u00fc\u00e7l\u00fc mimariyi TypeScript ile birle\u015ftirdi\u011fimizde, tam anlam\u0131yla tip g\u00fcvenli ve verimli bir geli\u015ftirme ortam\u0131 in\u015fa edebiliriz.<\/p>\n
Bu makale boyunca, \u00f6ncelikle monorepo ve BFF gibi temel kavramlar\u0131 ele alacak, ard\u0131ndan payla\u015f\u0131lan tiplerin olmamas\u0131 durumunda kar\u015f\u0131la\u015f\u0131lan ger\u00e7ek d\u00fcnya sorunlar\u0131na odaklanaca\u011f\u0131z. Uygulamal\u0131 \u00f6rnekler ve ad\u0131m ad\u0131m y\u00f6nergelerle, TypeScript tiplerini monorepo i\u00e7inde nas\u0131l olu\u015fturup payla\u015faca\u011f\u0131m\u0131z\u0131 g\u00f6sterecek, BFF mimarilerinde API kontratlar\u0131n\u0131 nas\u0131l g\u00fcvence alt\u0131na alabilece\u011fimizi inceleyece\u011fiz. Son olarak, daha deneyimli geli\u015ftiriciler i\u00e7in ileri d\u00fczey teknikler ve ipu\u00e7lar\u0131yla, tip payla\u015f\u0131m\u0131 stratejinizi bir sonraki seviyeye ta\u015f\u0131yacak bilgiler sunaca\u011f\u0131z. Amac\u0131m\u0131z, t\u00fcm ekibinizin ortak bir dil ve tutarl\u0131 bir veri yap\u0131s\u0131 \u00fczerinde \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flayarak, yaz\u0131l\u0131m projelerinizdeki g\u00fcvenli\u011fi, h\u0131z\u0131 ve i\u015fbirli\u011fini maksimize etmektir. Haz\u0131rsan\u0131z, bu heyecan verici yolculu\u011fa ba\u015flayal\u0131m ve TypeScript tiplerini payla\u015fman\u0131n inceliklerini ke\u015ffedelim.<\/p>\n
Herhangi bir teknik konuya dalmadan \u00f6nce, temel ta\u015flar\u0131 sa\u011flam bir \u015fekilde oturtmak \u00f6nemlidir. Bu b\u00f6l\u00fcmde, “Monorepo”, “BFF (Backend-for-Frontend)” ve “TypeScript Tipleri” kavramlar\u0131n\u0131 detayl\u0131 bir \u015fekilde ele alaca\u011f\u0131z. Bu kavramlar, makalemizin ana eksenini olu\u015fturdu\u011fu i\u00e7in, onlar\u0131 tam olarak anlamak, ileriye d\u00f6n\u00fck stratejileri kavramak ad\u0131na b\u00fcy\u00fck \u00f6nem ta\u015f\u0131maktad\u0131r.<\/p>\n
Monorepo Nedir? Neden Kullan\u0131l\u0131r?<\/strong><\/p>\n Monorepo, “tek bir depo” anlam\u0131na gelir ve bir\u00e7ok ba\u011f\u0131ms\u0131z projenin (uygulama, k\u00fct\u00fcphane, servis vb.) ayn\u0131 s\u00fcr\u00fcm kontrol deposunda (\u00f6rne\u011fin Git deposu) bar\u0131nd\u0131r\u0131ld\u0131\u011f\u0131 bir yaz\u0131l\u0131m geli\u015ftirme stratejisidir. Bu yakla\u015f\u0131m\u0131n aksine, “polyrepo” ise her projenin kendi ayr\u0131 deposuna sahip oldu\u011fu geleneksel bir yakla\u015f\u0131md\u0131r. Monorepo kullanman\u0131n bir\u00e7ok \u00f6nemli avantaj\u0131 bulunmaktad\u0131r. \u00d6ncelikle, kod tekrar\u0131n\u0131 b\u00fcy\u00fck \u00f6l\u00e7\u00fcde azalt\u0131r. Payla\u015f\u0131lan k\u00fct\u00fcphaneler veya tipler, tek bir merkezden y\u00f6netilerek t\u00fcm projelere kolayca entegre edilebilir. Bu, \u00f6zellikle b\u00fcy\u00fck ekiplerde ve birden fazla uygulaman\u0131n oldu\u011fu senaryolarda geli\u015ftirme h\u0131z\u0131n\u0131 art\u0131r\u0131r ve bak\u0131m maliyetlerini d\u00fc\u015f\u00fcr\u00fcr. Ayr\u0131ca, ba\u011f\u0131ml\u0131l\u0131k y\u00f6netimini basitle\u015ftirir; t\u00fcm projeler ayn\u0131 depoda oldu\u011fu i\u00e7in, ba\u011f\u0131ml\u0131l\u0131k versiyonlar\u0131n\u0131 senkronize etmek ve g\u00fcncel tutmak daha kolayd\u0131r. B\u00fcy\u00fck \u00e7apl\u0131 refactoring operasyonlar\u0131 da monorepo’larda daha g\u00fcvenli bir \u015fekilde yap\u0131labilir, \u00e7\u00fcnk\u00fc bir de\u011fi\u015fiklik yap\u0131ld\u0131\u011f\u0131nda etkilenen t\u00fcm projeler tek bir yerde g\u00f6r\u00fclebilir ve test edilebilir. Google, Facebook, Microsoft gibi teknoloji devlerinin de monorepo kulland\u0131\u011f\u0131n\u0131 d\u00fc\u015f\u00fcn\u00fcrsek, bu yakla\u015f\u0131m\u0131n \u00f6l\u00e7eklenebilirlik ve verimlilik a\u00e7\u0131s\u0131ndan sa\u011flad\u0131\u011f\u0131 faydalar daha iyi anla\u015f\u0131lacakt\u0131r.<\/p>\n Ancak monorepo’nun baz\u0131 zorluklar\u0131 da vard\u0131r. Deponun zamanla \u00e7ok b\u00fcy\u00fcmesi, klonlama ve indirme s\u00fcrelerini uzatabilir. Build ve test s\u00fcre\u00e7lerinin y\u00f6netimi, \u00f6zel ara\u00e7lar (Lerna, Nx, Yarn Workspaces gibi) gerektirebilir. Dolay\u0131s\u0131yla, monorepo’ya ge\u00e7i\u015f karar\u0131 verilirken projenin \u00f6l\u00e7e\u011fi, ekibin b\u00fcy\u00fckl\u00fc\u011f\u00fc ve y\u00f6netim ara\u00e7lar\u0131n\u0131n kullan\u0131m\u0131 gibi fakt\u00f6rler dikkatlice de\u011ferlendirilmelidir.<\/p>\n BFF (Backend-for-Frontend) Nedir? Amac\u0131 Nedir?<\/strong><\/p>\n BFF, “Backend-for-Frontend” teriminin k\u0131saltmas\u0131d\u0131r ve mikroservis mimarisinde s\u0131k\u00e7a kar\u015f\u0131la\u015f\u0131lan bir tasar\u0131m kal\u0131b\u0131d\u0131r. Temelinde, her frontend uygulamas\u0131n\u0131n (\u00f6rne\u011fin, web, mobil iOS, mobil Android) kendi optimize edilmi\u015f ve \u00f6zelle\u015ftirilmi\u015f backend’ine sahip olmas\u0131 fikri yatar. Geleneksel yakla\u015f\u0131mlarda, birden fazla frontend uygulamas\u0131n\u0131n tek bir genel API’yi kullanmas\u0131, \u00e7e\u015fitli sorunlara yol a\u00e7abilir. \u00d6rne\u011fin, mobil uygulama i\u00e7in farkl\u0131 bir veri format\u0131 veya daha az bilgi gerekebilirken, web uygulamas\u0131 daha zengin ve detayl\u0131 veri setlerine ihtiya\u00e7 duyabilir. Bu durumda, tek bir API her iki frontend’in de ihtiya\u00e7lar\u0131n\u0131 tam olarak kar\u015f\u0131layamaz ve frontend’ler ya gereksiz veri \u00e7eker ya da veri d\u00f6n\u00fc\u015f\u00fcmlerini kendi taraf\u0131nda yapmak zorunda kal\u0131r.<\/p>\n BFF, bu sorunu \u00e7\u00f6zerek her frontend’in spesifik gereksinimlerine g\u00f6re veri toplama, d\u00f6n\u00fc\u015ft\u00fcrme ve optimize etme yetene\u011fi sunar. Bir BFF servisi genellikle \u015fu i\u015flevleri yerine getirir:<\/p>\n BFF, frontend geli\u015ftiricilerine daha fazla kontrol ve esneklik sa\u011flarken, ana backend servislerinin daha genel ve i\u015f alan\u0131na odaklanmas\u0131n\u0131 m\u00fcmk\u00fcn k\u0131lar. Bu da hem frontend hem de backend ekiplerinin daha h\u0131zl\u0131 ve ba\u011f\u0131ms\u0131z \u00e7al\u0131\u015fmas\u0131na olanak tan\u0131r. \u00d6zellikle karma\u015f\u0131k kullan\u0131c\u0131 aray\u00fczleri ve farkl\u0131 platformlara hizmet veren uygulamalar i\u00e7in BFF mimarisi olduk\u00e7a de\u011ferli bir \u00e7\u00f6z\u00fcm sunar.<\/p>\n TypeScript Tipleri: Neden Vazge\u00e7ilmez?<\/strong><\/p>\n TypeScript, Microsoft taraf\u0131ndan geli\u015ftirilen ve JavaScript’e opsiyonel statik tip sistemi ekleyen a\u00e7\u0131k kaynakl\u0131 bir programlama dilidir. Asl\u0131nda JavaScript’in bir “\u00fcst k\u00fcmesidir” (superset), yani ge\u00e7erli t\u00fcm JavaScript kodlar\u0131 ayn\u0131 zamanda ge\u00e7erli TypeScript kodudur. TypeScript’in en b\u00fcy\u00fck vaadi, geli\u015ftirme s\u0131ras\u0131nda (derleme an\u0131nda) tip hatalar\u0131n\u0131 yakalamakt\u0131r. Bu, \u00e7al\u0131\u015fma zaman\u0131nda ortaya \u00e7\u0131kabilecek beklenmedik hatalar\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde azalt\u0131r ve uygulaman\u0131n genel g\u00fcvenilirli\u011fini art\u0131r\u0131r.<\/p>\n TypeScript ile de\u011fi\u015fkenler, fonksiyon parametreleri ve d\u00f6n\u00fc\u015f de\u011ferleri, nesne yap\u0131lar\u0131 (interface’ler, type alias’lar) gibi t\u00fcm kod \u00f6\u011felerine tipler tan\u0131mlayabilirsiniz. \u00d6rne\u011fin, bir fonksiyonun sadece say\u0131 bekledi\u011fini veya bir nesnenin belirli alanlara sahip olmas\u0131 gerekti\u011fini belirtmek, hem kodun okunabilirli\u011fini art\u0131r\u0131r hem de geli\u015ftiricilerin hatal\u0131 veri giri\u015flerini yapmas\u0131n\u0131 engeller. IDE’ler (\u00f6rne\u011fin VS Code), TypeScript sayesinde geli\u015ftiricilere zengin otomatik tamamlama, an\u0131nda hata bildirimleri ve kod gezinme gibi \u00f6zellikler sunarak geli\u015ftirici deneyimini bir \u00fcst seviyeye ta\u015f\u0131r. \u00d6zellikle b\u00fcy\u00fck ve karma\u015f\u0131k projelerde, farkl\u0131 ekiplerin birbiriyle entegre olmas\u0131 gereken durumlarda, TypeScript tipleri adeta ortak bir dil g\u00f6revi g\u00f6rerek entegrasyon s\u00fcre\u00e7lerini basitle\u015ftirir ve hata pay\u0131n\u0131 minimuma indirir. Bu nedenle, TypeScript tipleri, modern ve \u00f6l\u00e7eklenebilir yaz\u0131l\u0131m geli\u015ftirme i\u00e7in vazge\u00e7ilmez bir ara\u00e7 haline gelmi\u015ftir.<\/p>\n Geli\u015ftirme d\u00fcnyas\u0131nda her \u015fey yolundaym\u0131\u015f gibi g\u00f6r\u00fcn\u00fcrken, aniden patlak veren bir \u00fcretim hatas\u0131, genellikle derinlerde yatan bir uyumsuzlu\u011fun i\u015faretidir. Bu t\u00fcr durumlar\u0131n ba\u015f\u0131nda da genellikle “tip uyumsuzluklar\u0131” gelir. Payla\u015f\u0131lan tiplerin kullan\u0131lmad\u0131\u011f\u0131 veya yetersiz kullan\u0131ld\u0131\u011f\u0131 senaryolar, bir\u00e7ok projenin kabusu haline gelmi\u015ftir. \u015eimdi, bu durumu somutla\u015ft\u0131rmak ad\u0131na bir vaka analizi yapal\u0131m ve payla\u015f\u0131lan tipler olmadan kar\u015f\u0131la\u015f\u0131lan ger\u00e7ek d\u00fcnya sorunlar\u0131n\u0131 inceleyelim.<\/p>\n Senaryo: E-ticaret Platformunda Veri Uyumsuzlu\u011fu<\/strong><\/p>\n B\u00fcy\u00fck bir e-ticaret platformu \u00fczerinde \u00e7al\u0131\u015ft\u0131\u011f\u0131m\u0131z\u0131 hayal edelim. Bu platformda a\u015fa\u011f\u0131daki ana bile\u015fenler mevcut:<\/p>\n Bu platformda, “\u00dcr\u00fcn” (Product) bilgileri en merkezi veri yap\u0131lar\u0131ndan biridir. Frontend, BFF ve Ana Backend, farkl\u0131 zamanlarda ve farkl\u0131 ekipler taraf\u0131ndan geli\u015ftirilmi\u015ftir. Ba\u015flang\u0131\u00e7ta, her ekip kendi “\u00dcr\u00fcn” tan\u0131m\u0131n\u0131 olu\u015fturmu\u015ftur:<\/p>\n Bu ayr\u0131k tip tan\u0131mlar\u0131, k\u0131sa vadede sorun \u00e7\u0131karmayabilir. Ancak projenin ya\u015fam d\u00f6ng\u00fcs\u00fc ilerledik\u00e7e, ka\u00e7\u0131n\u0131lmaz olarak sorunlar ortaya \u00e7\u0131kar. \u015e\u00f6yle d\u00fc\u015f\u00fcn\u00fcn: Bir pizza sipari\u015f ediyorsunuz ve telefonla sipari\u015f alan ki\u015fi, a\u015f\u00e7\u0131ya sipari\u015fi yanl\u0131\u015f iletiyor. A\u015f\u00e7\u0131 da bildi\u011fi gibi yap\u0131yor. Sonu\u00e7: Yanl\u0131\u015f pizza! Tipler de bu “sipari\u015f kontrat\u0131n\u0131” belirliyor.<\/p>\n Kar\u015f\u0131la\u015f\u0131lan Sorunlar: Bir Zincirleme Reaksiyon<\/strong><\/p>\n 1. Alan De\u011fi\u015fikli\u011fi ve K\u0131r\u0131lan Kod:<\/strong> <\/code>\n<\/p>\n 2. Yeni Alan Ekleme ve Eksik Veri:<\/strong> 3. Geli\u015ftirici Deneyiminin D\u00fc\u015fmesi:<\/strong> 4. Bak\u0131m Zorluklar\u0131 ve Test Y\u00fck\u00fc:<\/strong> Bu vaka analizi, payla\u015f\u0131lan tiplerin \u00f6nemini net bir \u015fekilde ortaya koymaktad\u0131r. Bir sonraki b\u00f6l\u00fcmde, bu sorunlar\u0131 ortadan kald\u0131rmak i\u00e7in TypeScript tiplerini monorepo i\u00e7inde nas\u0131l etkili bir \u015fekilde payla\u015faca\u011f\u0131m\u0131z\u0131 ad\u0131m ad\u0131m inceleyece\u011fiz.<\/p>\n Payla\u015f\u0131lan tiplerin olmamas\u0131n\u0131n yaratt\u0131\u011f\u0131 sorunlar\u0131 anlad\u0131\u011f\u0131m\u0131za g\u00f6re, \u015fimdi bu sorunlar\u0131 nas\u0131l \u00e7\u00f6zece\u011fimize odaklanal\u0131m. Monorepo yap\u0131s\u0131, TypeScript tiplerini birden fazla proje aras\u0131nda tutarl\u0131 bir \u015fekilde payla\u015fmak i\u00e7in m\u00fckemmel bir ortam sunar. Bu b\u00f6l\u00fcmde, TypeScript tiplerini monorepo i\u00e7inde payla\u015fmak i\u00e7in kullanabilece\u011finiz ba\u015fl\u0131ca yakla\u015f\u0131mlar\u0131, ad\u0131m ad\u0131m \u00f6rneklerle ve kod bloklar\u0131yla a\u00e7\u0131klayaca\u011f\u0131z.<\/p>\n Yakla\u015f\u0131m 1: Ayr\u0131 Bir Bu, b\u00fcy\u00fck ve orta \u00f6l\u00e7ekli monorepolar i\u00e7in en yayg\u0131n ve \u00f6nerilen yakla\u015f\u0131md\u0131r. Monorepo'nuzun i\u00e7inde, sadece payla\u015f\u0131lan tip tan\u0131mlar\u0131n\u0131 i\u00e7eren ayr\u0131 bir \"paket\" (package) olu\u015fturursunuz. Di\u011fer t\u00fcm projeleriniz (frontend uygulamalar\u0131, BFF servisleri vb.) bu tip paketini bir ba\u011f\u0131ml\u0131l\u0131k olarak kullan\u0131r.<\/p>\n Ad\u0131m 1: Monorepo Yap\u0131s\u0131 ve Monorepo'nuz genellikle bir <\/code><\/p>\n Ad\u0131m 2: \u00d6ncelikle, <\/code><\/p>\n Ard\u0131ndan, bu paketin kendi TypeScript yap\u0131land\u0131rmas\u0131n\u0131 tan\u0131mlay\u0131n. Bu <\/code><\/p>\n Ad\u0131m 3: Ortak Tip Tan\u0131mlar\u0131n\u0131 Yazma<\/strong><\/p>\n <\/code><\/p>\n Ad\u0131m 4: Tip Paketini Olu\u015fturma (Build Etme)<\/strong><\/p>\n Ad\u0131m 5: Di\u011fer Projelerde Tip Paketini Kullanma<\/strong><\/p>\n \u015eimdi <\/code><\/p>\n Ba\u011f\u0131ml\u0131l\u0131k eklendikten sonra, projenizdeki herhangi bir TypeScript dosyas\u0131nda bu tipleri i\u00e7e aktarabilirsiniz:<\/p>\n Email: {user.email}<\/p>\n Role: {user.role}<\/p>\n Status: {user.isActive ? 'Active' : 'Inactive'}<\/p>\n <\/div>\n );\n};\n\nexport default UserProfile;\n<\/pre>\n <\/code><\/p>\n Yakla\u015f\u0131m 2: Daha k\u00fc\u00e7\u00fck monorepolar i\u00e7in, ayr\u0131 bir tip paketi olu\u015fturmak yerine, monorepo k\u00f6k Ad\u0131m 1: Ortak Tipler Klas\u00f6r\u00fc Olu\u015fturma<\/strong><\/p>\n Monorepo'nun k\u00f6k\u00fcnde veya <\/code><\/p>\n Ad\u0131m 2: Monorepo'nun ana <\/code><\/p>\n Ad\u0131m 3: Tipleri Kullanma<\/strong><\/p>\n Art\u0131k di\u011fer projelerinizde tipleri do\u011frudan takma adla i\u00e7e aktarabilirsiniz:<\/p>\n <\/code><\/p>\n Her iki yakla\u015f\u0131m da monorepo i\u00e7inde TypeScript tiplerini payla\u015fmak i\u00e7in ge\u00e7erlidir, ancak ayr\u0131 bir paket yakla\u015f\u0131m\u0131, \u00f6zellikle b\u00fcy\u00fck ve karma\u015f\u0131k monorepolar i\u00e7in daha \u00f6l\u00e7eklenebilir ve y\u00f6netilebilir bir \u00e7\u00f6z\u00fcm sunar. Bir sonraki b\u00f6l\u00fcmde, bu yakla\u015f\u0131mlar\u0131 BFF mimarisi ba\u011flam\u0131nda nas\u0131l kullanabilece\u011fimizi inceleyece\u011fiz.<\/p>\n Backend-for-Frontend (BFF) mimarisi, farkl\u0131 frontend uygulamalar\u0131na \u00f6zelle\u015ftirilmi\u015f API katmanlar\u0131 sunarak geli\u015ftirme s\u00fcrecini kolayla\u015ft\u0131rma ve performans\u0131 art\u0131rma potansiyeline sahiptir. Ancak bu katman, ayn\u0131 zamanda frontend ile ana backend servisleri aras\u0131nda bir arac\u0131 g\u00f6revi g\u00f6rd\u00fc\u011f\u00fc i\u00e7in, tip tutarl\u0131l\u0131\u011f\u0131 konusunda ek bir sorumluluk da y\u00fckler. Bu b\u00f6l\u00fcmde, BFF mimarilerinde tip payla\u015f\u0131m\u0131n\u0131n neden bu kadar kritik oldu\u011funu ve API kontratlar\u0131n\u0131 nas\u0131l g\u00fcvence alt\u0131na alabilece\u011fimizi detayl\u0131ca ele alaca\u011f\u0131z.<\/p>\n BFF'in Rol\u00fc ve Tip G\u00fcvenli\u011fi Gereksinimi<\/strong><\/p>\n BFF, temelde frontend'in \"iste\u011fini terc\u00fcme eden\" ve \"cevab\u0131n\u0131 haz\u0131rlayan\" bir arac\u0131d\u0131r. Genellikle \u015fu g\u00f6revleri \u00fcstlenir:<\/p>\n Bu arac\u0131 rol\u00fc, \u00f6zellikle veri d\u00f6n\u00fc\u015f\u00fcm\u00fc a\u015famas\u0131nda tip g\u00fcvenli\u011fini hayati k\u0131lar. D\u00fc\u015f\u00fcn\u00fcn ki frontend, belirli bir JSON yap\u0131s\u0131 bekliyor. BFF, ana backend'den gelen veriyi bu yap\u0131ya d\u00f6n\u00fc\u015ft\u00fcr\u00fcrken bir hata yaparsa veya backend'deki bir de\u011fi\u015fiklik BFF taraf\u0131ndan yanl\u0131\u015f yorumlan\u0131rsa, frontend'de beklenmedik hatalar ortaya \u00e7\u0131kar. Bu da geli\u015ftiricilerin \"API do\u011fru \u00e7al\u0131\u015f\u0131yor ama frontend'de neden veri gelmiyor?\" gibi sorularla bo\u011fu\u015fmas\u0131na neden olur.<\/p>\n BFF ve Frontend Aras\u0131nda Tip Payla\u015f\u0131m\u0131<\/strong><\/p>\n BFF mimarisinde tip payla\u015f\u0131m\u0131n\u0131n en kritik noktas\u0131, BFF ile do\u011frudan ileti\u015fim kuran frontend aras\u0131ndaki kontrat\u0131n g\u00fcvence alt\u0131na al\u0131nmas\u0131d\u0131r. Monorepo ortam\u0131nda bu, \u00f6nceki b\u00f6l\u00fcmde ele ald\u0131\u011f\u0131m\u0131z \"ayr\u0131 bir Nas\u0131l Yap\u0131l\u0131r?<\/strong><\/p>\n \u00d6rnek Senaryo: \u00dcr\u00fcn Detaylar\u0131 API'si<\/strong><\/p>\n E-ticaret \u00f6rne\u011fimize geri d\u00f6nelim. Frontend, belirli bir \u00fcr\u00fcn\u00fcn detaylar\u0131n\u0131 g\u00f6stermek i\u00e7in BFF'e bir istek g\u00f6nderiyor. BFF ise bu iste\u011fi i\u015fleyip ana backend'den \u00fcr\u00fcn\u00fc \u00e7ekiyor ve frontend'e d\u00f6n\u00fc\u015ft\u00fcr\u00fclm\u00fc\u015f bir \u015fekilde sunuyor.<\/p>\n 1. Payla\u015f\u0131lan Tipler ( <\/code><\/p>\n 2. BFF Servisi ( BFF servisi, ana backend'den gelen <\/code><\/p>\n 3. Frontend Uygulamas\u0131 ( Frontend, BFF'ten gelen yan\u0131t\u0131 {product.description}<\/p>\n Fiyat: {product.price} {product.currency}<\/p>\n Stok: {product.availableStock}<\/p>\n \n
Vaka Analizi: Payla\u015f\u0131lan Tipler Olmadan Kar\u015f\u0131la\u015f\u0131lan Sorunlar<\/h2>\n
\n
\n
ProductEntity<\/code> ad\u0131nda bir s\u0131n\u0131f kullan\u0131r.<\/li>\nProductDto<\/code> veya ProductInterface<\/code> kullan\u0131r.<\/li>\nProduct<\/code> tipini kendi taraf\u0131nda interface Product<\/code> olarak tan\u0131mlar.<\/li>\n<\/ul>\n
\n * Ana Backend ekibi, ProductEntity<\/code> i\u00e7indeki price<\/code> alan\u0131n\u0131n tipini decimal<\/code>‘dan string<\/code>‘e de\u011fi\u015ftirmeye karar verir (\u00f6rne\u011fin, para birimi sembol\u00fc ile birlikte g\u00f6stermek i\u00e7in).
\n * Bu de\u011fi\u015fiklik, Ana Backend’de yap\u0131ld\u0131ktan sonra, BFF’in bu yeni tip ile uyumlu hale gelmesi gerekir. Ancak, BFF ekibi bu de\u011fi\u015fiklikten an\u0131nda haberdar olmayabilir veya g\u00f6zden ka\u00e7\u0131rabilir.
\n * BFF, hala eski decimal<\/code> tipini beklerken, yeni string<\/code> tipinde veri almaya ba\u015flar. Bu durum, BFF’te beklenmedik \u00e7al\u0131\u015fma zaman\u0131 hatalar\u0131na (TypeError<\/code> veya veri d\u00f6n\u00fc\u015f\u00fcm hatalar\u0131na) yol a\u00e7ar.
\n * BFF’teki hata giderilmeden, Frontend’e yanl\u0131\u015f tipte veri ula\u015f\u0131r. Frontend, price<\/code> alan\u0131n\u0131 bir say\u0131 olarak beklerken bir string al\u0131r. Bu da UI’da hatal\u0131 g\u00f6sterimlere, matematiksel i\u015flemlerin ba\u015far\u0131s\u0131z olmas\u0131na veya uygulaman\u0131n \u00e7\u00f6kmesine neden olur.<\/p>\n\n\/\/ Ana Backend (\u00d6nceden)\ninterface ProductEntity {\n id: string;\n name: string;\n price: number; \/\/ \u00d6nceki durum\n}\n\n\/\/ Ana Backend (Sonra)\ninterface ProductEntity {\n id: string;\n name: string;\n price: string; \/\/ Yeni durum: \"12.99 USD\" gibi\n}\n\n\/\/ BFF'te (G\u00fcncellenmemi\u015fse)\ninterface FrontendProduct {\n id: string;\n name: string;\n price: number; \/\/ Hala number bekliyor!\n}\n\n\/\/ Frontend'de (G\u00fcncellenmemi\u015fse)\ninterface ProductCardProps {\n product: {\n name: string;\n price: number; \/\/ Hala number bekliyor!\n };\n}\n <\/pre>\n
\n * Pazarlama ekibi, \u00fcr\u00fcnlere \"stok durumu\" (stockStatus: 'InStock' | 'OutOfStock'<\/code>) eklenmesini ister.
\n * Ana Backend bu alan\u0131 ProductEntity<\/code>'e ekler.
\n * BFF, bu yeni alan\u0131 ana backend'den \u00e7eker, ancak kendi ProductDto<\/code>'suna eklemeyi unutur veya gerekli g\u00f6rmez. Dolay\u0131s\u0131yla, bu alan frontend'e iletilmez.
\n * Frontend ekibi, yeni \u00f6zelli\u011fi geli\u015ftirmeye ba\u015flar ve kendi interface Product<\/code> tan\u0131m\u0131na stockStatus<\/code> alan\u0131n\u0131 ekler. Ancak API'den bu alan gelmedi\u011fi i\u00e7in UI'da \"undefined\" veya \"null\" de\u011ferleriyle kar\u015f\u0131la\u015f\u0131r. Bu durum, yanl\u0131\u015f kullan\u0131c\u0131 deneyimine veya eksik \u00f6zelliklerin yay\u0131na \u00e7\u0131kmas\u0131na neden olur.<\/p>\n
\n * Her ekip, di\u011fer ekiplerin API kontratlar\u0131n\u0131 veya veri yap\u0131lar\u0131n\u0131 dok\u00fcmantasyonlardan veya Slack mesajlar\u0131ndan takip etmek zorunda kal\u0131r. Bu, zaman kayb\u0131na ve yanl\u0131\u015f anla\u015f\u0131lmalara yol a\u00e7ar.
\n * IDE'ler, tip bilgisi olmad\u0131\u011f\u0131 i\u00e7in otomatik tamamlama veya anl\u0131k hata bildirimleri sunamaz. Geli\u015ftiriciler, s\u00fcrekli olarak API dok\u00fcmantasyonlar\u0131na ba\u015fvurmak veya \u00e7al\u0131\u015fma zaman\u0131 hatalar\u0131yla kar\u015f\u0131la\u015fana kadar beklemek zorunda kal\u0131r.<\/p>\n
\n * Herhangi bir tip de\u011fi\u015fikli\u011finde, t\u00fcm ilgili projelerdeki tiplerin manuel olarak g\u00fcncellenmesi gerekir. Bu, b\u00fcy\u00fck bir bak\u0131m y\u00fck\u00fc olu\u015fturur ve insan hatas\u0131na a\u00e7\u0131kt\u0131r.
\n * Bu uyumsuzluklar\u0131 yakalamak i\u00e7in entegrasyon testlerinin kapsam\u0131n\u0131n \u00e7ok geni\u015f olmas\u0131 gerekir. Hatta bazen, \u00fcretim ortam\u0131nda ortaya \u00e7\u0131kan senaryolar\u0131 test ortam\u0131nda yakalamak m\u00fcmk\u00fcn olmayabilir.<\/p>\nTypeScript Tiplerini Monorepo'da Nas\u0131l Payla\u015f\u0131r\u0131z? Uygulamal\u0131 Yakla\u015f\u0131mlar<\/h2>\n
types<\/code> Paketi Olu\u015fturma (\u00d6nerilen)<\/strong><\/p>\npackages<\/code> Klas\u00f6r\u00fc<\/strong><\/p>\npackages<\/code> veya apps<\/code> klas\u00f6r\u00fcne sahip olacakt\u0131r. Bu klas\u00f6r\u00fcn alt\u0131nda her proje kendi alt klas\u00f6r\u00fcnde yer al\u0131r. \u00d6rne\u011fin:<\/p>\n\n\/monorepo-root\n\u251c\u2500\u2500 packages\/\n\u2502 \u251c\u2500\u2500 app-frontend\/ \/\/ React uygulamas\u0131\n\u2502 \u251c\u2500\u2500 api-bff\/ \/\/ Node.js BFF servisi\n\u2502 \u2514\u2500\u2500 @monorepo\/types\/ \/\/ Payla\u015f\u0131lan tipler paketi\n\u251c\u2500\u2500 package.json \/\/ Monorepo root package.json\n\u2514\u2500\u2500 tsconfig.base.json \/\/ Ortak TypeScript ayarlar\u0131\n<\/pre>\n@monorepo\/types<\/code> Paketini Olu\u015fturma<\/strong><\/p>\npackages\/@monorepo\/types<\/code> klas\u00f6r\u00fcn\u00fc olu\u015fturun. \u0130\u00e7ine basit bir package.json<\/code> ve tsconfig.json<\/code> dosyas\u0131 ekleyin. package.json<\/code> dosyas\u0131nda, paketin ad\u0131n\u0131 (genellikle @scope\/name<\/code> format\u0131nda), versiyonunu ve tip dosyalar\u0131n\u0131n nerede bulundu\u011funu belirtmeniz \u00f6nemlidir.<\/p>\n\n\/\/ packages\/@monorepo\/types\/package.json\n{\n \"name\": \"@monorepo\/types\",\n \"version\": \"1.0.0\",\n \"description\": \"Monorepo genelinde payla\u015f\u0131lan TypeScript tip tan\u0131mlar\u0131.\",\n \"main\": \"dist\/index.js\",\n \"types\": \"dist\/index.d.ts\", \/\/ Tip tan\u0131mlar\u0131n\u0131n yeri\n \"scripts\": {\n \"build\": \"tsc\"\n },\n \"devDependencies\": {\n \"typescript\": \"^5.0.0\"\n },\n \"files\": [\n \"dist\" \/\/ Yay\u0131nlarken sadece dist klas\u00f6r\u00fcn\u00fc dahil et\n ],\n \"publishConfig\": {\n \"access\": \"public\"\n }\n}\n<\/pre>\ntsconfig.json<\/code>, tsc<\/code> komutunun nas\u0131l \u00e7al\u0131\u015faca\u011f\u0131n\u0131 belirler.<\/p>\n\n\/\/ packages\/@monorepo\/types\/tsconfig.json\n{\n \"extends\": \"..\/..\/tsconfig.base.json\", \/\/ Monorepo'nun k\u00f6k tsconfig'inden devralma\n \"compilerOptions\": {\n \"outDir\": \"dist\",\n \"rootDir\": \"src\",\n \"declaration\": true, \/\/ d.ts dosyalar\u0131 olu\u015ftur\n \"emitDeclarationOnly\": true, \/\/ Sadece d.ts dosyalar\u0131n\u0131 olu\u015ftur, JS de\u011fil\n \"noEmit\": false, \/\/ \u00dcretimi etkinle\u015ftir\n \"module\": \"esnext\", \/\/ Modern mod\u00fcl sistemi\n \"target\": \"esnext\" \/\/ Modern ES versiyonu\n },\n \"include\": [\n \"src\/**\/*\"\n ]\n}\n<\/pre>\nemitDeclarationOnly: true<\/code> se\u00e7ene\u011fi, tip paketinizde sadece .d.ts<\/code> (declaration) dosyalar\u0131n\u0131n olu\u015fturulmas\u0131n\u0131 sa\u011flar. Bu sayede gereksiz JavaScript \u00e7\u0131kt\u0131 dosyalar\u0131 olu\u015fmaz ve paket boyutu k\u00fc\u00e7\u00fcl\u00fcr. noEmit: false<\/code> ise \u00fcretimi tetiklemek i\u00e7in gereklidir.\n<\/div>\npackages\/@monorepo\/types\/src\/index.ts<\/code> dosyas\u0131 i\u00e7inde payla\u015f\u0131lan tiplerinizi tan\u0131mlay\u0131n:<\/p>\n\n\/\/ packages\/@monorepo\/types\/src\/index.ts\nexport interface User {\n id: string;\n firstName: string;\n lastName: string;\n email: string;\n isActive: boolean;\n role: 'admin' | 'user' | 'guest';\n}\n\nexport interface Product {\n id: string;\n name: string;\n description: string;\n price: number; \/\/ \u00d6nceki vaka analizimizdeki sorun burada \u00e7\u00f6z\u00fclmeli: number veya string\n currency: string;\n stockCount: number;\n imageUrl: string;\n}\n\nexport interface ApiResponse@monorepo\/types<\/code> paketi i\u00e7inde npm run build<\/code> veya yarn build<\/code> komutunu \u00e7al\u0131\u015ft\u0131rarak tip dosyalar\u0131n\u0131 (dist\/index.d.ts) olu\u015fturun. Monorepo ara\u00e7lar\u0131 (Yarn Workspaces, Lerna, Nx) genellikle bu ad\u0131m\u0131 otomatikle\u015ftirir veya kolayla\u015ft\u0131r\u0131r.<\/p>\napp-frontend<\/code> veya api-bff<\/code> gibi di\u011fer projelerinizde bu tip paketini bir ba\u011f\u0131ml\u0131l\u0131k olarak ekleyebilirsiniz. Monorepo ara\u00e7lar\u0131 genellikle \"workspace\" ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131 destekler, bu da paketi yay\u0131nlamadan direkt olarak monorepo i\u00e7inden kullanman\u0131z\u0131 sa\u011flar.<\/p>\n\n# app-frontend projesinin k\u00f6k dizininde\ncd packages\/app-frontend\nyarn add @monorepo\/types\n\n# veya Lerna\/Nx kullan\u0131yorsan\u0131z\nlerna add @monorepo\/types --scope=app-frontend\n<\/pre>\n\n\/\/ packages\/app-frontend\/src\/components\/UserProfile.tsx\nimport React from 'react';\nimport { User } from '@monorepo\/types'; \/\/ Payla\u015f\u0131lan User tipini i\u00e7e aktar\n\ninterface UserProfileProps {\n user: User;\n}\n\nconst UserProfile: React.FC{user.firstName} {user.lastName}<\/h2>\n
tsconfig.json<\/code> paths<\/code> Takma Adlar\u0131 ile Direkt Referans Verme (K\u00fc\u00e7\u00fck Monorepolar \u0130\u00e7in)<\/strong><\/p>\ntsconfig.json<\/code> dosyas\u0131ndaki paths<\/code> ayarlar\u0131n\u0131 kullanarak do\u011frudan tip dosyalar\u0131na referans verebilirsiniz. Bu y\u00f6ntem, daha az yap\u0131land\u0131rma gerektirir ancak tipleri ayr\u0131 bir paket gibi y\u00f6netme esnekli\u011fini sunmaz.<\/p>\nshared<\/code> gibi bir klas\u00f6r alt\u0131nda tiplerinizi saklay\u0131n:<\/p>\n\n\/monorepo-root\n\u251c\u2500\u2500 packages\/\n\u2502 \u251c\u2500\u2500 app-frontend\/\n\u2502 \u2514\u2500\u2500 api-bff\/\n\u251c\u2500\u2500 shared\/\n\u2502 \u2514\u2500\u2500 types\/\n\u2502 \u2514\u2500\u2500 index.ts \/\/ Ortak tip tan\u0131mlar\u0131\n\u251c\u2500\u2500 package.json\n\u2514\u2500\u2500 tsconfig.json \/\/ Monorepo'nun ana tsconfig'i\n<\/pre>\ntsconfig.json<\/code> paths<\/code> Ayarlar\u0131n\u0131 Yap\u0131land\u0131rma<\/strong><\/p>\ntsconfig.json<\/code> dosyas\u0131na baseUrl<\/code> ve paths<\/code> ayarlar\u0131n\u0131 ekleyin:<\/p>\n\n\/\/ monorepo-root\/tsconfig.json\n{\n \"compilerOptions\": {\n \"baseUrl\": \".\", \/\/ K\u00f6k dizini temel al\n \"paths\": {\n \"@shared\/types\": [\".\/shared\/types\/index.ts\"], \/\/ Takma ad ile yolu e\u015fle\n \"@shared\/types\/*\": [\".\/shared\/types\/*\"]\n },\n \/\/ Di\u011fer ortak ayarlar\n \"target\": \"esnext\",\n \"module\": \"esnext\",\n \"lib\": [\"dom\", \"dom.iterable\", \"esnext\"],\n \"allowJs\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"allowSyntheticDefaultImports\": true,\n \"strict\": true,\n \"forceConsistentCasingInFileNames\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"moduleResolution\": \"node\",\n \"resolveJsonModule\": true,\n \"isolatedModules\": true,\n \"jsx\": \"react-jsx\",\n \"noEmit\": true\n },\n \"exclude\": [\"node_modules\"],\n \"include\": [\n \"shared\/**\/*.ts\", \/\/ Payla\u015f\u0131lan tipleri de dahil et\n \"packages\/**\/*.ts\",\n \"packages\/**\/*.tsx\"\n ]\n}\n<\/pre>\n\n\/\/ packages\/api-bff\/src\/routes\/users.ts\nimport { User, ApiResponse } from '@shared\/types'; \/\/ Takma ad ile i\u00e7e aktar\nimport express from 'express';\n\nconst router = express.Router();\n\nrouter.get('\/users\/:id', (req, res: express.ResponseBFF Mimarilerinde Tip Payla\u015f\u0131m\u0131: API Kontratlar\u0131n\u0131n G\u00fcvence Alt\u0131na Al\u0131nmas\u0131<\/h2>\n
\n
@monorepo\/types<\/code> paketi olu\u015fturma\" yakla\u015f\u0131m\u0131yla en etkili \u015fekilde sa\u011flanabilir.<\/p>\n\n
@monorepo\/types<\/code> paketi i\u00e7inde, hem frontend'in BFF'e g\u00f6nderdi\u011fi request body'leri hem de BFF'ten ald\u0131\u011f\u0131 response body'lerini tan\u0131mlay\u0131n. Bu tipler, API kontrat\u0131n\u0131z\u0131n resm\u00ee tan\u0131m\u0131 olacakt\u0131r.<\/li>\n@monorepo\/types<\/code>):<\/strong><\/p>\n\n\/\/ packages\/@monorepo\/types\/src\/product.ts\nexport interface ProductDetailsResponse {\n id: string;\n name: string;\n description: string;\n price: number;\n currency: string;\n availableStock: number; \/\/ Farkl\u0131 bir isimle g\u00f6nderilebilir\n images: string[];\n reviewsCount: number;\n averageRating: number;\n}\n\nexport interface AddToCartRequest {\n productId: string;\n quantity: number;\n}\n\n\/\/ packages\/@monorepo\/types\/src\/common.ts\nexport interface ApiResponseapi-bff<\/code>):<\/strong><\/p>\nProductEntity<\/code> (varsay\u0131lan olarak) tipindeki veriyi ProductDetailsResponse<\/code> tipine d\u00f6n\u00fc\u015ft\u00fcr\u00fcr ve frontend'e sunar.<\/p>\n\n\/\/ packages\/api-bff\/src\/routes\/products.ts\nimport express, { Request, Response } from 'express';\nimport { ProductDetailsResponse, AddToCartRequest, ApiResponse } from '@monorepo\/types';\nimport axios from 'axios'; \/\/ Ana backend ile ileti\u015fim i\u00e7in\n\nconst router = express.Router();\n\n\/\/ Varsayal\u0131m ana backend'den gelen Product tipi\ninterface BackendProductEntity {\n id: string;\n title: string;\n summary: string;\n cost: number;\n currencyCode: string;\n quantity: number;\n mediaUrls: string[];\n userReviews: { rating: number }[];\n}\n\nrouter.get('\/products\/:id', async (req: Request, res: Responsehttp:\/\/main-backend\/api\/products\/${productId}<\/code>);\n const backendProduct = backendResponse.data;\n\n \/\/ Backend'den gelen veriyi frontend'in bekledi\u011fi tipe d\u00f6n\u00fc\u015ft\u00fcr (BFF'in ana g\u00f6revi)\n const productDetails: ProductDetailsResponse = {\n id: backendProduct.id,\n name: backendProduct.title,\n description: backendProduct.summary,\n price: backendProduct.cost,\n currency: backendProduct.currencyCode,\n availableStock: backendProduct.quantity,\n images: backendProduct.mediaUrls,\n reviewsCount: backendProduct.userReviews.length,\n averageRating: backendProduct.userReviews.reduce((sum, r) => sum + r.rating, 0) \/ backendProduct.userReviews.length,\n };\n\n return res.status(200).json({ success: true, data: productDetails, statusCode: 200 });\n } catch (error) {\n console.error('Error fetching product details:', error);\n return res.status(500).json({ success: false, message: '\u00dcr\u00fcn detaylar\u0131 al\u0131namad\u0131.', statusCode: 500 });\n }\n});\n\nrouter.post('\/cart\/add', (req: Request<{}, {}, AddToCartRequest>, res: Response\u00dcr\u00fcn ID: ${productId}, Miktar: ${quantity} sepete eklendi.<\/code>);\n return res.status(200).json({ success: true, message: '\u00dcr\u00fcn sepete eklendi.', statusCode: 200 });\n});\n\nexport default router;\n<\/pre>\napp-frontend<\/code>):<\/strong><\/p>\nProductDetailsResponse<\/code> olarak bekler ve AddToCartRequest<\/code> tipinde istek g\u00f6nderir.<\/p>\n\n\/\/ packages\/app-frontend\/src\/pages\/ProductDetail.tsx\nimport React, { useEffect, useState } from 'react';\nimport axios from 'axios';\nimport { ProductDetailsResponse, AddToCartRequest, ApiResponse } from '@monorepo\/types'; \/\/ Payla\u015f\u0131lan tipleri kullan\n\ninterface ProductDetailPageProps {\n productId: string;\n}\n\nconst ProductDetailPage: React.FC\/api\/products\/${productId}<\/code>);\n if (response.data.success && response.data.data) {\n setProduct(response.data.data);\n } else {\n setError(response.data.message || '\u00dcr\u00fcn bilgisi al\u0131namad\u0131.');\n }\n } catch (err) {\n setError('Sunucu hatas\u0131.');\n } finally {\n setLoading(false);\n }\n };\n fetchProduct();\n }, [productId]);\n\n const handleAddToCart = async () => {\n if (!product) return;\n const requestBody: AddToCartRequest = {\n productId: product.id,\n quantity: 1,\n };\n try {\n const response = await axios.post{product.name}<\/h1>\n