PageSourceSearch

https://smashawk.com/post-17/

html smashawk.com collected 2026-10-05 22:52:59 UTC 52,856 bytes, 99 lines download raw bytes

1<!DOCTYPE html><html lang="ja"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="ie=edge"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/><style id="typography.js">html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}progress{vertical-align:baseline}[hidden],template{display:none}a{background-color:transparent;}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit;font-weight:bolder}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}button,input,optgroup,select,textarea{font:inherit;margin:0}optgroup{font-weight:700}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}html{font:112.5%/1.45 'Helvetica Neue','Arial','Hiragino Kaku Gothic ProN','Hiragino Sans','Meiryo',sans-serif;box-sizing:border-box;overflow-y:scroll;}*{box-sizing:inherit;}*:before{box-sizing:inherit;}*:after{box-sizing:inherit;}body{color:hsla(0,0%,0%,0.8);font-family:'Helvetica Neue','Arial','Hiragino Kaku Gothic ProN','Hiragino Sans','Meiryo',sans-serif;font-weight:normal;word-wrap:break-word;font-kerning:normal;-moz-font-feature-settings:"kern", "liga", "clig", "calt";-ms-font-feature-settings:"kern", "liga", "clig", "calt";-webkit-font-feature-settings:"kern", "liga", "clig", "calt";font-feature-settings:"kern", "liga", "clig", "calt";}img{max-width:100%;margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1.45rem;}h1{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1.45rem;color:inherit;font-family:'Helvetica Neue','Arial','Hiragino Kaku Gothic ProN','Hiragino Sans','Meiryo',sans-serif;font-weight:600;text-rendering:optimizeLegibility;font-size:2rem;line-height:1.1;}h2{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1.45rem;color:inherit;font-family:'Helvetica Neue','Arial','Hiragino Kaku Gothic ProN','Hiragino Sans','Meiryo',sans-serif;font-weight:600;text-rendering:optimizeLegibility;font-size:1.51572rem;line-height:1.1;}h3{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1.45rem;color:inherit;font-family:'Helvetica Neue','Arial','Hiragino Kaku Gothic ProN','Hiragino Sans','Meiryo',sans-serif;font-weight:600;text-rendering:optimizeLegibility;font-size:1.31951rem;line-height:1.1;}h4{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1.45rem;color:inherit;font-family:'Helvetica Neue','Arial','Hiragino Kaku Gothic ProN','Hiragino Sans','Meiryo',sans-serif;font-weight:600;text-rendering:optimizeLegibility;font-size:1rem;line-height:1.1;}h5{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1.45rem;color:inherit;font-family:'Helvetica Neue','Arial','Hiragino Kaku Gothic ProN','Hiragino Sans','Meiryo',sans-serif;font-weight:600;text-rendering:optimizeLegibility;font-size:0.87055rem;line-height:1.1;}h6{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1.45rem;color:inherit;font-family:'Helvetica Neue','Arial','Hiragino Kaku Gothic ProN','Hiragino Sans','Meiryo',sans-serif;font-weight:600;text-rendering:optimizeLegibility;font-size:0.81225rem;line-height:1.1;}hgroup{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1.45rem;}ul{margin-left:1.45rem;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1.45rem;list-style-position:outside;list-style-image:none;}ol{margin-left:1.45rem;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1.45rem;list-style-position:outside;list-style-image:none;}dl{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1.45rem;}dd{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1.45rem;}p{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1.45rem;}figure{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1.45rem;}pre{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1.45rem;font-size:0.85rem;line-height:1.45rem;}table{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1.45rem;font-size:1rem;line-height:1.45rem;border-collapse:collapse;width:100%;}fieldset{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1.45rem;}blockquote{margin-left:1.45rem;margin-right:1.45rem;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1.45rem;}form{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1.45rem;}noscript{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1.45rem;}iframe{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1.45rem;}hr{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:calc(1.45rem - 1px);background:hsla(0,0%,0%,0.2);border:none;height:1px;}address{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1.45rem;}b{font-weight:bold;}strong{font-weight:bold;}dt{font-weight:bold;}th{font-weight:bold;}li{margin-bottom:calc(1.45rem / 2);}ol li{padding-left:0;}ul li{padding-left:0;}li > ol{margin-left:1.45rem;margin-bottom:calc(1.45rem / 2);margin-top:calc(1.45rem / 2);}li > ul{margin-left:1.45rem;margin-bottom:calc(1.45rem / 2);margin-top:calc(1.45rem / 2);}blockquote *:last-child{margin-bottom:0;}li *:last-child{margin-bottom:0;}p *:last-child{margin-bottom:0;}li > p{margin-bottom:calc(1.45rem / 2);}code{font-size:0.85rem;line-height:1.45rem;}kbd{font-size:0.85rem;line-height:1.45rem;}samp{font-size:0.85rem;line-height:1.45rem;}abbr{border-bottom:1px dotted hsla(0,0%,0%,0.5);
1cursor:help;}acronym{border-bottom:1px dotted hsla(0,0%,0%,0.5);cursor:help;}abbr[title]{border-bottom:1px dotted hsla(0,0%,0%,0.5);cursor:help;text-decoration:none;}thead{text-align:left;}td,th{text-align:left;border-bottom:1px solid hsla(0,0%,0%,0.12);font-feature-settings:"tnum";-moz-font-feature-settings:"tnum";-ms-font-feature-settings:"tnum";-webkit-font-feature-settings:"tnum";padding-left:0.96667rem;padding-right:0.96667rem;padding-top:0.725rem;padding-bottom:calc(0.725rem - 1px);}th:first-child,td:first-child{padding-left:0;}th:last-child,td:last-child{padding-right:0;}</style><meta name="theme-color" content="#3e7bf2"/><meta data-react-helmet="true" name="twitter:image" content="/ogp/post-17/thumbnail.png"/><meta data-react-helmet="true" name="twitter:description" content="使用バージョン  書き方 を使用することで実現できる。 エラーが出る場合 やなどのエラーが出る場合、のoptionの設定を見直す必要がありそう。 のオプションを指定している場合は、uri…"/><meta data-react-helmet="true" name="twitter:title" content="Apollo Clientでリクエストヘッダーに認証トークンを付与する方法"/><meta data-react-helmet="true" name="twitter:creator" content="@obake_fe"/><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"/><meta data-react-helmet="true" property="og:image" content="/ogp/post-17/thumbnail.png"/><meta data-react-helmet="true" property="og:description" content="使用バージョン  書き方 を使用することで実現できる。 エラーが出る場合 やなどのエラーが出る場合、のoptionの設定を見直す必要がありそう。 のオプションを指定している場合は、uri…"/><meta data-react-helmet="true" property="og:title" content="Apollo Clientでリクエストヘッダーに認証トークンを付与する方法"/><meta data-react-helmet="true" property="og:type" content="article"/><meta data-react-helmet="true" property="og:url" content="/post-17"/><meta data-react-helmet="true" name="application-name" content="Obake Engineer Blog"/><meta data-react-helmet="true" name="apple-mobile-web-app-title" content="Obake Engineer Blog"/><meta data-react-helmet="true" name="image" content="/ogp/post-17/thumbnail.png"/><meta data-react-helmet="true" name="description" content="使用バージョン  書き方 を使用することで実現できる。 エラーが出る場合 やなどのエラーが出る場合、のoptionの設定を見直す必要がありそう。 のオプションを指定している場合は、uri…"/><meta name="generator" content="Gatsby 4.14.1"/><style data-href="/styles.872dd7b86ed2f95de2a6.css" data-identity="gatsby-global-css">@font-face{font-display:swap;font-family:Open Sans;font-style:normal;font-weight:300;src:local("Open Sans Light "),local("Open Sans-Light"),url(/static/open-sans-latin-300-b871ad6e5cbe2a1c8c7362c81a234f93.woff2) format("woff2"),url(/static/open-sans-latin-300-38bcfba2c37aac23453faf21d14511fb.woff) format("woff")}@font-face{font-display:swap;font-family:Open Sans;font-style:italic;font-weight:300;src:local("Open Sans Light italic"),local("Open Sans-Lightitalic"),url(/static/open-sans-latin-300italic-b45d9997b704ab3daad1b5624eec1ad1.woff2) format("woff2"),url(/static/open-sans-latin-300italic-3ab0502d6136886180cdae3e714e30a3.woff) format("woff")}@font-face{font-display:swap;font-family:Open Sans;font-style:normal;font-weight:400;src:local("Open Sans Regular "),local("Open Sans-Regular"),url(/static/open-sans-latin-400-f57a62e9efddf6ace18b15572f81905b.woff2) format("woff2"),url(/static/open-sans-latin-400-347639ec49f4b2884a9657afded83ace.woff) format("woff")}@font-face{font-display:swap;font-family:Open Sans;font-style:italic;font-weight:400;src:local("Open Sans Regular italic"),local("Open Sans-Regularitalic"),url(/static/open-sans-latin-400italic-bb915319f59c02c348a615ad483772e7.woff2) format("woff2"),url(/static/open-sans-latin-400italic-56bdf84751634e8deaff10d1d68df316.woff) format("woff")}@font-face{font-display:swap;font-family:Open Sans;font-style:normal;font-weight:600;src:local("Open Sans SemiBold "),local("Open Sans-SemiBold"),url(/static/open-sans-latin-600-9526470852428b4340ed994462821463.woff2) format("woff2"),url(/static/open-sans-latin-600-7e06644bbdc83069cec8d396149da3ab.woff) format("woff")}@font-face{font-display:swap;font-family:Open Sans;font-style:italic;font-weight:600;src:local("Open Sans SemiBold italic"),local("Open Sans-SemiBolditalic"),url(/static/open-sans-latin-600italic-cc4bf5b2955147801c024b2b118f4a5c.woff2) format("woff2"),url(/static/open-sans-latin-600italic-8d513ad94829ef391cd18d4a83bcfc4b.woff) format("woff")}@font-face{font-display:swap;font-family:Open Sans;font-style:normal;font-weight:700;src:local("Open Sans Bold "),local("Open Sans-Bold"),url(/static/open-sans-latin-700-92425c623934facef057b0cfe2e13f95.woff2) format("woff2"),url(/static/open-sans-latin-700-f24f4bcef8a4a0eb6345d292b85dc7fe.woff) format("woff")}@font-face{font-display:swap;font-family:Open Sans;font-style:italic;font-weight:700;src:local("Open Sans Bold italic"),local("Open Sans-Bolditalic"),url(/static/open-sans-latin-700italic-2a0783bd1c6c1469558bfa573cfa0c0c.woff2) format("woff2"),url(/static/open-sans-latin-700italic-e961bdb476db6860f20ff571a84a55b0.woff) format("woff")}@font-face{font-display:swap;font-family:Open Sans;font-style:normal;font-weight:800;src:local("Open Sans ExtraBold "),local("Open Sans-ExtraBold"),url(/static/open-sans-latin-800-1666787ea3ff3941e7641817eb9edc94.woff2) format("woff2"),url(/static/open-sans-latin-800-8ab0bbdd48f276f4ba5652b27ae59210.woff) format("woff")}@font-face{font-display:swap;font-family:Open Sans;font-style:italic;font-weight:800;src:local("Open Sans ExtraBold italic"),local("Open Sans-ExtraBolditalic"),url(/static/open-sans-latin-800italic-b5bc26612cdf4d47affd6988bcdc8c0f.woff2) format("woff2"),url(/static/open-sans-latin-800italic-3d3bd0835c258f5bd0bce57bb1963a9c.woff) format("woff")}@font-face{font-display:swap;font-family:Candal;font-style:normal;font-weight:400;
1src:local("Candal Regular "),local("Candal-Regular"),url(/static/candal-latin-400-25abe661721809c63f4ba76e69abea2c.woff2) format("woff2"),url(/static/candal-latin-400-9f6a1258d28d37029dee38e1932643f6.woff) format("woff")}</style><title data-react-helmet="true">Apollo Clientでリクエストヘッダーに認証トークンを付与する方法</title>
1<script data-react-helmet="true" type="application/ld+json">[{"@context":"https://schema.org/","@type":"WebSite","@id":"https://smashawk.com/","url":"https://smashawk.com/","name":"Obake Engineer Blog","alternateName":"Obake Engineer Blog"}]</script>
1<script data-react-helmet="true" type="application/ld+json">[{"@context":"https://schema.org/","@type":"BlogPosting","@id":"/post-17","url":"/post-17","name":"Apollo Clientでリクエストヘッダーに認証トークンを付与する方法","alternateName":"Obake Engineer Blog","headline":"Apollo Clientでリクエストヘッダーに認証トークンを付与する方法","image":{"@type":"ImageObject","url":"/ogp/post-17/thumbnail.png"},"description":"使用バージョン  書き方 を使用することで実現できる。 エラーが出る場合 やなどのエラーが出る場合、のoptionの設定を見直す必要がありそう。 のオプションを指定している場合は、uri…","datePublished":"2023-04-20","dateModified":"2023-04-20","author":{"@type":"Person","name":"obake_fe"},"publisher":{"@type":"Organization","name":"obake_fe","logo":{"@type":"ImageObject","url":"https://smashawk.com/static/obake.png"}},"isPartOf":"https://smashawk.com/","mainEntityOfPage":{"@type":"WebSite","@id":"https://smashawk.com/"}}]</script>
1<style type="text/css">
2    .anchor.before {
3      position: absolute;
4      top: 0;
5      left: 0;
6      transform: translateX(-100%);
7      padding-right: 4px;
8    }
9    .anchor.after {
10      display: inline-block;
11      padding-left: 4px;
12    }
13    h1 .anchor svg,
14    h2 .anchor svg,
15    h3 .anchor svg,
16    h4 .anchor svg,
17    h5 .anchor svg,
18    h6 .anchor svg {
19      visibility: hidden;
20    }
21    h1:hover .anchor svg,
22    h2:hover .anchor svg,
23    h3:hover .anchor svg,
24    h4:hover .anchor svg,
25    h5:hover .anchor svg,
26    h6:hover .anchor svg,
27    h1 .anchor:focus svg,
28    h2 .anchor:focus svg,
29    h3 .anchor:focus svg,
30    h4 .anchor:focus svg,
31    h5 .anchor:focus svg,
32    h6 .anchor:focus svg {
33      visibility: visible;
34    }
35  </style>
35<script>
36    document.addEventListener("DOMContentLoaded", function(event) {
37      var hash = window.decodeURI(location.hash.replace('#', ''))
38      if (hash !== '') {
39        var element = document.getElementById(hash)
40        if (element) {
41          var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
42          var clientTop = document.documentElement.clientTop || document.body.clientTop || 0
43          var offset = element.getBoundingClientRect().top + scrollTop - clientTop
44          // Wait for the browser to finish rendering before scrolling.
45          setTimeout((function() {
46            window.scrollTo(0, offset - 16)
47          }), 0)
48        }
49      }
50    })
51  </script>
51<style>.gatsby-image-wrapper{position:relative;overflow:hidden}.gatsby-image-wrapper picture.object-fit-polyfill{position:static!important}.gatsby-image-wrapper img{bottom:0;height:100%;left:0;margin:0;max-width:none;padding:0;position:absolute;right:0;top:0;width:100%;object-fit:cover}.gatsby-image-wrapper [data-main-image]{opacity:0;transform:translateZ(0);transition:opacity .25s linear;will-change:opacity}.gatsby-image-wrapper-constrained{display:inline-block;vertical-align:top}</style><noscript><style>.gatsby-image-wrapper noscript [data-main-image]{opacity:1!important}.gatsby-image-wrapper [data-placeholder-image]{opacity:0!important}</style></noscript>
51<script type="module">const e="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;e&&document.body.addEventListener("load",(function(e){const t=e.target;if(void 0===t.dataset.mainImage)return;if(void 0===t.dataset.gatsbyImageSsr)return;let a=null,n=t;for(;null===a&&n;)void 0!==n.parentNode.dataset.gatsbyImageWrapper&&(a=n.parentNode),n=n.parentNode;const o=a.querySelector("[data-placeholder-image]"),r=new Image;r.src=t.currentSrc,r.decode().catch((()=>{})).then((()=>{t.style.opacity=1,o&&(o.style.opacity=0,o.style.transition="opacity 500ms linear")}))}),!0);</script>
51<link rel="sitemap" type="application/xml" href="/sitemap/sitemap-index.xml"/><link rel="icon" href="/favicon-32x32.png?v=80d7d85ae01b4a032fa074d240d6d513" type="image/png"/><link rel="manifest" href="/manifest.webmanifest" crossorigin="anonymous"/><link rel="apple-touch-icon" sizes="48x48" href="/icons/icon-48x48.png?v=80d7d85ae01b4a032fa074d240d6d513"/><link rel="apple-touch-icon" sizes="72x72" href="/icons/icon-72x72.png?v=80d7d85ae01b4a032fa074d240d6d513"/><link rel="apple-touch-icon" sizes="96x96" href="/icons/icon-96x96.png?v=80d7d85ae01b4a032fa074d240d6d513"/><link rel="apple-touch-icon" sizes="144x144" href="/icons/icon-144x144.png?v=80d7d85ae01b4a032fa074d240d6d513"/><link rel="apple-touch-icon" sizes="192x192" href="/icons/icon-192x192.png?v=80d7d85ae01b4a032fa074d240d6d513"/><link rel="apple-touch-icon" sizes="256x256" href="/icons/icon-256x256.png?v=80d7d85ae01b4a032fa074d240d6d513"/><link rel="apple-touch-icon" sizes="384x384" href="/icons/icon-384x384.png?v=80d7d85ae01b4a032fa074d240d6d513"/><link rel="apple-touch-icon" sizes="512x512" href="/icons/icon-512x512.png?v=80d7d85ae01b4a032fa074d240d6d513"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><style data-emotion="css-global jn4vwf">*,*:before,*:after{box-sizing:inherit;}html{text-rendering:optimizeLegibility;overflow-x:hidden;box-sizing:border-box;-ms-overflow-style:scrollbar;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}html,body{width:100%;height:100%;margin:0;padding:0;font-size:16px;}body{color:#fff;background-color:#282c34;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}a{-webkit-transition:color 0.5s;transition:color 0.5s;-webkit-text-decoration:none;text-decoration:none;}a:hover{-webkit-text-decoration:none;text-decoration:none;}h1{font-family:"Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;}.headroom-wrapper{position:fixed;width:100%;z-index:2000;top:0;}.headroom{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;width:100%;padding:1rem 1.5rem;}.headroom svg{height:2.5rem;}.headroom svg g{fill:#fff;}.headroom--unfixed{position:relative;-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);-webkit-transition:all 0.25s ease-in-out;transition:all 0.25s ease-in-out;}.headroom--scrolled{-webkit-transition:all 0.25s ease-in-out;transition:all 0.25s ease-in-out;}.headroom--unpinned{position:fixed;-webkit-transform:translateY(-100%);-moz-transform:translateY(-100%);-ms-transform:translateY(-100%);transform:translateY(-100%);-webkit-transition:all 0.25s ease-in-out;transition:all 0.25s ease-in-out;}.headroom--pinned{position:fixed;-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);-webkit-transition:all 0.25s ease-in-out;transition:all 0.25s ease-in-out;background-color:#f0f0f0;box-shadow:0 5px 30px rgba(0, 0, 0, 0.2);padding-top:0.75rem;padding-bottom:0.75rem;}.headroom--pinned nav a{color:#333438;}.headroom--pinned nav a:hover{border-color:#333438;color:#333438;}.headroom--pinned nav a:focus{color:#333438;}.headroom--pinned svg{height:2.5rem;}.headroom--pinned svg g{fill:#333438;}.headroom--pinned span{color:#333438;}.modalSearchWindow{color:#333438;background-color:#fff;z-index:965;margin:0 auto 0;padding:20px 28px;inset:356px -768px 0 0;position:absolute;border:1px solid rgb(204, 204, 204);overflow:auto;border-radius:4px;outline:none;width:400px;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;box-shadow:0 5px 10px rgba(0, 0, 0, 0.25);}@media (max-width: 1400px){.modalSearchWindow{inset:356px 110px 0 auto;}}@media (max-width: 1000px){.modalSearchWindow{display:none;}}.modalNone{display:none;}.modalSearchOverlay{z-index:960;top:0px;left:0px;right:0px;bottom:0px;background-color:rgba(0, 0, 0, 0.75);}</style><style data-emotion="css 13bnfn5">.css-13bnfn5{position:-webkit-sticky;position:sticky;top:0;z-index:100;background:linear-gradient(45deg, #3e5fbc 0%, #284187 100%);height:60px;}</style><header class="css-13bnfn5 eupelus3"><style data-emotion="css 1cilv8y">.css-1cilv8y{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;
51-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%;color:#fff;width:100%;padding:0 4rem;}@media (max-width: 700px){.css-1cilv8y{padding:0 2rem;}}</style><div class="css-1cilv8y eupelus2"><style data-emotion="css 1n37m1k">.css-1n37m1k{font-size:2rem;margin:0;}@media (max-width: 700px){.css-1n37m1k{font-size:1.4rem;}}</style><h1 class="css-1n37m1k eupelus0"><style data-emotion="css ywdwwj">.css-ywdwwj{font-weight:700;color:#fff;}</style><a class="css-ywdwwj eupelus1" href="/">Obake Engineer Blog</a></h1></div></header><style data-emotion="css 3hu70p">.css-3hu70p{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;padding:2rem;}@media (max-width: 1000px){.css-3hu70p{display:block;}}@media (max-width: 700px){.css-3hu70p{padding:1.2rem;}}</style><main class="css-3hu70p e3ruyzc0"><div><style data-emotion="css bohgtm">.css-bohgtm{padding:3rem;max-width:60rem;-webkit-flex:1;-ms-flex:1;flex:1;background-color:#2e3246;border-radius:0.4rem;}@media (max-width: 900px){.css-bohgtm{width:100%;padding:1.4rem;}}.css-bohgtm+section{margin-top:1rem;}</style><section class="css-bohgtm ezda9f0"><style data-emotion="css 1htfzi6">.css-1htfzi6{font-size:4rem;}@media (max-width: 1000px){.css-1htfzi6{font-size:3rem;}}@media (max-width: 700px){.css-1htfzi6{font-size:2rem;}}</style><h2 class="css-1htfzi6 e1otfdcd6">Apollo Clientでリクエストヘッダーに認証トークンを付与する方法</h2><style data-emotion="css dcdg0b">.css-dcdg0b{width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:end;-webkit-box-align:end;-ms-flex-align:end;align-items:end;margin:4rem 0;}@media (max-width: 700px){.css-dcdg0b{margin:0;}}</style><div class="css-dcdg0b e1otfdcd5"><style data-emotion="css 1yogf1u">.css-1yogf1u{margin:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:left;-ms-flex-pack:left;-webkit-justify-content:left;justify-content:left;}.css-1yogf1u a{margin:0 1rem 1rem 0;color:#2e3246;padding:0.3rem 0.6rem;background:#cecece;border-radius:10px;}.css-1yogf1u a:hover{color:#f0f0f0;background:#3e5fbc;border:#3e5fbc;}@media (max-width: 700px){.css-1yogf1u a{margin:0 0.5rem 0.5rem 0;font-size:0.7rem;padding:0.2rem 0.4rem;}}</style><div class="css-1yogf1u e1gs9hhb0"><a href="/tags/GraphQL"><span>GraphQL</span></a><a href="/tags/Apollo"><span>Apollo</span></a></div><style data-emotion="css el0lxr">.css-el0lxr{font-size:1rem;margin:0;}</style><p class="css-el0lxr e1otfdcd4">2023/04/19</p></div><style data-emotion="css au315m">.css-au315m p>code,.css-au315m li>code{color:#f8f8f2;background:#131316;font-family:'Helvetica Neue',Arial,'Hiragino Kaku Gothic ProN','Hiragino Sans',Meiryo,sans-serif;text-align:left;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;padding:0.4em 0.5em;margin:0.5em 0;overflow:auto;border-radius:0.3em;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}.css-au315m code[class*='language-'],.css-au315m pre[class*='language-']{color:#f8f8f2;background:none;font-family:'Helvetica Neue',Arial,'Hiragino Kaku Gothic ProN','Hiragino Sans',Meiryo,sans-serif;text-align:left;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;font-size:1rem;}.css-au315m pre[class*='language-']{padding:1.8rem 1em 1em;margin:0 0 1.5rem;overflow:auto;border-radius:0.3em;}.css-au315m pre[class*='language-']::-webkit-scrollbar-thumb{background:#3498db;}.css-au315m pre[class*='language-']::-webkit-scrollbar-track{background:#4b4e57;}.css-au315m pre[class*='language-']::-webkit-scrollbar{width:12px;height:12px;}.css-au315m pre[class*='language-']{background:#131316;}.css-au315m p>code[class*='language-'],.css-au315m li>code[class*='language-']{border-radius:0.3em;background:rgba(52, 152, 219, 0.2);color:#fff;bottom:2px;position:relative;font-size:1rem;}.css-au315m .token.operator{color:#bc78d7;}.css-au315m .token.comment,.css-au315m .token.prolog,.css-au315m .token.doctype,.css-au315m .token.cdata{color:slategray;}.css-au315m .token.punctuation{color:#7ad7e2;}.css-au315m .namespace{opacity:0.7;}.css-au315m .token.property,.css-au315m .token.tag,.css-au315m .token.constant,.css-au315m .token.symbol,.css-au315m .token.deleted{color:#ef514f;}.css-au315m .token.boolean,.css-au315m .token.number{color:#ae81ff;}.css-au315m .token.selector,.css-au315m .token.attr-name,.css-au315m .token.string,.css-au315m .token.char,.css-au315m .token.builtin,.css-au315m .token.inserted{color:#e5db89;}.css-au315m .token.entity,.css-au315m .token.url,.css-au315m .language-css .token.string,.css-au315m .style .token.string,.css-au315m .token.variable{color:#f8f8f2;}.css-au315m .token.atrule,.css-au315m .token.attr-value,.css-au315m .token.class-name{color:#e6db74;}.css-au315m .token.function{color:#84c16a;}.css-au315m .token.keyword{color:#6095ea;}.css-au315m .token.regex,.css-au315m .token.important{color:#fd971f;}.css-au315m .token.important,.css-au315m .token.bold{font-weight:bold;}.css-au315m .token.italic{font-style:italic;}.css-au315m .token.entity{cursor:help;}.css-au315m .gatsby-highlight{margin-top:-20px;}.css-au315m .gatsby-code-title{display:block;position:relative;font-size:0.8rem;width:100%;left:1rem;}
51.css-au315m .gatsby-code-title span{display:inline;position:relative;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;color:#fff;background:rgba(52, 152, 219, 0.2);border-bottom-right-radius:0.3em;border-bottom-left-radius:0.3em;padding:3px;top:1px;}.css-au315m blockquote{border-left:5px solid #cecece;color:#cecece;margin-left:0;padding-left:1.45rem;}.css-au315m p,.css-au315m li{letter-spacing:-0.003em;--baseline-multiplier:0.179;--x-height-multiplier:0.35;font-size:1rem;line-height:2;}.css-au315m p code,.css-au315m li code{padding:0.2rem 0.5rem;margin:0.5rem 0;}.css-au315m a:not(.gatsby-resp-image-link):not(.anchor){color:#fff;box-shadow:inset 0 -2px 0 #3498db;border-bottom:1px solid #3498db;-webkit-transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);-webkit-text-decoration:none;text-decoration:none;}.css-au315m a:not(.gatsby-resp-image-link):not(.anchor):hover,.css-au315m a:not(.gatsby-resp-image-link):not(.anchor):focus{background:#3498db;color:#fff;}.css-au315m h1{font-weight:600;margin-top:3rem;}.css-au315m h2{font-weight:600;margin-top:5rem;margin-bottom:1.5rem;border-bottom:5px solid #fff;padding-bottom:6px;}@media (max-width: 700px){.css-au315m h2{margin-top:2rem;}}.css-au315m h3{margin-top:3rem;}.css-au315m h4{margin-top:3rem;}.css-au315m h1,.css-au315m h2,.css-au315m h3,.css-au315m h4,.css-au315m h5,.css-au315m h6{font-family:'Helvetica Neue',Arial,'Hiragino Kaku Gothic ProN','Hiragino Sans',Meiryo,sans-serif;position:relative;}.css-au315m h1 a,.css-au315m h2 a,.css-au315m h3 a,.css-au315m h4 a,.css-au315m h5 a,.css-au315m h6 a{box-shadow:none;border-bottom:none;}.css-au315m h1 a:hover,.css-au315m h2 a:hover,.css-au315m h3 a:hover,.css-au315m h4 a:hover,.css-au315m h5 a:hover,.css-au315m h6 a:hover,.css-au315m h1 a:focus,.css-au315m h2 a:focus,.css-au315m h3 a:focus,.css-au315m h4 a:focus,.css-au315m h5 a:focus,.css-au315m h6 a:focus{background:none;}.css-au315m h1:hover .anchor svg,.css-au315m h2:hover .anchor svg,.css-au315m h3:hover .anchor svg,.css-au315m h4:hover .anchor svg,.css-au315m h5:hover .anchor svg,.css-au315m h6:hover .anchor svg{opacity:0.8;}.css-au315m .windowIcon{width:16px;margin-left:4px;}</style><div class="css-au315m egq2bat0"><p>使用バージョン <code class="language-text">"@apollo/client": "^3.7.12"</code></p>
52<h2 id="書き方" style="position:relative;"><a href="#%E6%9B%B8%E3%81%8D%E6%96%B9" aria-label="書き方 permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>書き方</h2>
53<p><code class="language-text">ApolloLink</code>を使用することで実現できる。</p>
54<div class="gatsby-highlight" data-language="ts"><pre class="language-ts"><code class="language-ts"><span class="token keyword">import</span> <span class="token punctuation">{</span>
55  ApolloClient<span class="token punctuation">,</span>
56  ApolloLink<span class="token punctuation">,</span>
57  HttpLink<span class="token punctuation">,</span>
58  InMemoryCache<span class="token punctuation">,</span>
59<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"@apollo/client"</span><span class="token punctuation">;</span>
60
61<span class="token comment">// それぞれのリクエストのヘッダーに認証トークンを追加する</span>
62<span class="token comment">// https://www.apollographql.com/docs/react/api/link/introduction#stateless-links</span>
63<span class="token keyword">const</span> authLink <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">ApolloLink</span><span class="token punctuation">(</span><span class="token punctuation">(</span>operation<span class="token punctuation">,</span> forward<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
64  operation<span class="token punctuation">.</span><span class="token function">setContext</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">{</span> headers <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span>
65    headers<span class="token operator">:</span> <span class="token punctuation">{</span>
66      authorization<span class="token operator">:</span> <span class="token operator">&lt;</span>your access_token<span class="token operator">></span><span class="token punctuation">,</span>
67      <span class="token operator">...</span>headers<span class="token punctuation">,</span>
68    <span class="token punctuation">}</span><span class="token punctuation">,</span>
69  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
70  <span class="token keyword">return</span> <span class="token function">forward</span><span class="token punctuation">(</span>operation<span class="token punctuation">)</span><span class="token punctuation">;</span>
71<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
72
73<span class="token keyword">const</span> httpLink <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">HttpLink</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
74  uri<span class="token operator">:</span> <span class="token string">"http://localhost:4000/graphql"</span><span class="token punctuation">,</span>
75<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
76
77<span class="token keyword">const</span> client <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">ApolloClient</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
78  cache<span class="token operator">:</span> <span class="token keyword">new</span> <span class="token class-name">InMemoryCache</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
79  link<span class="token operator">:</span> ApolloLink<span class="token punctuation">.</span><span class="token function">from</span><span class="token punctuation">(</span><span class="token punctuation">[</span>authLink<span class="token punctuation">,</span> httpLink<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
80<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div>
81<h2 id="エラーが出る場合" style="position:relative;"><a href="#%E3%82%A8%E3%83%A9%E3%83%BC%E3%81%8C%E5%87%BA%E3%82%8B%E5%A0%B4%E5%90%88" aria-label="エラーが出る場合 permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>エラーが出る場合</h2>
82<p><code class="language-text">TypeError: forward is not a function</code>や<code class="language-text">Error: You are calling concat on a terminating link, which will have no effect</code>などのエラーが出る場合、<code class="language-text">ApolloClient</code>のoptionの設定を見直す必要がありそう。</p>
83<p><code class="language-text">link</code>のオプションを指定している場合は、uriの指定を<code class="language-text">HttpLink</code>を使用したリンクチェーンから設定する必要がある。
84公式にも以下のように書いてある。</p>
85<blockquote>
86<p>Note that if you provide a link chain to the ApolloClient constructor, you don't provide the uri option. Instead, you provide your server's URL to your HttpLink.</p>
87</blockquote>
88<p>これはNG</p>
89<div class="gatsby-highlight" data-language="ts"><pre class="language-ts"><code class="language-ts"><span class="token keyword">const</span> client <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">ApolloClient</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
90  uri<span class="token operator">:</span> <span class="token string">
90"http://localhost:4000/graphql"</span>
91  cache<span class="token operator">:</span> <span class="token keyword">new</span> <span class="token class-name">InMemoryCache</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
92  link<span class="token operator">:</span> ApolloLink<span class="token punctuation">.</span><span class="token function">from</span><span class="token punctuation">(</span><span class="token punctuation">[</span>authLink<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
93<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div>
94<h2 id="参考" style="position:relative;"><a href="#%E5%8F%82%E8%80%83" aria-label="参考 permalink" class="anchor before"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>参考</h2>
95<ul>
96<li><a href="https://www.apollographql.com/docs/react/api/link/introduction/" target="_blank" rel="noopener noreferrer">Apollo Link overview - Apollo GraphQL Docs<img class="windowIcon" src="/window.png"/></a></li>
97</ul>
98<h2 style="display:none">/post-17</h2>
99<h2 style="display:none">Apollo Clientでリクエストヘッダーに認証トークンを付与するときの注意点</h2></div></section></div><style data-emotion="css 7lxd31">.css-7lxd31{margin-left:1rem;min-width:350px;max-width:350px;}@media (max-width: 1000px){.css-7lxd31{max-width:100%;min-width:100%;margin-left:0;}}@media (max-width: 700px){.css-7lxd31{margin:1rem 0 0 0;}}</style><aside class="css-7lxd31 epy78oe12"><style data-emotion="css 1kzc8iw">.css-1kzc8iw{text-align:center;padding:2rem;margin-bottom:1rem;color:#fff;background-color:#2e3246;border-radius:0.4rem;}@media (max-width: 1000px){.css-1kzc8iw{padding:1.4rem;margin-top:1rem;}}@media (max-width: 700px){.css-1kzc8iw{margin-bottom:0;}}</style><div class="css-1kzc8iw epy78oe11"><style data-emotion="css 1moisxt">.css-1moisxt{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:auto;width:60%;}</style><ul class="css-1moisxt epy78oe5"><style data-emotion="css 1n2hetw">.css-1n2hetw{font-size:2rem;list-style:none;margin:0;width:32px;}</style><li class="css-1n2hetw epy78oe4"><style data-emotion="css rfbq6s">.css-rfbq6s{color:#fff;}.css-rfbq6s:hover{color:#3e5fbc;}</style><a href="https://twitter.com/obake_fe" target="_blank" class="css-rfbq6s epy78oe3"><svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="twitter" class="svg-inline--fa fa-twitter " role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M459.4 151.7c.325 4.548 .325 9.097 .325 13.65 0 138.7-105.6 298.6-298.6 298.6-59.45 0-114.7-17.22-161.1-47.11 8.447 .974 16.57 1.299 25.34 1.299 49.06 0 94.21-16.57 130.3-44.83-46.13-.975-84.79-31.19-98.11-72.77 6.498 .974 12.99 1.624 19.82 1.624 9.421 0 18.84-1.3 27.61-3.573-48.08-9.747-84.14-51.98-84.14-102.1v-1.299c13.97 7.797 30.21 12.67 47.43 13.32-28.26-18.84-46.78-51.01-46.78-87.39 0-19.49 5.197-37.36 14.29-52.95 51.65 63.67 129.3 105.3 216.4 109.8-1.624-7.797-2.599-15.92-2.599-24.04 0-57.83 46.78-104.9 104.9-104.9 30.21 0 57.5 12.67 76.67 33.14 23.72-4.548 46.46-13.32 66.6-25.34-7.798 24.37-24.37 44.83-46.13 57.83 21.12-2.273 41.58-8.122 60.43-16.24-14.29 20.79-32.16 39.31-52.63 54.25z"></path></svg></a></li><li class="css-1n2hetw epy78oe4"><a href="https://github.com/obake-fe" target="_blank" class="css-rfbq6s epy78oe3"><svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="github" class="svg-inline--fa fa-github " role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
99<path fill="currentColor" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg></a></li><li class="css-1n2hetw epy78oe4"><a href="https://qiita.com/obake_fe" target="_blank" class="css-rfbq6s epy78oe3"><style data-emotion="css 16unk8l">.css-16unk8l{position:relative;display:block;}</style><span class="css-16unk8l epy78oe2"><style data-emotion="css 14fvduy">.css-14fvduy{position:absolute;top:0;left:0;}</style><span class="css-14fvduy epy78oe1"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="square" class="svg-inline--fa fa-square " role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M0 96C0 60.65 28.65 32 64 32H384C419.3 32 448 60.65 448 96V416C448 451.3 419.3 480 384 480H64C28.65 480 0 451.3 0 416V96z"></path></svg></span><style data-emotion="css 1hdkwjq">.css-1hdkwjq{position:absolute;top:1px;left:-1px;color:#2e3246;font-size:2.1rem;}</style><span class="css-1hdkwjq epy78oe0"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="magnifying-glass" class="svg-inline--fa fa-magnifying-glass " role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M500.3 443.7l-119.7-119.7c27.22-40.41 40.65-90.9 33.46-144.7C401.8 87.79 326.8 13.32 235.2 1.723C99.01-15.51-15.51 99.01 1.724 235.2c11.6 91.64 86.08 166.7 177.6 178.9c53.8 7.189 104.3-6.236 144.7-33.46l119.7 119.7c15.62 15.62 40.95 15.62 56.57 0C515.9 484.7 515.9 459.3 500.3 443.7zM79.1 208c0-70.58 57.42-128 128-128s128 57.42 128 128c0 70.58-57.42 128-128 128S79.1 278.6 79.1 208z"></path></svg></span></span></a></li></ul></div><style data-emotion="css 105f8p2">.css-105f8p2{text-align:center;padding:2rem;margin-bottom:1rem;color:#fff;background-color:#2e3246;border-radius:0.4rem;}@media (max-width: 1000px){.css-105f8p2{display:none;}}</style><div class="css-105f8p2 epy78oe10"><style data-emotion="css 11sh56p">.css-11sh56p{display:inline-block;color:#fff;font-size:2rem;text-align:center;border-bottom:4px #3e5fbc solid;margin-bottom:1.2rem;}</style><p class="css-11sh56p epy78oe6">Search</p><style data-emotion="css 1qnyavj">.css-1qnyavj{width:12rem;}</style><input type="text" class="css-1qnyavj et0z3zf0"/></div><div class="css-1kzc8iw epy78oe11"><p class="css-11sh56p epy78oe6">Recent Posts</p><style data-emotion="css rkiwex">.css-rkiwex{font-size:1rem;}</style><ul class="css-rkiwex epy78oe9"><style data-emotion="css 16nc9l7">.css-16nc9l7{text-align:left;color:#fff;}</style><li class="css-16nc9l7 epy78oe8"><style data-emotion="css 6vxy5i">.css-6vxy5i{display:inline;color:#fff;}.css-6vxy5i:hover{border-bottom:2px #3e5fbc solid;}</style><a aria-current="page" class="css-6vxy5i epy78oe7" href="/post-17">Apollo Clientでリクエストヘッダーに認証トークンを付与する方法</a></li><li class="css-16nc9l7 epy78oe8"><a class="css-6vxy5i epy78oe7" href="/post-16">【Zsh】コマンド履歴にエラーの履歴を残さない設定</a></li><li class="css-16nc9l7 epy78oe8"><a class="css-6vxy5i epy78oe7" href="/post-15">【Laravel】PHPUnit実行時に開発用DBを初期化してしまわないために</a></li><li class="css-16nc9l7 epy78oe8"><a class="css-6vxy5i epy78oe7" href="/post-14">
99TypeScript環境でEmotionのスタイル指定に任意のpropsを渡す方法</a></li><li class="css-16nc9l7 epy78oe8"><a class="css-6vxy5i epy78oe7" href="/post-13">Reactのレンダリングメモ</a></li></ul></div><div class="css-1kzc8iw epy78oe11"><p class="css-11sh56p epy78oe6">All Tags</p><style data-emotion="css 19stl2v">.css-19stl2v{text-align:left;margin:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:left;-ms-flex-pack:left;-webkit-justify-content:left;justify-content:left;}</style><div class="css-19stl2v eqyc3mm1"><style data-emotion="css 1o5jhie">.css-1o5jhie{width:100%;}.css-1o5jhie+div{margin-top:4px;}.css-1o5jhie a{display:inline-block;color:#2e3246;padding:0.3rem 0.6rem;background:#cecece;border-radius:10px;}.css-1o5jhie a:hover{color:#f0f0f0;background:#3e5fbc;border:#3e5fbc;}@media (max-width: 1000px){.css-1o5jhie{width:auto;margin:1rem 1rem 0 0;}.css-1o5jhie+div{margin:1rem 1rem 0 0;}}@media (max-width: 700px){.css-1o5jhie{margin:0.4rem 0.4rem 0 0;}.css-1o5jhie+div{margin:0.4rem 0.4rem 0 0;}.css-1o5jhie a{font-size:0.7rem;padding:0.2rem 0.4rem;}}</style><div class="css-1o5jhie eqyc3mm0"><a href="/tags/JavaScript"><span>JavaScript<!-- --> (<!-- -->7<!-- -->)<!-- --></span></a></div><div class="css-1o5jhie eqyc3mm0"><a href="/tags/React"><span>React<!-- --> (<!-- -->4<!-- -->)<!-- --></span></a></div><div class="css-1o5jhie eqyc3mm0"><a href="/tags/GatsbyJS"><span>GatsbyJS<!-- --> (<!-- -->3<!-- -->)<!-- --></span></a></div><div class="css-1o5jhie eqyc3mm0"><a href="/tags/TypeScript"><span>TypeScript<!-- --> (<!-- -->3<!-- -->)<!-- --></span></a></div><div class="css-1o5jhie eqyc3mm0"><a href="/tags/Zsh"><span>Zsh<!-- --> (<!-- -->2<!-- -->)<!-- --></span></a></div><div class="css-1o5jhie eqyc3mm0"><a href="/tags/Webpack"><span>Webpack<!-- --> (<!-- -->2<!-- -->)<!-- --></span></a></div><div class="css-1o5jhie eqyc3mm0"><a href="/tags/Git"><span>Git<!-- --> (<!-- -->1<!-- -->)<!-- --></span></a></div><div class="css-1o5jhie eqyc3mm0"><a href="/tags/CSS"><span>CSS<!-- --> (<!-- -->1<!-- -->)<!-- --></span></a></div><div class="css-1o5jhie eqyc3mm0"><a href="/tags/dotenv"><span>Dotenv<!-- --> (<!-- -->1<!-- -->)<!-- --></span></a></div><div class="css-1o5jhie eqyc3mm0"><a href="/tags/Redux"><span>Redux<!-- --> (<!-- -->1<!-- -->)<!-- --></span></a></div><div class="css-1o5jhie eqyc3mm0"><a href="/tags/Emotion"><span>Emotion<!-- --> (<!-- -->1<!-- -->)<!-- --></span></a></div><div class="css-1o5jhie eqyc3mm0"><a href="/tags/Laravel"><span>Laravel<!-- --> (<!-- -->1<!-- -->)<!-- --></span></a></div><div class="css-1o5jhie eqyc3mm0"><a href="/tags/PHP"><span>PHP<!-- --> (<!-- -->1<!-- -->)<!-- --></span></a></div><div class="css-1o5jhie eqyc3mm0"><a href="/tags/GraphQL"><span>GraphQL<!-- --> (<!-- -->1<!-- -->)<!-- --></span></a></div><div class="css-1o5jhie eqyc3mm0"><a href="/tags/Apollo"><span>Apollo<!-- --> (<!-- -->1<!-- -->)<!-- --></span></a></div></div></div></aside></main><style data-emotion="css kioiei">.css-kioiei{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;position:relative;padding-top:2rem;bottom:0;box-shadow:0 -3px 26px rgba(0,0,0,0.5);background:linear-gradient(-45deg, #3e5fbc 0%, #284187 100%);font-family:"Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;font-weight:500;}</style><footer class="css-kioiei e1wk5mlw2"><style data-emotion="css zqjsky">.css-zqjsky{width:22px;height:22px;margin-right:6px;margin-top:2px;}</style><img src="/obake.png" alt="obake" class="css-zqjsky e1wk5mlw1"/><style data-emotion="css z1bko5">.css-z1bko5{margin:0;padding-bottom:2rem;text-align:center;color:#f0f0f0;}</style><div class="css-z1bko5 e1wk5mlw0"><span>Obake Engineer Blog</span></div></footer></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;
99border:0" aria-live="assertive" aria-atomic="true"></div></div>
99<script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/post-17";window.___webpackCompilationHash="ccd82429af842e529f15";/*]]>*/</script>
99<script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-7a6c4c9823b0efa9615f.js"],"app":["/app-61f0824893156c87c30b.js"],"component---cache-caches-gatsby-plugin-offline-app-shell-js":["/component---cache-caches-gatsby-plugin-offline-app-shell-js-cc6b6a8127b901a167f2.js"],"component---src-pages-404-tsx":["/component---src-pages-404-tsx-698c24f8fd683fa44046.js"],"component---src-pages-about-tsx":["/component---src-pages-about-tsx-66ca5a85e589ed4d7544.js"],"component---src-templates-index-tsx":["/component---src-templates-index-tsx-a2b9f9be838e62660cee.js"],"component---src-templates-post-tsx":["/component---src-templates-post-tsx-383130ad56ed91983cbb.js"],"component---src-templates-tag-tsx":["/component---src-templates-tag-tsx-0163efe7286b2d6884c9.js"]};/*]]>*/</script>
99<script src="/polyfill-7a6c4c9823b0efa9615f.js" nomodule=""></script>
99<script src="/app-61f0824893156c87c30b.js" async=""></script>
99<script src="/dc6a8720040df98778fe970bf6c000a41750d3ae-9b8e74725c536a119662.js" async=""></script>
99<script src="/framework-907990fc98066dc447d0.js" async=""></script>
99<script src="/webpack-runtime-341bd07ae26d850ae29e.js" async=""></script>
99</body></html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.