[{"data":1,"prerenderedAt":820},["ShallowReactive",2],{"docs-\u002Fresponse-transformer":3},{"id":4,"title":5,"body":6,"description":813,"extension":814,"meta":815,"navigation":155,"path":816,"seo":817,"stem":818,"__hash__":819},"docs\u002Fdocs\u002Fresponse-transformer.md","Response Transformer",{"type":7,"value":8,"toc":798},"minimark",[9,13,21,41,44,49,74,76,80,104,116,118,122,127,236,240,318,322,398,402,488,492,564,568,682,684,688,699,714,725,727,731,739,755,761,763,767,794],[10,11,5],"h1",{"id":12},"response-transformer",[14,15,16,20],"p",{},[17,18,19],"code",{},"@synchronized-studio\u002Fresponse-transformer"," is the lighter integration path for Cachely. It rewrites CMS asset URLs in your API responses so they point to your tenant proxy domain instead of the origin CDN.",[14,22,23,24,28,29,32,33,40],{},"Use this package when you want asset URL rewriting ",[25,26,27],"strong",{},"without"," routing CMS API requests through the ",[17,30,31],{},"\u002F~api"," proxy. If you want the full package (API proxy + asset rewriting), use ",[34,35,37],"a",{"href":36},"\u002Fdocs\u002Fcore",[17,38,39],{},"@synchronized-studio\u002Fcmsassets-core"," instead.",[42,43],"hr",{},[45,46,48],"h2",{"id":47},"installation","Installation",[50,51,56],"pre",{"className":52,"code":53,"language":54,"meta":55,"style":55},"language-bash shiki shiki-themes github-dark","npm install @synchronized-studio\u002Fresponse-transformer\n","bash","",[17,57,58],{"__ignoreMap":55},[59,60,63,67,71],"span",{"class":61,"line":62},"line",1,[59,64,66],{"class":65},"svObZ","npm",[59,68,70],{"class":69},"sU2Wk"," install",[59,72,73],{"class":69}," @synchronized-studio\u002Fresponse-transformer\n",[42,75],{},[45,77,79],{"id":78},"when-to-use-response-transformer","When to use Response Transformer",[81,82,83,91,94,101],"ul",{},[84,85,86,87,90],"li",{},"You only need ",[25,88,89],{},"asset proxy"," (media delivery and edge caching)",[84,92,93],{},"Your CMS API calls are already handled and you don't want to change them",[84,95,96,97,100],{},"You want the ",[25,98,99],{},"smallest"," integration footprint",[84,102,103],{},"You prefer to rewrite URLs after fetching rather than proxying the entire request",[14,105,106,107,112,113,40],{},"If you also want server-side token injection, API response caching, and automatic URL rewriting before responses reach the app, use ",[34,108,109],{"href":36},[17,110,111],{},"cmsassets-core"," with ",[17,114,115],{},"createCmsAssetsFetch",[42,117],{},[45,119,121],{"id":120},"usage-by-cms","Usage by CMS",[123,124,126],"h3",{"id":125},"prismic","Prismic",[50,128,132],{"className":129,"code":130,"language":131,"meta":55,"style":55},"language-typescript shiki shiki-themes github-dark","import { transformPrismicAssetUrls } from \"@synchronized-studio\u002Fresponse-transformer\"\n\nconst data = await prismicClient.getAllByType(\"page\")\n\nconst transformed = transformPrismicAssetUrls(data, {\n  repository: \"your-repo\",\n  cmsAssetsUrl: \"https:\u002F\u002Fyour-slug.cmsassets.com\"\n})\n","typescript",[17,133,134,150,157,188,193,209,221,230],{"__ignoreMap":55},[59,135,136,140,144,147],{"class":61,"line":62},[59,137,139],{"class":138},"snl16","import",[59,141,143],{"class":142},"s95oV"," { transformPrismicAssetUrls } ",[59,145,146],{"class":138},"from",[59,148,149],{"class":69}," \"@synchronized-studio\u002Fresponse-transformer\"\n",[59,151,153],{"class":61,"line":152},2,[59,154,156],{"emptyLinePlaceholder":155},true,"\n",[59,158,160,163,167,170,173,176,179,182,185],{"class":61,"line":159},3,[59,161,162],{"class":138},"const",[59,164,166],{"class":165},"sDLfK"," data",[59,168,169],{"class":138}," =",[59,171,172],{"class":138}," await",[59,174,175],{"class":142}," prismicClient.",[59,177,178],{"class":65},"getAllByType",[59,180,181],{"class":142},"(",[59,183,184],{"class":69},"\"page\"",[59,186,187],{"class":142},")\n",[59,189,191],{"class":61,"line":190},4,[59,192,156],{"emptyLinePlaceholder":155},[59,194,196,198,201,203,206],{"class":61,"line":195},5,[59,197,162],{"class":138},[59,199,200],{"class":165}," transformed",[59,202,169],{"class":138},[59,204,205],{"class":65}," transformPrismicAssetUrls",[59,207,208],{"class":142},"(data, {\n",[59,210,212,215,218],{"class":61,"line":211},6,[59,213,214],{"class":142},"  repository: ",[59,216,217],{"class":69},"\"your-repo\"",[59,219,220],{"class":142},",\n",[59,222,224,227],{"class":61,"line":223},7,[59,225,226],{"class":142},"  cmsAssetsUrl: ",[59,228,229],{"class":69},"\"https:\u002F\u002Fyour-slug.cmsassets.com\"\n",[59,231,233],{"class":61,"line":232},8,[59,234,235],{"class":142},"})\n",[123,237,239],{"id":238},"contentful","Contentful",[50,241,243],{"className":129,"code":242,"language":131,"meta":55,"style":55},"import { transformContentfulAssetUrls } from \"@synchronized-studio\u002Fresponse-transformer\"\n\nconst entries = await contentfulClient.getEntries()\n\nconst transformed = transformContentfulAssetUrls(entries, {\n  spaceId: \"your-space-id\",\n  cmsAssetsUrl: \"https:\u002F\u002Fyour-slug.cmsassets.com\"\n})\n",[17,244,245,256,260,280,284,298,308,314],{"__ignoreMap":55},[59,246,247,249,252,254],{"class":61,"line":62},[59,248,139],{"class":138},[59,250,251],{"class":142}," { transformContentfulAssetUrls } ",[59,253,146],{"class":138},[59,255,149],{"class":69},[59,257,258],{"class":61,"line":152},[59,259,156],{"emptyLinePlaceholder":155},[59,261,262,264,267,269,271,274,277],{"class":61,"line":159},[59,263,162],{"class":138},[59,265,266],{"class":165}," entries",[59,268,169],{"class":138},[59,270,172],{"class":138},[59,272,273],{"class":142}," contentfulClient.",[59,275,276],{"class":65},"getEntries",[59,278,279],{"class":142},"()\n",[59,281,282],{"class":61,"line":190},[59,283,156],{"emptyLinePlaceholder":155},[59,285,286,288,290,292,295],{"class":61,"line":195},[59,287,162],{"class":138},[59,289,200],{"class":165},[59,291,169],{"class":138},[59,293,294],{"class":65}," transformContentfulAssetUrls",[59,296,297],{"class":142},"(entries, {\n",[59,299,300,303,306],{"class":61,"line":211},[59,301,302],{"class":142},"  spaceId: ",[59,304,305],{"class":69},"\"your-space-id\"",[59,307,220],{"class":142},[59,309,310,312],{"class":61,"line":223},[59,311,226],{"class":142},[59,313,229],{"class":69},[59,315,316],{"class":61,"line":232},[59,317,235],{"class":142},[123,319,321],{"id":320},"shopify","Shopify",[50,323,325],{"className":129,"code":324,"language":131,"meta":55,"style":55},"import { transformShopifyAssetUrls } from \"@synchronized-studio\u002Fresponse-transformer\"\n\nconst data = await shopifyClient.request(productsQuery)\n\nconst transformed = transformShopifyAssetUrls(data, {\n  storeDomain: \"your-store.myshopify.com\",\n  cmsAssetsUrl: \"https:\u002F\u002Fyour-slug.cmsassets.com\"\n})\n",[17,326,327,338,342,361,365,378,388,394],{"__ignoreMap":55},[59,328,329,331,334,336],{"class":61,"line":62},[59,330,139],{"class":138},[59,332,333],{"class":142}," { transformShopifyAssetUrls } ",[59,335,146],{"class":138},[59,337,149],{"class":69},[59,339,340],{"class":61,"line":152},[59,341,156],{"emptyLinePlaceholder":155},[59,343,344,346,348,350,352,355,358],{"class":61,"line":159},[59,345,162],{"class":138},[59,347,166],{"class":165},[59,349,169],{"class":138},[59,351,172],{"class":138},[59,353,354],{"class":142}," shopifyClient.",[59,356,357],{"class":65},"request",[59,359,360],{"class":142},"(productsQuery)\n",[59,362,363],{"class":61,"line":190},[59,364,156],{"emptyLinePlaceholder":155},[59,366,367,369,371,373,376],{"class":61,"line":195},[59,368,162],{"class":138},[59,370,200],{"class":165},[59,372,169],{"class":138},[59,374,375],{"class":65}," transformShopifyAssetUrls",[59,377,208],{"class":142},[59,379,380,383,386],{"class":61,"line":211},[59,381,382],{"class":142},"  storeDomain: ",[59,384,385],{"class":69},"\"your-store.myshopify.com\"",[59,387,220],{"class":142},[59,389,390,392],{"class":61,"line":223},[59,391,226],{"class":142},[59,393,229],{"class":69},[59,395,396],{"class":61,"line":232},[59,397,235],{"class":142},[123,399,401],{"id":400},"cloudinary","Cloudinary",[50,403,405],{"className":129,"code":404,"language":131,"meta":55,"style":55},"import { transformCloudinaryAssetUrls } from \"@synchronized-studio\u002Fresponse-transformer\"\n\nconst data = await cloudinaryClient.search.expression(\"folder:products\").execute()\n\nconst transformed = transformCloudinaryAssetUrls(data, {\n  cloudName: \"my-cloud\",\n  cmsAssetsUrl: \"https:\u002F\u002Fyour-slug.cmsassets.com\"\n})\n",[17,406,407,418,422,451,455,468,478,484],{"__ignoreMap":55},[59,408,409,411,414,416],{"class":61,"line":62},[59,410,139],{"class":138},[59,412,413],{"class":142}," { transformCloudinaryAssetUrls } ",[59,415,146],{"class":138},[59,417,149],{"class":69},[59,419,420],{"class":61,"line":152},[59,421,156],{"emptyLinePlaceholder":155},[59,423,424,426,428,430,432,435,438,440,443,446,449],{"class":61,"line":159},[59,425,162],{"class":138},[59,427,166],{"class":165},[59,429,169],{"class":138},[59,431,172],{"class":138},[59,433,434],{"class":142}," cloudinaryClient.search.",[59,436,437],{"class":65},"expression",[59,439,181],{"class":142},[59,441,442],{"class":69},"\"folder:products\"",[59,444,445],{"class":142},").",[59,447,448],{"class":65},"execute",[59,450,279],{"class":142},[59,452,453],{"class":61,"line":190},[59,454,156],{"emptyLinePlaceholder":155},[59,456,457,459,461,463,466],{"class":61,"line":195},[59,458,162],{"class":138},[59,460,200],{"class":165},[59,462,169],{"class":138},[59,464,465],{"class":65}," transformCloudinaryAssetUrls",[59,467,208],{"class":142},[59,469,470,473,476],{"class":61,"line":211},[59,471,472],{"class":142},"  cloudName: ",[59,474,475],{"class":69},"\"my-cloud\"",[59,477,220],{"class":142},[59,479,480,482],{"class":61,"line":223},[59,481,226],{"class":142},[59,483,229],{"class":69},[59,485,486],{"class":61,"line":232},[59,487,235],{"class":142},[123,489,491],{"id":490},"imgix","Imgix",[50,493,495],{"className":129,"code":494,"language":131,"meta":55,"style":55},"import { transformImgixAssetUrls } from \"@synchronized-studio\u002Fresponse-transformer\"\n\nconst data = await fetchCmsData()\n\nconst transformed = transformImgixAssetUrls(data, {\n  imgixDomain: \"my-source.imgix.net\",\n  cmsAssetsUrl: \"https:\u002F\u002Fyour-slug.cmsassets.com\"\n})\n",[17,496,497,508,512,527,531,544,554,560],{"__ignoreMap":55},[59,498,499,501,504,506],{"class":61,"line":62},[59,500,139],{"class":138},[59,502,503],{"class":142}," { transformImgixAssetUrls } ",[59,505,146],{"class":138},[59,507,149],{"class":69},[59,509,510],{"class":61,"line":152},[59,511,156],{"emptyLinePlaceholder":155},[59,513,514,516,518,520,522,525],{"class":61,"line":159},[59,515,162],{"class":138},[59,517,166],{"class":165},[59,519,169],{"class":138},[59,521,172],{"class":138},[59,523,524],{"class":65}," fetchCmsData",[59,526,279],{"class":142},[59,528,529],{"class":61,"line":190},[59,530,156],{"emptyLinePlaceholder":155},[59,532,533,535,537,539,542],{"class":61,"line":195},[59,534,162],{"class":138},[59,536,200],{"class":165},[59,538,169],{"class":138},[59,540,541],{"class":65}," transformImgixAssetUrls",[59,543,208],{"class":142},[59,545,546,549,552],{"class":61,"line":211},[59,547,548],{"class":142},"  imgixDomain: ",[59,550,551],{"class":69},"\"my-source.imgix.net\"",[59,553,220],{"class":142},[59,555,556,558],{"class":61,"line":223},[59,557,226],{"class":142},[59,559,229],{"class":69},[59,561,562],{"class":61,"line":232},[59,563,235],{"class":142},[123,565,567],{"id":566},"storyblok","Storyblok",[50,569,571],{"className":129,"code":570,"language":131,"meta":55,"style":55},"import { transformCmsAssetUrls } from \"@synchronized-studio\u002Fresponse-transformer\"\n\nconst response = await fetch(`https:\u002F\u002Fapi.storyblok.com\u002Fv2\u002Fcdn\u002Fstories?token=${token}`)\nconst data = await response.json()\n\nconst transformed = transformCmsAssetUrls(data, {\n  cms: \"storyblok\",\n  identifier: \"123456\",\n  cmsAssetsUrl: \"https:\u002F\u002Fyour-slug.cmsassets.com\"\n})\n",[17,572,573,584,588,615,633,637,650,660,670,677],{"__ignoreMap":55},[59,574,575,577,580,582],{"class":61,"line":62},[59,576,139],{"class":138},[59,578,579],{"class":142}," { transformCmsAssetUrls } ",[59,581,146],{"class":138},[59,583,149],{"class":69},[59,585,586],{"class":61,"line":152},[59,587,156],{"emptyLinePlaceholder":155},[59,589,590,592,595,597,599,602,604,607,610,613],{"class":61,"line":159},[59,591,162],{"class":138},[59,593,594],{"class":165}," response",[59,596,169],{"class":138},[59,598,172],{"class":138},[59,600,601],{"class":65}," fetch",[59,603,181],{"class":142},[59,605,606],{"class":69},"`https:\u002F\u002Fapi.storyblok.com\u002Fv2\u002Fcdn\u002Fstories?token=${",[59,608,609],{"class":142},"token",[59,611,612],{"class":69},"}`",[59,614,187],{"class":142},[59,616,617,619,621,623,625,628,631],{"class":61,"line":190},[59,618,162],{"class":138},[59,620,166],{"class":165},[59,622,169],{"class":138},[59,624,172],{"class":138},[59,626,627],{"class":142}," response.",[59,629,630],{"class":65},"json",[59,632,279],{"class":142},[59,634,635],{"class":61,"line":195},[59,636,156],{"emptyLinePlaceholder":155},[59,638,639,641,643,645,648],{"class":61,"line":211},[59,640,162],{"class":138},[59,642,200],{"class":165},[59,644,169],{"class":138},[59,646,647],{"class":65}," transformCmsAssetUrls",[59,649,208],{"class":142},[59,651,652,655,658],{"class":61,"line":223},[59,653,654],{"class":142},"  cms: ",[59,656,657],{"class":69},"\"storyblok\"",[59,659,220],{"class":142},[59,661,662,665,668],{"class":61,"line":232},[59,663,664],{"class":142},"  identifier: ",[59,666,667],{"class":69},"\"123456\"",[59,669,220],{"class":142},[59,671,673,675],{"class":61,"line":672},9,[59,674,226],{"class":142},[59,676,229],{"class":69},[59,678,680],{"class":61,"line":679},10,[59,681,235],{"class":142},[42,683],{},[45,685,687],{"id":686},"environment-variable","Environment variable",[14,689,690,691,694,695,698],{},"Instead of passing ",[17,692,693],{},"cmsAssetsUrl"," directly, you can set the ",[17,696,697],{},"CMS_ASSETS_URL"," environment variable:",[50,700,702],{"className":52,"code":701,"language":54,"meta":55,"style":55},"CMS_ASSETS_URL=https:\u002F\u002Fyour-slug.cmsassets.com\n",[17,703,704],{"__ignoreMap":55},[59,705,706,708,711],{"class":61,"line":62},[59,707,697],{"class":142},[59,709,710],{"class":138},"=",[59,712,713],{"class":69},"https:\u002F\u002Fyour-slug.cmsassets.com\n",[14,715,716,717,720,721,724],{},"The transformer reads this automatically. In production, ",[17,718,719],{},"http:\u002F\u002F"," URLs are upgraded to ",[17,722,723],{},"https:\u002F\u002F",".",[42,726],{},[45,728,730],{"id":729},"automating-with-the-cli-agent","Automating with the CLI Agent",[14,732,733,734,738],{},"Instead of adding transformer calls manually, you can use the ",[34,735,737],{"href":736},"\u002Fdocs\u002Fagent","CLI Agent"," to scan your project and patch files automatically:",[50,740,742],{"className":52,"code":741,"language":54,"meta":55,"style":55},"npx @synchronized-studio\u002Fcmsassets-agent init\n",[17,743,744],{"__ignoreMap":55},[59,745,746,749,752],{"class":61,"line":62},[59,747,748],{"class":65},"npx",[59,750,751],{"class":69}," @synchronized-studio\u002Fcmsassets-agent",[59,753,754],{"class":69}," init\n",[14,756,757,758,760],{},"The agent detects your framework and CMS, installs the transformer, and patches your source files. See ",[34,759,737],{"href":736}," for details.",[42,762],{},[45,764,766],{"id":765},"next-steps","Next steps",[81,768,769,776,782,787],{},[84,770,771,775],{},[34,772,774],{"href":773},"\u002Fdocs\u002Fgetting-started","Getting Started"," — Full setup walkthrough",[84,777,778,781],{},[34,779,780],{"href":36},"cmsassets-core SDK"," — The full API proxy + asset proxy integration",[84,783,784,786],{},[34,785,737],{"href":736}," — Automate transformer integration",[84,788,789,793],{},[34,790,792],{"href":791},"\u002Fdocs\u002Fhow-it-works","How It Works"," — Understand the proxy architecture",[795,796,797],"style",{},"html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}",{"title":55,"searchDepth":152,"depth":152,"links":799},[800,801,802,810,811,812],{"id":47,"depth":152,"text":48},{"id":78,"depth":152,"text":79},{"id":120,"depth":152,"text":121,"children":803},[804,805,806,807,808,809],{"id":125,"depth":159,"text":126},{"id":238,"depth":159,"text":239},{"id":320,"depth":159,"text":321},{"id":400,"depth":159,"text":401},{"id":490,"depth":159,"text":491},{"id":566,"depth":159,"text":567},{"id":686,"depth":152,"text":687},{"id":729,"depth":152,"text":730},{"id":765,"depth":152,"text":766},"Rewrite CMS asset URLs in API responses — the lightweight asset-only integration path for any JavaScript framework.","md",{},"\u002Fdocs\u002Fresponse-transformer",{"title":5,"description":813},"docs\u002Fresponse-transformer","-7Km5CZLRoIQA_GgDmmskHFPWSE21HbcYMQHzWzTnPo",1777579477862]