CINXE.COM

<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="preload" href="/_next/static/media/a34f9d1faa5f3315-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="stylesheet" href="/_next/static/css/933c6f782897b379.css" data-precedence="next"/><link rel="preload" href="/_next/static/chunks/webpack-0d86c6ee39f56284.js" as="script" fetchPriority="low"/><script src="/_next/static/chunks/fd9d1056-0c5e6aafc398dd49.js" async=""></script><script src="/_next/static/chunks/864-3d47b83f5aa5c3ee.js" async=""></script><script src="/_next/static/chunks/main-app-8f13c08947745519.js" async=""></script><title>GraphQL + Fetch API - Episode #10</title><meta name="description" content="Screencasts teaching you how to build apps and backends with GraphQL."/><meta property="og:description" content="Execute GraphQL queries and mutations using the fetch API."/><meta property="og:url" content="https://graphql.wtf/10-graphql-fetch-api"/><meta property="og:site_name" content="GraphQL WTF"/><meta property="og:image" content="https://graphql.wtf/episodes/10-graphql-fetch-api.png"/><meta property="og:image:width" content="1920"/><meta property="og:image:height" content="1080"/><meta property="og:type" content="video.episode"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:description" content="Execute GraphQL queries and mutations using the fetch API."/><meta name="twitter:image" content="https://graphql.wtf/episodes/10-graphql-fetch-api.png"/><meta name="twitter:image:width" content="1920"/><meta name="twitter:image:height" content="1080"/><meta name="next-size-adjust"/><script src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js" noModule=""></script></head><body class="__variable_36bd41"><header class="max-w-7xl mx-auto p-6 md:py-10 z-50 relative"><nav class="flex items-center justify-between" aria-label="Global"><div class="flex lg:flex-1"><a class="-m-1.5 p-1.5 text-black" href="/"><span class="sr-only">graphql.wtf</span><img alt="GraphQL WTF" loading="lazy" width="265" height="60" decoding="async" data-nimg="1" class="h-9 w-auto fill-current" style="color:transparent" src="/_next/static/media/logo.b455edfe.svg"/></a></div><div class="flex lg:hidden"><button type="button" class="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700"><span class="sr-only">Open main menu</span><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"></path></svg></button></div><div class="hidden lg:flex lg:gap-x-12"><a class="text-sm font-semibold leading-6 text-black hover:text-primary" href="/">Free Episodes</a><a class="text-sm font-semibold leading-6 text-black hover:text-primary" href="/training">Training</a><a class="text-sm font-semibold leading-6 text-black hover:text-primary" href="/about">About</a></div><div class="hidden space-x-6 lg:flex lg:flex-1 lg:justify-end"></div></nav><div style="position:fixed;top:1px;left:1px;width:1px;height:0;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0;display:none"></div></header><div class="relative z-20"><div class="mx-auto max-w-5xl"><div class="space-y-6 py-6 md:py-12 px-6"><div class="relative z-20 flex aspect-video items-center justify-center overflow-hidden bg-black md:rounded-md shadow-2xl"><template data-dgst="NEXT_DYNAMIC_NO_SSR_CODE"></template></div></div></div><div class="mx-auto max-w-3xl space-y-6 md:space-y-12 px-6"><div class="space-y-3 text-center"><h1 class="text-2xl font-bold tracking-tight text-black sm:text-3xl lg:text-4xl">GraphQL + Fetch API</h1><p class="flex items-center justify-center space-x-3 text-sm font-medium text-primary"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" class="h-5 w-5 text-primary"><path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5"></path></svg><span>4 Oct 2021</span></p></div><div class="mx-auto max-w-3xl"><div class="prose max-w-none"><ul> <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API">Fetch API (MDN)</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch">Using Fetch (MDN)</a></li> <li><a href="https://www.npmjs.com/package/axios">axios</a></li> <li><a href="https://www.npmjs.com/package/node-fetch">node-fetch</a></li> </ul> <pre><code class="language-js">const query = ` query GetCartById($id: ID!) { cart(id: $id) { totalItems subTotal { amount formatted } items { id name quantity unitTotal { formatted } } } } `; const variables = { id: "ck5r8d5b500003f5o2aif0v2b", }; const body = JSON.stringify({ query, variables }); fetch("https://api.cartql.com", { method: "POST", headers: { "Content-Type": "application/json", }, body, }) .then((res) => res.json()) .then(({ data }) => console.log(data)); </code></pre> <pre><code class="language-js">const axios = require("axios"); const request = axios({ url: endpoint, method: "POST", headers: { "Content-Type": "application/json", }, data: body, }); request.then(({ data: { data } }) => console.log(data)); </code></pre></div></div></div></div><div class="fixed inset-0 z-0 h-full w-full bg-[radial-gradient(#e5e7eb_1px,transparent_1px)] [background-size:16px_16px] [mask-image:radial-gradient(ellipse_50%_50%_at_50%_50%,#000_70%,transparent_100%)]"></div><footer class="relative z-30"><div class="mx-auto mt-6 max-w-xl overflow-hidden border-t border-black/10 px-6 py-20 md:mt-12 lg:mt-32 lg:px-8"><div class="mt-10 flex justify-center space-x-10"><a href="https://www.tiktok.com/@graphqlwtf" class="text-black/50 transition hover:text-black/100" target="_blank" rel="noopener noreferrer"><span class="sr-only">TikTok</span><svg fill="currentColor" viewBox="0 0 24 24" class="h-6 w-6" aria-hidden="true"><path d="M16 8.24537V15.5C16 19.0899 13.0899 22 9.5 22C5.91015 22 3 19.0899 3 15.5C3 11.9101 5.91015 9 9.5 9C10.0163 9 10.5185 9.06019 11 9.17393V12.3368C10.5454 12.1208 10.0368 12 9.5 12C7.567 12 6 13.567 6 15.5C6 17.433 7.567 19 9.5 19C11.433 19 13 17.433 13 15.5V2H16C16 4.76142 18.2386 7 21 7V10C19.1081 10 17.3696 9.34328 16 8.24537Z"></path></svg></a><a href="https://x.com/notrab" class="text-black/50 transition hover:text-black/100" target="_blank" rel="noopener noreferrer"><span class="sr-only">Twitter</span><svg fill="currentColor" viewBox="0 0 20 20" class="h-6 w-6" aria-hidden="true"><path d="M15.2033 1.875H17.9599L11.9374 8.75833L19.0224 18.125H13.4749L9.12992 12.4442L4.15826 18.125H1.39992L7.84159 10.7625L1.04492 1.875H6.73326L10.6608 7.0675L15.2033 1.875ZM14.2358 16.475H15.7633L5.90326 3.43833H4.26409L14.2358 16.475Z"></path></svg></a><a href="https://github.com/notrab" class="text-black/50 transition hover:text-black/100" target="_blank" rel="noopener noreferrer"><span class="sr-only">GitHub</span><svg fill="currentColor" viewBox="0 0 24 24" class="h-6 w-6" aria-hidden="true"><path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"></path></svg></a><a href="https://www.youtube.com/@notrab" class="text-black/50 transition hover:text-black/100" target="_blank" rel="noopener noreferrer"><span class="sr-only">YouTube</span><svg fill="currentColor" viewBox="0 0 24 24" class="h-6 w-6" aria-hidden="true"><path fill-rule="evenodd" d="M19.812 5.418c.861.23 1.538.907 1.768 1.768C21.998 8.746 22 12 22 12s0 3.255-.418 4.814a2.504 2.504 0 0 1-1.768 1.768c-1.56.419-7.814.419-7.814.419s-6.255 0-7.814-.419a2.505 2.505 0 0 1-1.768-1.768C2 15.255 2 12 2 12s0-3.255.417-4.814a2.507 2.507 0 0 1 1.768-1.768C5.744 5 11.998 5 11.998 5s6.255 0 7.814.418ZM15.194 12 10 15V9l5.194 3Z" clip-rule="evenodd"></path></svg></a></div><p class="mt-10 text-center text-xs leading-5 text-black/50">漏 2023 GraphQL WTF. A LaunchMade Product.</p></div></footer><script src="/_next/static/chunks/webpack-0d86c6ee39f56284.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/_next/static/media/a34f9d1faa5f3315-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n2:HL[\"/_next/static/css/933c6f782897b379.css\",\"style\"]\n0:\"$L3\"\n"])</script><script>self.__next_f.push([1,"4:I{\"id\":6054,\"chunks\":[\"272:static/chunks/webpack-0d86c6ee39f56284.js\",\"971:static/chunks/fd9d1056-0c5e6aafc398dd49.js\",\"864:static/chunks/864-3d47b83f5aa5c3ee.js\"],\"name\":\"\",\"async\":false}\n6:I{\"id\":1729,\"chunks\":[\"272:static/chunks/webpack-0d86c6ee39f56284.js\",\"971:static/chunks/fd9d1056-0c5e6aafc398dd49.js\",\"864:static/chunks/864-3d47b83f5aa5c3ee.js\"],\"name\":\"\",\"async\":false}\n3:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/933c6f782897b379.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefi"])</script><script>self.__next_f.push([1,"ned\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"WzAyh6Z0O-2BGDR2evepo\",\"assetPrefix\":\"\",\"initialCanonicalUrl\":\"/episodes/10-graphql-fetch-api\",\"initialTree\":[\"\",{\"children\":[\"episodes\",{\"children\":[[\"slug\",\"10-graphql-fetch-api\",\"d\"],{\"children\":[\"__PAGE__\",{}]}]}]},\"$undefined\",\"$undefined\",true],\"initialHead\":[false,\"$L5\"],\"globalErrorComponent\":\"$6\",\"children\":[null,\"$L7\",null]}]]\n"])</script><script>self.__next_f.push([1,"8:I{\"id\":7569,\"chunks\":[\"929:static/chunks/929-45f107726df16acb.js\",\"185:static/chunks/app/layout-5705818bbbb668f9.js\"],\"name\":\"Header\",\"async\":false}\n9:I{\"id\":1443,\"chunks\":[\"272:static/chunks/webpack-0d86c6ee39f56284.js\",\"971:static/chunks/fd9d1056-0c5e6aafc398dd49.js\",\"864:static/chunks/864-3d47b83f5aa5c3ee.js\"],\"name\":\"\",\"async\":false}\na:I{\"id\":8639,\"chunks\":[\"272:static/chunks/webpack-0d86c6ee39f56284.js\",\"971:static/chunks/fd9d1056-0c5e6aafc398dd49.js\",\"864:static/chunks/864-3d47b83f5aa5c3ee.js\"],\"nam"])</script><script>self.__next_f.push([1,"e\":\"\",\"async\":false}\nd:I{\"id\":3861,\"chunks\":[\"929:static/chunks/929-45f107726df16acb.js\",\"185:static/chunks/app/layout-5705818bbbb668f9.js\"],\"name\":\"Analytics\",\"async\":false}\n"])</script><script>self.__next_f.push([1,"7:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"__variable_36bd41\",\"children\":[[\"$\",\"$L8\",null,{}],[\"$\",\"$L9\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"loading\":\"$undefined\",\"loadingStyles\":\"$undefined\",\"hasLoading\":false,\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"template\":[\"$\",\"$La\",null,{}],\"templateStyles\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"childProp\":{\"current\":[\"$\",\"$L9\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"episodes\",\"children\"],\"loading\":\"$undefined\",\"loadingStyles\":\"$undefined\",\"hasLoading\":false,\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"template\":[\"$\",\"$La\",null,{}],\"templateStyles\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"childProp\":{\"current\":[\"$\",\"$L9\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"episodes\",\"children\",[\"slug\",\"10-graphql-fetch-api\",\"d\"],\"children\"],\"loading\":\"$undefined\",\"loadingStyles\":\"$undefined\",\"hasLoading\":false,\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"template\":[\"$\",\"$La\",null,{}],\"templateStyles\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"childProp\":{\"current\":[\"$Lb\",\"$Lc\",null],\"segment\":\"__PAGE__\"},\"styles\":[]}],\"segment\":[\"slug\",\"10-graphql-fetch-api\",\"d\"]},\"styles\":[]}],\"segment\":\"episodes\"},\"styles\":[]}],[\"$\",\"footer\",null,{\"className\":\"relative z-30\",\"children\":[\"$\",\"div\",null,{\"className\":\"mx-auto mt-6 max-w-xl overflow-hidden border-t border-black/10 px-6 py-20 md:mt-12 lg:mt-32 lg:px-8\",\"children\":[[\"$\",\"div\",null,{\"className\":\"mt-10 flex justify-center space-x-10\",\"children\":[[\"$\",\"a\",\"TikTok\",{\"href\":\"https://www.tiktok.com/@graphqlwtf\",\"className\":\"text-black/50 transition hover:text-black/100\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"children\":[[\"$\",\"span\",null,{\"className\":\"sr-only\",\"children\":\"TikTok\"}],[\"$\",\"svg\",null,{\"fill\":\"currentColor\",\"viewBox\":\"0 0 24 24\",\"className\":\"h-6 w-6\",\"aria-hidden\":\"true\",\"children\":[\"$\",\"path\",null,{\"d\":\"M16 8.24537V15.5C16 19.0899 13.0899 22 9.5 22C5.91015 22 3 19.0899 3 15.5C3 11.9101 5.91015 9 9.5 9C10.0163 9 10.5185 9.06019 11 9.17393V12.3368C10.5454 12.1208 10.0368 12 9.5 12C7.567 12 6 13.567 6 15.5C6 17.433 7.567 19 9.5 19C11.433 19 13 17.433 13 15.5V2H16C16 4.76142 18.2386 7 21 7V10C19.1081 10 17.3696 9.34328 16 8.24537Z\"}]}]]}],[\"$\",\"a\",\"Twitter\",{\"href\":\"https://x.com/notrab\",\"className\":\"text-black/50 transition hover:text-black/100\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"children\":[[\"$\",\"span\",null,{\"className\":\"sr-only\",\"children\":\"Twitter\"}],[\"$\",\"svg\",null,{\"fill\":\"currentColor\",\"viewBox\":\"0 0 20 20\",\"className\":\"h-6 w-6\",\"aria-hidden\":\"true\",\"children\":[\"$\",\"path\",null,{\"d\":\"M15.2033 1.875H17.9599L11.9374 8.75833L19.0224 18.125H13.4749L9.12992 12.4442L4.15826 18.125H1.39992L7.84159 10.7625L1.04492 1.875H6.73326L10.6608 7.0675L15.2033 1.875ZM14.2358 16.475H15.7633L5.90326 3.43833H4.26409L14.2358 16.475Z\"}]}]]}],[\"$\",\"a\",\"GitHub\",{\"href\":\"https://github.com/notrab\",\"className\":\"text-black/50 transition hover:text-black/100\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"children\":[[\"$\",\"span\",null,{\"className\":\"sr-only\",\"children\":\"GitHub\"}],[\"$\",\"svg\",null,{\"fill\":\"currentColor\",\"viewBox\":\"0 0 24 24\",\"className\":\"h-6 w-6\",\"aria-hidden\":\"true\",\"children\":[\"$\",\"path\",null,{\"fillRule\":\"evenodd\",\"d\":\"M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z\",\"clipRule\":\"evenodd\"}]}]]}],[\"$\",\"a\",\"YouTube\",{\"href\":\"https://www.youtube.com/@notrab\",\"className\":\"text-black/50 transition hover:text-black/100\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"children\":[[\"$\",\"span\",null,{\"className\":\"sr-only\",\"children\":\"YouTube\"}],[\"$\",\"svg\",null,{\"fill\":\"currentColor\",\"viewBox\":\"0 0 24 24\",\"className\":\"h-6 w-6\",\"aria-hidden\":\"true\",\"children\":[\"$\",\"path\",null,{\"fillRule\":\"evenodd\",\"d\":\"M19.812 5.418c.861.23 1.538.907 1.768 1.768C21.998 8.746 22 12 22 12s0 3.255-.418 4.814a2.504 2.504 0 0 1-1.768 1.768c-1.56.419-7.814.419-7.814.419s-6.255 0-7.814-.419a2.505 2.505 0 0 1-1.768-1.768C2 15.255 2 12 2 12s0-3.255.417-4.814a2.507 2.507 0 0 1 1.768-1.768C5.744 5 11.998 5 11.998 5s6.255 0 7.814.418ZM15.194 12 10 15V9l5.194 3Z\",\"clipRule\":\"evenodd\"}]}]]}]]}],[\"$\",\"p\",null,{\"className\":\"mt-10 text-center text-xs leading-5 text-black/50\",\"children\":\"漏 2023 GraphQL WTF. A LaunchMade Product.\"}]]}]}],[\"$\",\"$Ld\",null,{}]]}]}]\n"])</script><script>self.__next_f.push([1,"5:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"1\",{\"children\":\"GraphQL + Fetch API - Episode #10\"}],[\"$\",\"meta\",\"2\",{\"name\":\"description\",\"content\":\"Screencasts teaching you how to build apps and backends with GraphQL.\"}],[\"$\",\"meta\",\"3\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"4\",{\"property\":\"og:description\",\"content\":\"Execute GraphQL queries and mutations using the fetch API.\"}],[\"$\",\"meta\",\"5\",{\"property\":\"og:url\",\"content\":\"https://graphql.wtf/10-graphql-fetch-api\"}],[\"$\",\"meta\",\"6\",{\"property\":\"og:site_name\",\"content\":\"GraphQL WTF\"}],[\"$\",\"meta\",\"7\",{\"property\":\"og:image\",\"content\":\"https://graphql.wtf/episodes/10-graphql-fetch-api.png\"}],[\"$\",\"meta\",\"8\",{\"property\":\"og:image:width\",\"content\":\"1920\"}],[\"$\",\"meta\",\"9\",{\"property\":\"og:image:height\",\"content\":\"1080\"}],[\"$\",\"meta\",\"10\",{\"property\":\"og:type\",\"content\":\"video.episode\"}],[\"$\",\"meta\",\"11\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"12\",{\"name\":\"twitter:description\",\"content\":\"Execute GraphQL queries and mutations using the fetch API.\"}],[\"$\",\"meta\",\"13\",{\"name\":\"twitter:image\",\"content\":\"https://graphql.wtf/episodes/10-graphql-fetch-api.png\"}],[\"$\",\"meta\",\"14\",{\"name\":\"twitter:image:width\",\"content\":\"1920\"}],[\"$\",\"meta\",\"15\",{\"name\":\"twitter:image:height\",\"content\":\"1080\"}],[\"$\",\"meta\",\"16\",{\"name\":\"next-size-adjust\"}]]\n"])</script><script>self.__next_f.push([1,"e:I{\"id\":5916,\"chunks\":[\"330:static/chunks/app/episodes/[slug]/page-046c76f880a7688b.js\"],\"name\":\"\",\"async\":false}\n"])</script><script>self.__next_f.push([1,"c:[[\"$\",\"div\",null,{\"className\":\"relative z-20\",\"children\":[[\"$\",\"div\",null,{\"className\":\"mx-auto max-w-5xl\",\"children\":[\"$\",\"div\",null,{\"className\":\"space-y-6 py-6 md:py-12 px-6\",\"children\":[\"$\",\"$Le\",null,{\"video\":\"https://www.youtube.com/watch?v=Jc4RLVonQfg\"}]}]}],[\"$\",\"div\",null,{\"className\":\"mx-auto max-w-3xl space-y-6 md:space-y-12 px-6\",\"children\":[[\"$\",\"div\",null,{\"className\":\"space-y-3 text-center\",\"children\":[[\"$\",\"h1\",null,{\"className\":\"text-2xl font-bold tracking-tight text-black sm:text-3xl lg:text-4xl\",\"children\":\"GraphQL + Fetch API\"}],[\"$\",\"p\",null,{\"className\":\"flex items-center justify-center space-x-3 text-sm font-medium text-primary\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"fill\":\"none\",\"viewBox\":\"0 0 24 24\",\"strokeWidth\":1.5,\"stroke\":\"currentColor\",\"aria-hidden\":\"true\",\"aria-labelledby\":\"$undefined\",\"className\":\"h-5 w-5 text-primary\",\"children\":[null,[\"$\",\"path\",null,{\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"d\":\"M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5\"}]]}],[\"$\",\"span\",null,{\"children\":\"4 Oct 2021\"}]]}]]}],[\"$\",\"div\",null,{\"className\":\"mx-auto max-w-3xl\",\"children\":[\"$\",\"div\",null,{\"className\":\"prose max-w-none\",\"children\":[[\"$\",\"ul\",null,{\"children\":[\"\\n\",[\"$\",\"li\",null,{\"children\":[\"$\",\"a\",null,{\"href\":\"https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API\",\"children\":\"Fetch API (MDN)\"}]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[\"$\",\"a\",null,{\"href\":\"https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch\",\"children\":\"Using Fetch (MDN)\"}]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[\"$\",\"a\",null,{\"href\":\"https://www.npmjs.com/package/axios\",\"children\":\"axios\"}]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[\"$\",\"a\",null,{\"href\":\"https://www.npmjs.com/package/node-fetch\",\"children\":\"node-fetch\"}]}],\"\\n\"]}],\"\\n\",[\"$\",\"pre\",null,{\"children\":[\"$\",\"code\",null,{\"className\":\"language-js\",\"children\":\"const query = `\\n\\tquery GetCartById($id: ID!) {\\n\\t\\tcart(id: $id) {\\n\\t\\t\\ttotalItems\\n\\t\\t\\tsubTotal {\\n\\t\\t\\t\\tamount\\n\\t\\t\\t\\tformatted\\n\\t\\t\\t}\\n\\t\\t\\titems {\\n\\t\\t\\t\\tid\\n\\t\\t\\t\\tname\\n\\t\\t\\t\\tquantity\\n\\t\\t\\t\\tunitTotal {\\n\\t\\t\\t\\t\\tformatted\\n\\t\\t\\t\\t}\\n\\t\\t\\t}\\n\\t\\t}\\n\\t}\\n`;\\n\\nconst variables = {\\n id: \\\"ck5r8d5b500003f5o2aif0v2b\\\",\\n};\\n\\nconst body = JSON.stringify({ query, variables });\\n\\nfetch(\\\"https://api.cartql.com\\\", {\\n method: \\\"POST\\\",\\n headers: {\\n \\\"Content-Type\\\": \\\"application/json\\\",\\n },\\n body,\\n})\\n .then((res) =\u003e res.json())\\n .then(({ data }) =\u003e console.log(data));\\n\"}]}],\"\\n\",[\"$\",\"pre\",null,{\"children\":[\"$\",\"code\",null,{\"className\":\"language-js\",\"children\":\"const axios = require(\\\"axios\\\");\\n\\nconst request = axios({\\n url: endpoint,\\n method: \\\"POST\\\",\\n headers: {\\n \\\"Content-Type\\\": \\\"application/json\\\",\\n },\\n data: body,\\n});\\n\\nrequest.then(({ data: { data } }) =\u003e console.log(data));\\n\"}]}]]}]}]]}]]}],[\"$\",\"div\",null,{\"className\":\"fixed inset-0 z-0 h-full w-full bg-[radial-gradient(#e5e7eb_1px,transparent_1px)] [background-size:16px_16px] [mask-image:radial-gradient(ellipse_50%_50%_at_50%_50%,#000_70%,transparent_100%)]\"}]]\n"])</script><script>self.__next_f.push([1,"b:null\n"])</script></body></html>