1<!DOCTYPE html> 2 3 4 5 6 7 8<html class="theme-next gemini use-motion" lang="ko"> 9<head> 10 <meta charset="UTF-8"/> 11<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 12<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 13<meta name="theme-color" content="#222"> 14 15 16 17 18 19 20 21 22 23<meta http-equiv="Cache-Control" content="no-transform" /> 24<meta http-equiv="Cache-Control" content="no-siteapp" /> 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 <link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css" /> 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 <link href="//fonts.googleapis.com/css?family=Nanum Gothic:300,300italic,400,400italic,700,700italic|Nanum Pen Script:300,300italic,400,400italic,700,700italic&subset=latin,latin-ext" rel="stylesheet" type="text/css"> 76 77 78 79 80 81 82 83<link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css" /> 84 85<link href="/css/main.css?v=5.1.4" rel="stylesheet" type="text/css" /> 86 87 88 <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-icon-180x180.png?v=5.1.4"> 89 90 91 <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png?v=5.1.4"> 92 93 94 <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png?v=5.1.4"> 95 96 97 98 <link rel="manifest" href="/images/manifest.json"> 99 100 101 <meta name="msapplication-config" content="/images/browserconfig.xml" /> 102 103 104 105 <meta name="keywords" content="graphql," /> 106 107 108 109 110 111 <link rel="alternate" href="/feed.xml" title="기ë¡ì ì¬ì°ì´ë¤" type="application/atom+xml" /> 112 113 114 115 116 117 118<meta name="description" content="머리ë§ì§ë í¬ì¤í¸ììë GraphQLì ëí´ì ê°ë¨íê² í ì¤í¸ë¥¼ í´ë³´ìë¤.ì´ë² í¬ì¤í¸ììë GraphQLì Learnì ëì¤ë ë´ì©ì ë°ë¼ ì¤ëª ì ë§ë¶ì´ë ¤ê³ íë¤.ì¤ëª ê³¼ ëë¶ì´ GraphiQLì ë¶ì¬ ì¦ê° ì¤íí´ë³¼ ì ìê² êµ¬ì±íìë¤. í ì¤í¸ë Heroku를 ì¬ì©íê³ ìë¤.Heroku를 무ë£ë¡ ì¬ì©í ì ì í´ìê°ì´ 30ë¶ì´ ëë ê²½ì°, ì í리ì¼ì´ì ì´ sl"> 119<meta property="og:type" content="article"> 120<meta property="og:title" content="GraphQL Vol.2 - GraphQL 기ì´"> 121<meta property="og:url" content="https://supawer0728.github.io/2020/03/09/graphql-java2/index.html"> 122<meta property="og:site_name" content="기ë¡ì ì¬ì°ì´ë¤"> 123<meta property="og:description" content="머리ë§ì§ë í¬ì¤í¸ììë GraphQLì ëí´ì ê°ë¨íê² í ì¤í¸ë¥¼ í´ë³´ìë¤.ì´ë² í¬ì¤í¸ììë GraphQLì Learnì ëì¤ë ë´ì©ì ë°ë¼ ì¤ëª ì ë§ë¶ì´ë ¤ê³ íë¤.ì¤ëª ê³¼ ëë¶ì´ GraphiQLì ë¶ì¬ ì¦ê° ì¤íí´ë³¼ ì ìê² êµ¬ì±íìë¤. í ì¤í¸ë Heroku를 ì¬ì©íê³ ìë¤.Heroku를 무ë£ë¡ ì¬ì©í ì ì í´ìê°ì´ 30ë¶ì´ ëë ê²½ì°, ì í리ì¼ì´ì ì´ sl"> 124<meta property="og:locale" content="ko_KR"> 125<meta property="article:published_time" content="2020-03-08T16:55:00.000Z"> 126<meta property="article:modified_time" content="2020-03-08T17:02:43.141Z"> 127<meta property="article:author" content="supawer0728"> 128<meta property="article:tag" content="graphql"> 129<meta name="twitter:card" content="summary"> 130 131 132
133<script type="text/javascript" id="hexo.configurations"> 134 var NexT = window.NexT || {}; 135 var CONFIG = { 136 root: '/', 137 scheme: 'Gemini', 138 version: '5.1.4', 139 sidebar: {"position":"left","display":"hide","offset":12,"b2t":false,"scrollpercent":false,"onmobile":false}, 140 fancybox: true, 141 tabs: true, 142 motion: {"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}}, 143 duoshuo: { 144 userId: '0', 145 author: 'ìì±ì' 146 }, 147 algolia: { 148 applicationID: '', 149 apiKey: '', 150 indexName: '', 151 hits: {"per_page":10}, 152 labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"} 153 } 154 }; 155</script>
155 156 157 158 159 <link rel="canonical" href="https://supawer0728.github.io/2020/03/09/graphql-java2/"/> 160 161 162 163 164 165 <title>GraphQL Vol.2 - GraphQL ê¸°ì´ | 기ë¡ì ì¬ì°ì´ë¤</title> 166 167 168 169 170 171<!-- Global site tag (gtag.js) - Google Analytics -->
vendor: 64 bytes, lines 171-172
171 172<script async src="https://www.googletagmanager.com/gtag/js?id=
172UA-115481794-1
vendor: 12 bytes, line 172
172"></script>
173<script> 174
vendor: 124 bytes, line 174
174window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', '
174UA-115481794-1
vendor: 4 bytes, line 174
174');
175</script>
175 176 177 178 179 180 181 182<!-- Global site tag (gtag.js) - Google Analytics -->
183<script data-ad-client="" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
183 184 185 186<meta name="generator" content="Hexo 4.2.0"></head> 187 188<body itemscope itemtype="http://schema.org/WebPage" lang="ko"> 189 190 191 192 193 194 195 <div class="container sidebar-position-left page-post-detail"> 196 <div class="headband"></div> 197 198 <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader"> 199 <div class="header-inner"><div class="site-brand-wrapper"> 200 <div class="site-meta "> 201 202 203 <div class="custom-logo-site-title"> 204 <a href="/" class="brand" rel="start"> 205 <span class="logo-line-before"><i></i></span> 206 <span class="site-title">기ë¡ì ì¬ì°ì´ë¤</span> 207 <span class="logo-line-after"><i></i></span> 208 </a> 209 </div> 210 211 <h1 class="site-subtitle" itemprop="description">To Improve Human Life</h1> 212 213 </div> 214 215 <div class="site-nav-toggle"> 216 <button> 217 <span class="btn-bar"></span> 218 <span class="btn-bar"></span> 219 <span class="btn-bar"></span> 220 </button> 221 </div> 222</div> 223 224<nav class="site-nav"> 225 226 227 228 <ul id="menu" class="menu"> 229 230 231 <li class="menu-item menu-item-home"> 232 <a href="/" rel="section"> 233 234 <i class="menu-item-icon fa fa-fw fa-home"></i> <br /> 235 236 í 237 </a> 238 </li> 239 240 241 <li class="menu-item menu-item-tags"> 242 <a href="/tags/" rel="section"> 243 244 <i class="menu-item-icon fa fa-fw fa-tags"></i> <br /> 245 246 íê·¸ 247 </a> 248 </li> 249 250 251 <li class="menu-item menu-item-categories"> 252 <a href="/categories/" rel="section"> 253 254 <i class="menu-item-icon fa fa-fw fa-th"></i> <br /> 255 256 ì¹´í ê³ ë¦¬ 257 </a> 258 </li> 259 260 261 <li class="menu-item menu-item-archives"> 262 <a href="/archives/" rel="section"> 263 264 <i class="menu-item-icon fa fa-fw fa-archive"></i> <br /> 265 266 ìì¹´ì´ë¸ 267 </a> 268 </li> 269 270 271 272 <li class="menu-item menu-item-search"> 273 274 <a href="javascript:;" class="popup-trigger"> 275 276 277 <i class="menu-item-icon fa fa-search fa-fw"></i> <br /> 278 279 ê²ì 280 </a> 281 </li> 282 283 </ul> 284 285 286 287 <div class="site-search"> 288 289 <div class="popup search-popup local-search-popup"> 290 <div class="local-search-header clearfix"> 291 <span class="search-icon"> 292 <i class="fa fa-search"></i> 293 </span> 294 <span class="popup-btn-close"> 295 <i class="fa fa-times-circle"></i> 296 </span> 297 <div class="local-search-input-wrapper"> 298 <input autocomplete="off" 299 placeholder="Searching..." spellcheck="false" 300 type="text" id="local-search-input"> 301 </div> 302 </div> 303 <div id="local-search-result"></div> 304</div> 305 306 307 308 </div> 309 310</nav> 311 312 313 314 </div> 315 </header> 316 317 <main id="main" class="main"> 318 <div class="main-inner"> 319 <div class="content-wrap"> 320 <div id="content" class="content"> 321 322 323 <div id="posts" class="posts-expand"> 324 325 326 327 328 329 330 331 332 <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article"> 333 334 335 336 <div class="post-block"> 337 <link itemprop="mainEntityOfPage" href="https://supawer0728.github.io/2020/03/09/graphql-java2/"> 338 339 <meta itemprop="image" content="https://supawer0728.github.io/images/avatar.jpg"> 340 <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"> 341 <meta itemprop="name" content="supawer0728"> 342 <meta itemprop="description" content=""> 343 <meta itemprop="image" content="https://supawer0728.github.io/images/avatar.jpg"> 344 </span> 345 346 <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"> 347 <meta itemprop="name" content="기ë¡ì ì¬ì°ì´ë¤"> 348 <meta itemprop="logo" content="https://supawer0728.github.io/images/avatar.jpg"> 349 </span> 350 351 352 <header class="post-header"> 353 354 355 356 <h2 class="post-title" itemprop="name headline">GraphQL Vol.2 - GraphQL 기ì´</h2> 357 358 359 <div class="post-meta">
360 <span class="post-time"> 361 362 <span class="post-meta-item-icon"> 363 <i class="fa fa-calendar-o"></i> 364 </span> 365 366 <span class="post-meta-item-text">ìì±ì¼:</span> 367 368 <time title="Post created" itemprop="dateCreated datePublished" datetime="2020-03-09T01:55:00+09:00"> 369 2020-03-09 370 </time> 371 372 373 374 <span class="post-meta-divider">|</span> 375 376 377 378 <span class="post-meta-item-icon"> 379 <i class="fa fa-calendar-check-o"></i> 380 </span> 381 382 <span class="post-meta-item-text">ìì ì¼:</span> 383 384 385 <time title="ìì ì¼" itemprop="dateModified" datetime="2020-03-08T00:00:00+09:00"> 386 2020-03-08 387 </time> 388 389 390 </span> 391 392 393 <span class="post-category" > 394 395 <span class="post-meta-divider">|</span> 396 397 <span class="post-meta-item-icon"> 398 <i class="fa fa-folder-o"></i> 399 </span> 400 401 <span class="post-meta-item-text">In</span> 402 403 404 <span itemprop="about" itemscope itemtype="http://schema.org/Thing"> 405 <a href="/categories/graphql/" itemprop="url" rel="index"> 406 <span itemprop="name">graphql</span> 407 </a> 408 </span> 409 410 411 412 413 </span> 414 415 416 417 418 <span class="post-comments-count"> 419 <span class="post-meta-divider">|</span> 420 <span class="post-meta-item-icon"> 421 <i class="fa fa-comment-o"></i> 422 </span> 423 <a href="/2020/03/09/graphql-java2/#comments" itemprop="discussionUrl"> 424 <span class="post-comments-count disqus-comment-count" 425 data-disqus-identifier="2020/03/09/graphql-java2/" itemprop="commentCount"></span> 426 </a> 427 </span> 428 429 430 431 432 433 434 435 436 437 438 439 440 </div> 441 </header> 442 443 444 445 446 447 <div class="post-body" itemprop="articleBody"> 448 449 450 451 452 453 <h1 id="머리ë§"><a href="#머리ë§" class="headerlink" title="머리ë§"></a>머리ë§</h1><p>ì§ë í¬ì¤í¸ììë GraphQLì ëí´ì ê°ë¨íê² í ì¤í¸ë¥¼ í´ë³´ìë¤.<br>ì´ë² í¬ì¤í¸ììë <a href="https://graphql.org/learn/" target="_blank" rel="noopener">GraphQLì Learn</a>ì ëì¤ë ë´ì©ì ë°ë¼ ì¤ëª ì ë§ë¶ì´ë ¤ê³ íë¤.<br>ì¤ëª ê³¼ ëë¶ì´ GraphiQLì ë¶ì¬ ì¦ê° ì¤íí´ë³¼ ì ìê² êµ¬ì±íìë¤.</p> 454<blockquote> 455<p>í ì¤í¸ë Heroku를 ì¬ì©íê³ ìë¤.<br>Heroku를 무ë£ë¡ ì¬ì©í ì ì í´ìê°ì´ 30ë¶ì´ ëë ê²½ì°, ì í리ì¼ì´ì ì´ sleep ìíë¡ ë°ëë¤.<br>ê·¸ë 기 ë문ì ìëì í ì¤í¸ ë¡ë©ì´ ë릴 ì ìì¼ë, 1ë¶ ì´ë´ì ë¡ë©ë ê²ì´ë¤.</p> 456</blockquote> 457<a id="more"></a> 458 459<h1 id="ì§ì문-Query-ë³ê²½ë¬¸-Mutation"><a href="#ì§ì문-Query-ë³ê²½ë¬¸-Mutation" class="headerlink" title="ì§ì문(Query) / ë³ê²½ë¬¸(Mutation)"></a>ì§ì문(Query) / ë³ê²½ë¬¸(Mutation)</h1><h3 id="íë"><a href="#íë" class="headerlink" title="íë"></a>íë</h3><p>ì´ì í¬ì¤í¸ìì ì²´ííë¤ìí¼, í´ë¼ì´ì¸í¸ììë ì¤í¤ë§ìì íìë¡íë íë를 ìë²ì ìì²íì¬ ìëµë°ì ì ìë¤.</p> 460<blockquote> 461<p>⺠ë²í¼ì ëë¬ í ì¤í¸í ì ìë¤.</p> 462</blockquote> 463<iframe style="width: 100%" height="400px" resize="vertical" frameBorder="0" src="https://supawer-graphql-study.herokuapp.com/graphiql?query=%7B%0A%20%20user%20%7B%0A%20%20%20%20name%0A%20%20%7D%0A%7D&variables=%7B%7D"></iframe> 464 465<p>ìì²ì ë´ì©ê³¼ ìëµì JSONì ê° íëë ëì¹ëë¤.</p> 466<blockquote> 467<p>ì ìì² ë´ì©ì ìì í´ì í ì¤í¸í ìë ìë¤. titleì ì§ì°ê³ ⺠ë²í¼ì ëë¬ë³´ì.</p> 468</blockquote> 469<p>ëí ê°ì²´ì í¬í¨ë íì íì ì ëí ì§ì를 ì¶ê°í ì ìë¤.<br>Userê° ì¬ì§íê³ ìë Company를 ì¡°íí´ë³´ì.</p> 470<iframe style="width: 100%" height="400px" resize="vertical" frameBorder="0" src="https://supawer-graphql-study.herokuapp.com/graphiql?query=%7B%0A%20%20user%20%7B%0A%20%20%20%20name%0A%20%20%20%20company%20%7B%0A%20%20%20%20%20%20name%0A%20%20%20%20%20%20catchPhrase%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D&variables=%7B%7D"></iframe> 471 472<p>ìëµì í¬í¨ë User ëí ìì²ì ëìíë JSON 구조를 ì·¨íê³ ìë¤.</p> 473<h3 id="ì§ì-ì¸ì-Arguments"><a href="#ì§ì-ì¸ì-Arguments" class="headerlink" title="ì§ì ì¸ì(Arguments)"></a>ì§ì ì¸ì(Arguments)</h3><p>GraphQLì ì¡°í를 ìí´ ì¸ì를 ì¤ ì ìë¤.</p> 474<iframe style="width: 100%" height="400px" resize="vertical" frameBorder="0" src="https://supawer-graphql-study.herokuapp.com/graphiql?query=%7B%0A%20%20user(id%3A%202)%20%7B%0A%20%20%20%20name%0A%20%20%20%20phone%0A%20%20%7D%0A%7D&variables=%7B%7D"></iframe> 475 476<p>RESTììë URL Path, Query String ë±ì¼ë¡ ì¸ì를 ëê²¼ë¤.<br>GraphQLììë 모ë íëì ì¤ì²©ë ê°ì²´ì ì¤í¤ë§ë¡ ì ìí ì¸ì를 ë길 ì ìë¤.<br>ì¬ì§ì´ ì¸ìë ì¤ì¹¼ë¼ íì (scala: Stringì´ë Int)ìë ë³´ë¼ ì ìë¤.<br>ë¤ì ìì 를 ì´í´ë³´ì.</p> 477<iframe style="width: 100%" height="400px" resize="vertical" frameBorder="0" src="https://supawer-graphql-study.herokuapp.com/graphiql?query=%7B%0A%20%20user(id%3A%202)%20%7B%0A%20%20%20%20name(toUpperCase%3A%20true)%0A%20%20%20%20phone%0A%20%20%7D%0A%7D&variables=%7B%7D"></iframe> 478 479<h3 id="ë³ì¹-í ë¹-Aliases"><a href="#ë³ì¹-í ë¹-Aliases" class="headerlink" title="ë³ì¹ í ë¹(Aliases)"></a>ë³ì¹ í ë¹(Aliases)</h3><p>ìëì ê°ì´ ì§ìë§ë¤ ë³ì를 í ë¹íë¯ ë³ì¹ì ì¤ ì ìë¤.<br>
479user를 ì¡°ííì§ë§, ê°ê° ë¤ë¥¸ ë³ì¹ì¼ë¡ 참조í ì ìë¤.</p> 480<iframe style="width: 100%" height="400px" resize="vertical" frameBorder="0" src="https://supawer-graphql-study.herokuapp.com/graphiql?query=%7B%0A%20%20me%3A%20user(id%3A%201)%20%7B%0A%20%20%20%20name%0A%20%20%20%20phone%0A%20%20%7D%0A%20%20you%3A%20user(id%3A2)%20%7B%0A%20%20%20%20name%0A%20%20%20%20phone%0A%20%20%7D%0A%7D&variables=%7B%7D"></iframe> 481 482 483<h3 id="Fragments"><a href="#Fragments" class="headerlink" title="Fragments"></a>Fragments</h3><p>ììì ë³ì¹ì í ë¹í ë, <code>me</code>ì <code>you</code>ê° ëì¼í íë를 ì¡°ííê³ ììë¤.<br>GraphQLì ì´ë¬í ë°ë³µì ìì¨ ì ìëë¡, Fragmentsë¼ ë¶ë¥´ë ì¬ì¬ì© 구문ì ì ê³µíë¤.</p> 484<iframe style="width: 100%" height="400px" resize="vertical" frameBorder="0" src="https://supawer-graphql-study.herokuapp.com/graphiql?query=%7B%0A%20%20me%3A%20user(id%3A%201)%20%7B%0A%20%20%20%20...basigInfo%0A%20%20%7D%0A%20%20you%3A%20user(id%3A2)%20%7B%0A%20%20%20%20...basigInfo%0A%20%20%7D%0A%7D%0A%0Afragment%20basigInfo%20on%20User%20%7B%0A%20%20name%0A%20%20phone%0A%20%20email%0A%20%20website%0A%7D&variables=%7B%7D"></iframe> 485 486<p><code>fragment</code>를 ì ì¸ í fragmentì ì´ë¦ì ì ìíê³ <code>on</code> ë¤ì íì ì ëª ìíë¤.<br>ëª ìí íì ì 기ë°ì¼ë¡ fragment ë´ë¶ ë¸ëì ë£ì ì ìë íëê° ê²°ì ëë¤.</p> 487<h3 id="ì°ì°ìëª "><a href="#ì°ì°ìëª " class="headerlink" title="ì°ì°ìëª "></a>ì°ì°ìëª </h3><p>ì¬íê¹ì§ ì¬ì©í ì§ìë ì¬ì¤ 모ë ì¶ì½íì´ìë¤.<br>ì§ìì ìíì <code>query ì°ì°ìëª { ... }</code>ì íìì´ë¤.</p> 488<iframe style="width: 100%" height="400px" resize="vertical" frameBorder="0" src="https://supawer-graphql-study.herokuapp.com/graphiql?query=query%20meAndYou%20%7B%0A%20%20me%3A%20user(id%3A%201)%20%7B%0A%20%20%20%20name%0A%20%20%7D%0A%20%20you%3A%20user(id%3A2)%20%7B%0A%20%20%20%20name%0A%20%20%7D%0A%7D&operationName=meAndYou&variables=%7B%7D"></iframe> 489 490<p>ì°ì° íì ì <code>query(ì§ì)</code>, <code>mutation(ë³ê²½)</code>, <code>subscription(구ë )</code>ì 3ê°ì§ë¡ ëëë¤.<br>ì°ì°ìëª ì 모ë ì°ì° íì ì ëí´ì ëª ëª í ì ìë¤.<br>ì°ì°ìëª ì ëë²ê¹ ì íê±°ë ìë² ì¬ì´ëìì ë¡ê¹ ì í ë ì ì©íê² ì°ì¼ ì ìë¤.</p> 491<h3 id="ë³ì-Variables"><a href="#ë³ì-Variables" class="headerlink" title="ë³ì(Variables)"></a>ë³ì(Variables)</h3><p>ììì ì¸ì를 íµí´ì ë¤ë¥¸ idì User를 ê°ì ¸ì¬ ì ìë ê²ì íì¸íìë¤.<br>ë§ì½ í´ë¼ì´ì¸í¸ìì ëì ì¼ë¡ ë¤ë¥¸ ì§ì를 í ë, ë§¤ë² ë¤ë¥¸ ì¸ì를 ê°ì§ ì§ì 문ìì´ì ìì±íë¤ë©´ í° ëë¹ì¼ ê²ì´ë¤.<br>ì§ì를 í í릿ì¼ë¡ ê³ ì í´ëê³ , ì°ë¦¬ë ë³ì를 ë길 ì ìë¤.<br>ë³ìë ì£¼ë¡ JSON íìì¼ë¡ ì ìíë¤.</p> 492<blockquote> 493<p>íë¨ì <code>QUERY VARIABLES</code>를 참조.</p> 494</blockquote> 495<iframe style="width: 100%" height="400px" resize="vertical" frameBorder="0" src="https://supawer-graphql-study.herokuapp.com/graphiql?query=query%20findAllPostsWithLimit(%24limit%3A%20Int)%20%7B%0A%20%20posts(limit%3A%20%24limit)%20%7B%0A%20%20%20%20title%0A%20%20%09comments(limit%3A%20%24limit)%20%7B%0A%20%20%20%20%20%20name%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D&operationName=findAllPostsWithLimit&variables=%7B%0A%20%20%22limit%22%3A%202%0A%7D"></iframe> 496 497<p>Http Requestì 모ìì ë¤ìê³¼ ê°ë¤.</p> 498<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">POST /graphql</span><br><span class="line">Host: localhost</span><br><span class="line">{</span><br><span class="line"> "query": "query findAllPostsWithLimit($limit: Int!) { ... }",</span><br><span class="line"> "variables": {</span><br><span class="line"> "limit": 2</span><br><span class="line"> },</span><br><span class="line"> "operationName": "findAllPostsWithLimit"</span><br><span class="line">}</span><br></pre></td></tr></table></figure> 499 500<p>ì´ì í´ë¼ì´ì¸í¸ììë ì§ì를 ë§¤ë² ìì í íì ìì´, ë³ìë§ ì ìí´ì ëì ì¼ë¡ ë¤ë¥¸ ì§ì를 í ì ìë¤.<br>fragmentììë ë³ì를 ê·¸ëë¡ ì¬ì©í ì ìë¤.</p> 501<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">fragment limitedComments on Post {</span><br><span class="line"> title</span><br><span class="line"> body</span><br><span class="line"> comments(limit: $limit) {</span><br><span class="line"> title</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure> 502 503<h3 id="ë³ì-ì ì"><a href="#ë³ì-ì ì" class="headerlink" title="ë³ì ì ì"></a>ë³ì ì ì</h3><p>ìì ê°ì´ <code>$limit: Int</code>ë¡ ë³ì를 ì ìí ì ìë¤.<br>ë³ìë scala, enum, í¹ì input íì ì¼ë¡ ì ìí ì ìë¤.<br>
503ë³ìë¡ ë³µì¡í ê°ì²´ë¥¼ ëê²¨ì¼ íë ê²½ì° ìë²ìì ì ê³µíë input íì ì ì¬ì©íë¤.</p> 504<p>ìì ì§ìììë <code>Int</code> íì ì¼ë¡ ì ì¸ëì기 ë문ì ë³ìê° ìì´ë ì ìì ì¼ë¡ ëìíë¤.<br>íìê°ì¼ë¡ ì§ì íë ¤ë©´ <code>Int!</code>ë¡ ì ìí´ì¼ íë¤.<br>ë³ì ìì´ ì ì ëìíëì§ íì¸í´ë³´ì.</p> 505<iframe style="width: 100%" height="400px" resize="vertical" frameBorder="0" src="https://supawer-graphql-study.herokuapp.com/graphiql?query=query%20findAllPostsWithLimit(%24limit%3A%20Int)%20%7B%0A%20%20posts(limit%3A%20%24limit)%20%7B%0A%20%20%20%20title%0A%20%20%7D%0A%7D&operationName=findAllPostsWithLimit&variables=%7B%7D"></iframe> 506 507<h3 id="ë³ì-기본ê°"><a href="#ë³ì-기본ê°" class="headerlink" title="ë³ì 기본ê°"></a>ë³ì 기본ê°</h3><p>ë³ì를 ì ìí ë 기본ê°ì ë£ì ì ìë¤.</p> 508<iframe style="width: 100%" height="400px" resize="vertical" frameBorder="0" src="https://supawer-graphql-study.herokuapp.com/graphiql?query=query%20findAllPostsWithLimit(%24limit%3A%20Int%20%3D%202)%20%7B%0A%20%20posts(limit%3A%20%24limit)%20%7B%0A%20%20%20%20title%0A%20%20%7D%0A%7D&operationName=findAllPostsWithLimit&variables=%7B%7D"></iframe> 509 510<h3 id="ì§ìì-Directives"><a href="#ì§ìì-Directives" class="headerlink" title="ì§ìì(Directives)"></a>ì§ìì(Directives)</h3><p>ë³ìê° ì¸ì를 ëì ì¼ë¡ ì ë¬í ì ììë¤ë©´, ì§ììë ì§ì를 ëì ì¼ë¡ ë³ê²½í ì ìë¤.</p> 511<iframe style="width: 100%" height="400px" resize="vertical" frameBorder="0" src="https://supawer-graphql-study.herokuapp.com/graphiql?query=query%20post(%24id%3A%20Int!%2C%20%24withComments%3A%20Boolean!)%20%7B%0A%20%20post(id%3A%20%24id)%20%7B%0A%20%20%20%20title%0A%20%20%20%20comments%20%40include(if%3A%20%24withComments)%20%7B%0A%20%20%20%20%20%20body%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D&operationName=post&variables=%7B%0A%20%20%22id%22%3A%201%2C%0A%20%20%22withComments%22%3A%20false%0A%7D"></iframe> 512 513<p>기본ì ì¼ë¡ GraphQLì ìë 2ê°ì ì§ìì를 ìë²ìì 구ííëë¡ ì ìíë¤.</p> 514<ul> 515<li><code>@include(if: Boolean)</code>: ì¸ìê° <code>true</code>ì¼ ëìë§ í´ë¹ íë를 í¬í¨.</li> 516<li><code>@skip(if: Boolean)</code>: ì¸ìê° <code>true</code>ì´ë©´ í´ë¹ íë를 ê±´ëë.</li> 517</ul> 518<p>ìë²ë ìë¡ì´ ì§ìì를 ì ìíì¬ êµ¬íí ìë ìë¤.</p> 519<h3 id="ë³ê²½ë¬¸-Mutations"><a href="#ë³ê²½ë¬¸-Mutations" class="headerlink" title="ë³ê²½ë¬¸(Mutations)"></a>ë³ê²½ë¬¸(Mutations)</h3><p>REST APIìì 컨벤ì ììì GET ìì²ì¼ë¡ë ë³ê²½ì ì¼ì¼í¤ì§ ìë¯ì´, GraphQLììë mutationì¼ë¡ ë°ì´í°ë¥¼ ë³ê²½íë¤.</p> 520<p>ìë mutationì ì´í´ë³´ì</p> 521<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">mutation CreateReviewForEpisode($ep: Episode!, $review: ReviewInput!) {</span><br><span class="line"> createReview(episode: $ep, review: $review) {</span><br><span class="line"> stars</span><br><span class="line"> commentary</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"># variables</span><br><span class="line">{</span><br><span class="line"> "ep": "JEDI",</span><br><span class="line"> "review": {</span><br><span class="line"> "stars": 5,</span><br><span class="line"> "commentary": "This is a great movie!"</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure> 522 523<p>ìì ê°ì mutationìì createReview를 íµí´ <code>ep</code>, <code>review</code> ë³ìê° ì ê³µëê³ ,<br><code>star</code>ì <code>commentary</code>를 íëë¡ ê°ë ì¤ë¸ì í¸ê° ë°íëë¤.<br>ì¦ Java ìë²ì ê²½ì° ìëì ê°ì ë©ìë ìê·¸ëì²ë¡ ì ìí ì ìë¤.</p> 524<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">public</span> <span class="class"><span class="keyword">class</span> <span class="title">ReviewService</span> <span class="keyword">implements</span> <span class="title">GraphQLQueryResolver</span> </span>{</span><br><span class="line"> <span class="function"><span class="keyword">public</span> Review <span class="title">createReview</span><span class="params">(Integer stars, ReviewInput review)</span> </span>{</span><br><span class="line"> <span class="comment">//...</span></span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure> 525 526<p>ìì ë³ìë¡ ì£¼ì´ì§ <code>review</code>ê° ììì ì´ì¼ê¸°íë input íì ì´ë¤.</p> 527<h3 id="mutationì-íëë¤"><a href="#mutationì-íëë¤" class="headerlink" title="mutationì íëë¤"></a>mutationì íëë¤</h3><p>ì§ì문과 ë³ê²½ë¬¸ì ê°ì¥ í° ì°¨ì´ì ì, ì§ì문ì ê° íëì ëí´ì ë³ë ¬ë¡ ì¤íëë ë°ë©´ì ë³ê²½ë¬¸ì ê° íëë ìì°¨ ì¤íëë¤ë ê²ì´ë¤.<br>ì¦, í ë²ì ìì²ì¼ë¡ <code>count</code>를 1 ì¦ê°ìí¤ë ë³ê²½ë¬¸ì ë ê°ë¥¼ ë³´ë¼ ë,<br>첫 ë²ì§¸ ìì²ì´ ìë£ëê³ ë ë²ì§¸ ìì²ì´ ì¤íë기 ë문ì ë ì´ì¤ 컨ëì (Race Condition)ì ë¹ ì§ ì°ë ¤ê° ìë¤.</p> 528<h3 id="Inline-Fragments"><a href="#Inline-Fragments" class="headerlink" title="Inline Fragments"></a>Inline Fragments</h3><p>GraphQLì íì ì ì¶ìíí ì ìë interface를 ì ê³µíê³ ìì¼ë©°, ë¤ì¤ ììê³¼ ë¹ì·í union íì ëí ì ê³µíê³ ìë¤.</p> 529<p>íê²ì ëí´ ë¤ìê³¼ ê°ì´ ì¤í¤ë§ê° ì ìëì´ ìë¤.</p> 530<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">interface Vehicle {</span><br><span class="line"> id: Int!</span><br><span class="line"> manufacturer: String!</span><br><span class="line"> name: String!</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">type Car implements Vehicle {</span><br><span class="line"> id: Int!</span><br><span class="line"> manufacturer: String!</span><br><span class="line"> name: String!</span><br><span class="line">
530 tire: String!</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">type Airplane implements Vehicle {</span><br><span class="line"> id: Int!</span><br><span class="line"> manufacturer: String!</span><br><span class="line"> name: String!</span><br><span class="line"> flyLimit: String!</span><br><span class="line">}</span><br></pre></td></tr></table></figure> 531 532<p>ì´ë¬í íê² ì¶ì íì ì 구íì²´ì¸ ìëì°¨, ë¹í기ì ë°ë¼ ë¤ë¥´ê² ëìíëë¡ íë ¤ë©´ ìëì ê°ì´ inline fragment를 ì¶ê°íë¤.</p> 533<iframe style="width: 100%" height="400px" resize="vertical" frameBorder="0" src="https://supawer-graphql-study.herokuapp.com/graphiql?query=%7B%0A%20%20vehicle(id%3A%201)%20%7B%0A%20%20%20%20name%0A%20%20%20%20manufacturer%0A%20%20%20%20...%20on%20Car%20%7B%0A%20%20%20%20%20%20tire%0A%20%20%20%20%7D%0A%20%20%20%20...%20on%20Airplane%20%7B%0A%20%20%20%20%20%20flyLimit%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D 534&variables=%7B%7D"></iframe> 535 536<h3 id="ë©í-íë"><a href="#ë©í-íë" class="headerlink" title="ë©í íë"></a>ë©í íë</h3><p>ìììì ì¶ì íì ì ëí 구íì²´ì ë°ë¼ í´ë¼ì´ì¸í¸ì ëìì´ ë¬ë¼ì ¸ì¼ íë ê²½ì°ê° ìì ì ìë¤.<br>ì´ë´ ëìë <code>__typename</code> ë©í íë를 ì¶ê°íì¬ ì¤ì ì´ë¤ 구íì²´ê° ìëµì¼ë¡ ì¤ëì§ íì¸í ì ìë¤.</p> 537<iframe style="width: 100%" height="400px" resize="vertical" frameBorder="0" src="https://supawer-graphql-study.herokuapp.com/graphiql?query=%7B%0A%20%20vehicle(id%3A%201)%20%7B%0A%20%20%20%20__typename%0A%20%20%20%20name%0A%20%20%20%20manufacturer%0A%20%20%7D%0A%7D&variables=%7B%7D"></iframe> 538 539<h1 id="ì¤í¤ë§ì-íì "><a href="#ì¤í¤ë§ì-íì " class="headerlink" title="ì¤í¤ë§ì íì "></a>ì¤í¤ë§ì íì </h1><h3 id="íì "><a href="#íì " class="headerlink" title="íì "></a>íì </h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">{</span><br><span class="line"> vehicle {</span><br><span class="line"> name</span><br><span class="line"> manufacturer</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure> 540 541<p>ì ìì ì ê°ì´ GraphQLìì íì ì:</p> 542<ul> 543<li>root ì¤ë¸ì í¸ë¡ ììíë¤.</li> 544<li>root ì¤ë¸ì í¸ì field(<code>vehicle</code>)를 ì ì¸íë¤.</li> 545<li>vehicleìì ë°ì ìëµê°ì ì íì ì¼ë¡ 기ì¬íë¤.</li> 546</ul> 547<p>ìì² ì¤í¤ë§ë¥¼ ë°ë¼ 구조íë JSON ìëµì´ ì¤ê¸° ë문ì, ìë² ìëµì ì측í ì ìë¤.<br>ë문ì í´ë¼ì´ì¸í¸ë ì´ë¤ êµ¬ì¡°ë¡ ìì²ì ë³´ë¼ ì ìëê°ì ëí´ ììì¼ íëë° ì´ë¥¼ ì¤í¤ë§ë¡ ì ìí´ëìë¤.</p> 548<p>GraphQLì ì ê³µíë ì í리ì¼ì´ì ì ì°ë¦¬ê° ì´ë¤ ë°ì´í°ë¥¼ ì§ìí ì ìëì§ë¥¼ ì ìí íì ì ì ê°ì§ê³ ìë¤.<br>ê·¸ë¦¬ê³ ì í리ì¼ì´ì ì ì§ìê° ë¤ì´ì¤ë©´ ì´ ì¤í¤ë§ë¥¼ ê°ì§ê³ ì§ì ë ê°ë¤ì ì í¨ì±ì ê²ì¦íë¤.</p> 549<h3 id="ê°ì²´-íì ê³¼-íë"><a href="#ê°ì²´-íì ê³¼-íë" class="headerlink" title="ê°ì²´ íì ê³¼ íë"></a>ê°ì²´ íì ê³¼ íë</h3><p>GraphQLì ì¤í¤ë§ìì ê°ì¥ 기ì´ì ì¸ ê²ì ì¤ë¸ì í¸ íì ì´ë¤.</p> 550<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">type Album {</span><br><span class="line"> name: String!</span><br><span class="line"> photos: [Photo!]!</span><br><span class="line">}</span><br></pre></td></tr></table></figure> 551 552<ul> 553<li>íì ì ì´ë¦ì <code>Album</code>ë¡ ì§ìë¤.</li> 554<li><code>name</code>ê³¼ <code>photo</code>ë <code>Album</code> ê°ì²´ì íëì´ë¤.</li> 555<li><code>String</code>ì GraphQLìì 기본ì¼ë¡ ì ê³µíë ì¤ì¹¼ë¼ íì ì´ë¤. ì¤ì¹¼ë¼ íì ì ë¤ì ììë³´ê¸°ë¡ íì.</li> 556<li><code>String!</code>ìì <code>!</code>ë í´ë¹ íëê° Nullì íì©íì§ ììì ë»íë¤.(non-null)</li> 557<li><code>[Photo!]!</code>ë <code>Photo</code> ê°ì²´ì ë°°ì´ì ë»íë¤.<ul> 558<li><code>[]!</code>ë ì¦ <code>photos</code> ë³ìë Nullì¼ ì ììì ì미íë¤.</li> 559<li><code>Photo!</code>ë ë°°ì´ì ê° ììê° Nullì¼ ì ììì ì미íë¤.</li> 560</ul> 561</li> 562</ul> 563<h3 id="Queryì-Mutation-íì "><a href="#Queryì-Mutation-íì " class="headerlink" title="Queryì Mutation íì "></a>Queryì Mutation íì </h3><p>GraphQLìì ëë¶ë¶ì ì¤ë¸ì í¸ íì ì´ì§ë§, ìëì ë íì ì í¹ë³í ì·¨ê¸ì ë°ëë¤.</p> 564<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">schema {</span><br><span class="line"> query: Query</span><br><span class="line"> mutation: Mutation</span><br><span class="line">}</span><br></pre></td></tr></table></figure> 565 566<p>모ë GraphQL ìë¹ì¤ë <code>query</code> íì ì ê°ì§ë©° <code>mutation</code> íì ì ìì ìë ìê³ ìì ìë ìë¤.<br>ë íì ì ì¼ë°ì ì¸ ì¤ë¸ì í¸ íì ê³¼ ê°ì§ë§, 모ë GraphQLì ì§ì ì ì´ ëë¤ë ì ìì í¹ë³ ì·¨ê¸ì ë°ëë¤.</p> 567<iframe style="width: 100%" height="400px" resize="vertical" frameBorder="0" src="https://supawer-graphql-study.herokuapp.com/graphiql?query=query%20%7B%0A%20%20user%20%7B%0A%20%20%20%20name%0A%20%20%20%20email%0A%20%20%7D%0A%7D&variables=%7B%7D"></iframe> 568 569<p>ì ì§ì문ì ìíí기 ìí´ì ìë¹ì¤ë ìëì ì¤í¤ë§ë¥¼ ê°ì ¸ì¼ íë¤.</p> 570<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">type Query {</span><br><span class="line">
570 user: User</span><br><span class="line">}</span><br></pre></td></tr></table></figure> 571 572<p><code>mutation</code> ëí ë¹ì·í ë°©ìì¼ë¡ ëìíë¤.</p> 573<h3 id="ì¤ì¹¼ë¼-íì "><a href="#ì¤ì¹¼ë¼-íì " class="headerlink" title="ì¤ì¹¼ë¼ íì "></a>ì¤ì¹¼ë¼ íì </h3><p>GraphQLì ë¤ìì ì¤ì¹¼ë¼ íì ì 기본ì¼ë¡ ì ê³µíë¤.</p> 574<ul> 575<li>Int: signed 32-bit integer.</li> 576<li>Float: signed double-precision floating-point.(64-bit)</li> 577<li>String: UTF-8 Character Sequence.</li> 578<li>Boolean</li> 579<li>ID: ê³ ì ìë³ì를 ëíë´ë íì ì´ë¤. ì£¼ë¡ ê°ì²´ë¥¼ ë¤ì íì¹í´ì¤ê±°ë, ìºìí¤ë¡ ì¬ì©ëë¤.<br>IDë Stringê³¼ ê°ì ë°©ìì¼ë¡ ì§ë ¬íëì§ë§, IDë ëë íëë¤ë ê²ì ì미를 ê°ì§ë¤.</li> 580</ul> 581<p>ëë¶ë¶ì GraphQL ìë¹ì¤ë ìì²´ì ì¼ë¡ ì¤ì¹¼ë¼ íì ì ì ìí ì ìë¤. Javaë ê°ë¥íë¤.</p> 582<p>ìëì ê°ì´ <code>Date</code> íì ì ì ìí ì ìë¤.</p> 583<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">scalas Date</span><br></pre></td></tr></table></figure> 584 585<p>ì´ì ëí´ ì´ë»ê² ì/ì§ë ¬íí ê²ì¸ì§ë 구íí기ì ë¬ë ¸ë¤.</p> 586<h3 id="Enumumeration"><a href="#Enumumeration" class="headerlink" title="Enumumeration"></a>Enumumeration</h3><p>ìëì ê°ì´ enumì ì ìí ì ìë¤.</p> 587<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">enum UserProvider {</span><br><span class="line"> NAVER</span><br><span class="line"> LINE</span><br><span class="line"> KAKAO</span><br><span class="line">}</span><br></pre></td></tr></table></figure> 588 589<p>GraphQL ìë¹ì¤ë ì¬ë¬ ì¸ì´ë¡ 구íë ì ìì¼ë¯ë¡ ê°ì ì¸ì´ì ë§ê² enumì 구ííë¤.<br>enumì ê°ì²´ë¡ ë¤ë£¨ë ì¸ì´ììë ê·¸ ííì ë릴 ì ìê² ì§ë§,<br>Javascriptì ê°ì´ enumì ì§ìíì§ ìë ì¸ì´ììë ë¨ìí integerë¡ ë¤ë¤ì§ ì ìë¤.<br><strong>íì§ë§ ì´ë¬í ìë¹ì¤ì ì¸ë¶ ëìì í´ë¼ì´ì¸í¸ì ë ¸ì¶ëì§ ìì¼ë©°,</strong><br><strong>í´ë¼ì´ì¸í¸ë ì ìë enum ê°ë¤ ë´ìì ì§ì, ë³ê²½ì ìíí ì ìë¤.</strong></p> 590<h3 id="Listì-Non-null"><a href="#Listì-Non-null" class="headerlink" title="Listì Non-null"></a>Listì Non-null</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">type Album {</span><br><span class="line"> name: String!</span><br><span class="line"> photos: [Photo!]!</span><br><span class="line">}</span><br></pre></td></tr></table></figure> 591 592<p><code>name</code>ì <code>String</code> íì ì´ë©° <code>!</code>를 ë¤ì ë¶ì¬ <code>Non-Null</code>ì ëª ìíìë¤.<br>ì´ ì ì½ì¼ë¡ ì¸í´ ìë²ë <code>name</code>ì <code>null</code> ê°ì ì¤ ì ìì¼ë©°, <code>null</code>ì´ ì¤ë ê²½ì°ìë ì¤ë¥ë¥¼ ë°ììí¨ë¤.<br><code>Non-Null</code>ì ì¸ììë ì ì¸í ì ìë¤.<br>ìëì ê°ì´ <code>Non-Null</code>ë¡ ì ì¸ë ì¸ìì <code>null</code>ì´ ë¤ì´ê°ë©´ ì¤ë¥ê° ì§ì를 ì¤íí ë ì¤ë¥ê° ë°ìíë¤.</p> 593<iframe style="width: 100%" height="400px" resize="vertical" frameBorder="0" src="https://supawer-graphql-study.herokuapp.com/graphiql?query=query%20getVehicleById(%24id%3A%20Int!)%7B%0A%20%20vehicle(id%3A%20%24id)%20%7B%0A%20%20%20%20name%0A%20%20%20%20manufacturer%0A%20%20%7D%0A%7D&variables=%7B%0A%20%20%22id%22%3A%20null%0A%7D&operationName=getVehicleById"></iframe> 594 595<p><code>Non-Null</code>ê³¼ <code>List</code>ë ì¡°í©í´ì ì¬ì©í ì ìë¤.</p> 596<table> 597<thead> 598<tr> 599<th>myField: [String!]</th> 600<th></th> 601</tr> 602</thead> 603<tbody><tr> 604<td><code>myField: null</code></td> 605<td>valid</td> 606</tr> 607<tr> 608<td><code>myField: []</code></td> 609<td>valid</td> 610</tr> 611<tr> 612<td><code>myField: ['a', 'b']</code></td> 613<td>valid</td> 614</tr> 615<tr> 616<td><code>myField: ['a', null, 'b']</code></td> 617<td>error</td> 618</tr> 619</tbody></table> 620<table> 621<thead> 622<tr> 623<th>myField: [String]!</th> 624<th></th> 625</tr> 626</thead> 627<tbody><tr> 628<td><code>myField: null</code></td> 629<td>error</td> 630</tr> 631<tr> 632<td><code>myField: []</code></td> 633<td>valid</td> 634</tr> 635<tr> 636<td><code>myField: ['a', 'b']</code></td> 637<td>valid</td> 638</tr> 639<tr> 640<td><code>myField: ['a', null, 'b']</code></td> 641<td>valid</td> 642</tr> 643</tbody></table> 644<h3 id="ì¸í°íì´ì¤"><a href="#ì¸í°íì´ì¤" class="headerlink" title="ì¸í°íì´ì¤"></a>ì¸í°íì´ì¤</h3><p>GraphQLì ì¶ì íì ì¼ë¡ ì¸í°íì´ì¤ë¥¼ ì ê³µíë¤.<br>ì¸í°íì´ì¤ë¥¼ ì ìíê³ êµ¬ííë ë°©ë²ì ë¤ìê³¼ ê°ë¤.</p> 645<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">interface Vehicle {</span><br><span class="line"> id: Int!</span><br><span class="line"> manufacturer: String!</span><br><span class="line"> name: String!</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">type Car implements Vehicle {</span><br><span class="line"> id: Int!</span><br><span class="line"> manufacturer: String!</span><br><span class="line"> name: String!</span><br><span class="line"> tire: String!</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">type Airplane implements Vehicle {</span><br><span class="line"> id: Int!</span><br><span class="line"> manufacturer: String!</span><br><span class="line"> name: String!</span><br><span class="line"> flyLimit: String!</span><br><span class="line">}</span><br></pre></td></tr></table></figure> 646 647<h3 id="Union"><a href="#Union" class="headerlink" title="Union"></a>Union</h3><p>Unionì ê° íì ì 묶ì´ë¼ ì ìë¤ë ì ì´ ì¸í°íì´ì¤ì
647 ë¹ì·íë ê³µíµ íëê° ì ì¸ëì§ ìëë¤ë ì ìì ì°¨ì´ê° ìë¤.<br>ë¤ìê³¼ ê°ì´ ì ì¸íë¤.</p> 648<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">union SearchResult = Album | Post | Todo</span><br></pre></td></tr></table></figure> 649 650<p>í´ë¼ì´ì¸í¸ììë ë§ì¹ íµí© ê²ìê³¼ë ê°ì´ ì¬ì©í ì ìë¤.</p> 651<iframe style="width: 100%" height="400px" resize="vertical" frameBorder="0" src="https://supawer-graphql-study.herokuapp.com/graphiql?query=%7B%0A%20%20search(title%3A%20%22quos%22)%20%7B%0A%20%20%20%20...%20on%20Album%20%7B%0A%20%20%20%20%20%20title%0A%20%20%20%20%7D%0A%20%20%20%20...%20on%20Post%20%7B%0A%20%20%20%20%20%20title%0A%20%20%20%20%7D%0A%20%20%20%20...%20on%20Todo%20%7B%0A%20%20%20%20%20%20completed%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D&variables=%7B%7D"></iframe> 652 653<h3 id="Input"><a href="#Input" class="headerlink" title="Input"></a>Input</h3><p>ì¬íê¹ì§ë enumì´ë String ë±ì ì¤ì¹¼ë¼ íì ë§ ì¸ìë¡ ì¬ì©íìì¼ë, ë ë³µì¡í ê°ì²´ ëí ì¸ìë¡ ë길 ì ìë¤.<br>ì´ ê²½ì° ìëì ê°ì´ <code>Input</code> íì ì ì ìí ì ìë¤.</p> 654<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">input CommentInput {</span><br><span class="line"> name: String!</span><br><span class="line"> email: String!</span><br><span class="line"> body: String!</span><br><span class="line">}</span><br></pre></td></tr></table></figure> 655 656<p>í¹ì Postì ëê¸ì ë¤ë ë³ê²½ì ë¤ìê³¼ ê°ì´ ííí ì ìê² ë¤.</p> 657<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">mutation CreateComment($id: Int!, $comment: CommentInput) {</span><br><span class="line"> createComment(id: $id, comment: $comment) {</span><br><span class="line"> id</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"># Variable</span><br><span class="line">{</span><br><span class="line"> "id": 1,</span><br><span class="line"> "comment": {</span><br><span class="line"> "name": "ëê¸ë¬",</span><br><span class="line"> "email": "ëê¸ë¬@naver.com",</span><br><span class="line"> "body": "ëê¸"</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure> 658 659<h1 id="ê²ì¦-Validation"><a href="#ê²ì¦-Validation" class="headerlink" title="ê²ì¦(Validation)"></a>ê²ì¦(Validation)</h1><p>íì ì ì¬ì©í기 ë문ì GraphQLì ì§ìê° ì í¨íì§ ì¬ë¶ë¥¼ 미리 ì ì ìë¤.<br>ëë¶ì ìë²ì í´ë¼ì´ì¸í¸ë ë°íìì¼ë¡ ê²ì¦ë기 ì ì ì§ì ìì± ìì ìì ì í¨íì§ ìì ì§ì를 ì ì ìë¤.</p> 660<p>fragmentë ì기 ìì ì 참조íì§ ëª»íë¤. ìë 구문ì ì¤ë¥ê° ë°ìíë¤.</p> 661<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">{</span><br><span class="line"> task {</span><br><span class="line"> ...TitleAndSubTasks</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">fragment TitleAndSubTasks on Task {</span><br><span class="line"> title</span><br><span class="line"> subTasks {</span><br><span class="line"> ...TitleAndSubTasks</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure> 662 663<p>ì§ì문ì í´ë¹ íì ì ì¡´ì¬íë íëë§ ì ì¸í´ì¼ íë¤. ìë 구문ì ì¤ë¥ê° ë°ìíë¤.</p> 664<iframe style="width: 100%" height="400px" resize="vertical" frameBorder="0" src="https://supawer-graphql-study.herokuapp.com/graphiql?query=%7B%0A%20%20todo(id%3A1)%20%7B%0A%20%20%20%20undefiendField%0A%20%20%7D%0A%7D&variables=%7B%7D"></iframe> 665 666<p>ëí ì¤ì¹¼ë¼, enum íì ì¸ì ë¤ë¥¸ íì ì ì§ìíë¤ë©´ ë°ëì í
666ì íë를 ëª ìí´ì¼ íë¤.<br>ìë ì§ìë ì¤ë¥ê° ë°ìíë¤.</p> 667<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">{</span><br><span class="line"> todo(id: 1)</span><br><span class="line">}</span><br></pre></td></tr></table></figure> 668 669<h1 id="Introspection"><a href="#Introspection" class="headerlink" title="Introspection"></a>Introspection</h1><p>GraphQLì Introspection Systemì¼ë¡ ì´ë¤ ì¤í¤ë§ê° ì ìëì´ ìëì§ íì¸í ì ìë¤.<br><code>__schema</code> íë를 ì¬ì©íì¬, ì´ë¤ íì ë¤ì´ ì¬ì©ê°ë¥í ì§ ì ì ìë¤.</p> 670<iframe style="width: 100%" height="400px" resize="vertical" frameBorder="0" src="https://supawer-graphql-study.herokuapp.com/graphiql?query=%7B%0A%20%20__schema%20%7B%0A%20%20%20%20types%20%7B%0A%20%20%20%20%20%20name%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D&variables=%7B%7D"></iframe> 671 672<p>꽤 ë§ì íì ë¤ì ë°ê²¬í ì ìë¤. ë¤ìê³¼ ê°ì´ ì 리í´ë³´ì.</p> 673<ul> 674<li>ì¬ì©ì ì ì ê°ì²´ íì : Query, Todo, Post ë± ê°ë°ìê° ì ìí íì .</li> 675<li>ì¤ì¹¼ë¼ íì : String, Int, Boolean</li> 676<li>Introspection System Type: __Schema, __Type, __TypeKind, __Field, __InputValue, __EnumValue, __Diretive</li> 677</ul> 678<p>ë§ì§ë§ì ë¤ë£¬ ë¶ë¶ì´ GraphQLì ì¤í¤ë§ë¥¼ ì¿ë³¼ ì ìë Introspectionì íì ë¤ì´ ëê² ë¤.</p> 679<p>ìëì ê°ì´ ìµì´ ì§ì ì ì´ìë <code>Query</code>를 ì¡°íí ì ìë¤.</p> 680<blockquote> 681<p>GraphiQLìì ì ê³µíë ì°ì¸¡ ìë¨ì <code>< Docs</code>ì ë¹êµí´ë³´ì.</p> 682</blockquote> 683<iframe style="width: 100%" height="400px" resize="vertical" frameBorder="0" src="https://supawer-graphql-study.herokuapp.com/graphiql?query=%7B%0A%20%20__schema%20%7B%0A%20%20%20%20queryType%20%7B%0A%20%20%20%20%20%20name%0A%20%20%20%20%20%20fields%20%7B%0A%20%20%20%20%20%20%20%20name%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D&variables=%7B%7D"></iframe> 684 685<p>í¹ì íì ì ëí´ìë <code>__type</code>ì¼ë¡ ì¡°íí ì ìë¤.</p> 686<iframe style="width: 100%" height="400px" resize="vertical" frameBorder="0" src="https://supawer-graphql-study.herokuapp.com/graphiql?query=%7B%0A%20%20__type(name%3A%20%22Post%22)%20%7B%0A%20%20%20%20name%0A%20%20%20%20kind%0A%20%20%20%20fields%20%7B%0A%20%20%20%20%20%20name%0A%20%20%20%20%20%20type%20%7B%0A%20%20%20%20%20%20%20%20ofType%20%7B%0A%20%20%20%20%20%20%20%20%20%20name%0A%20%20%20%20%20%20%20%20%20%20kind%0A%20%20%20%20%20%20%20%20%20%20description%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A&variables=%7B%7D"></iframe> 687 688<p>ì´ë¬í Introspectionì ëìì¼ë¡ IDEë ë¸ë¼ì°ì ìì ì¢ì UXí´ì ë§ë¤ ì ìë¤.<br>ì´ë¯¸ ì°ë¦¬ê° ì²´íí <a href="https://supawer-graphql-study.herokuapp.com/graphiql" target="_blank" rel="noopener">GraphiQL</a>ë ë§ì°¬ê°ì§ì´ê³ <a href="https://supawer-graphql-study.herokuapp.com/voyager" target="_blank" rel="noopener">Voyager</a> ëí 문ìíí ë ì ì©íë¤.</p> 689<h1 id="맺ìë§"><a href="#맺ìë§" class="headerlink" title="맺ìë§"></a>맺ìë§</h1><p>GraphQLì ëí´ì 기ì´ì ì¸ ë´ì©ë¤ì ìµíë³´ìë¤.</p> 690<p>GraphQLì íì 기ë°ì¼ë¡ ì¤í¤ë§ë¥¼ 미리 ì ìíë¤.<br>í´ë¼ì´ì¸í¸ë ê·¸ ì¤í¤ë§ë¥¼ ë°íì¼ë¡ ì§ì문ì ìì±, ì¡°ìí ì ìë¤.<br>미리 ì ìë ì¤í¤ë§ê° ìì¼ë¯ë¡ ì§ìì ì¬ì©ë ì¸ìì ëí ì í¨ì± ê²ì¬ë¥¼ ì½ê²í ì ìë¤.<br>ëí Introspection Systemì ì ê³µíê³ ìì¼ë¯ë¡ ì ì©í í¬í¼ í´ì ë§ë¤ê¸° ì½ê³ , 문ìíí기ë í¸ë¦¬íë¤.</p> 691<p>GraphQLì ì´ë»ê² ì¬ì©í ì ìëì§ë ìê² ëìì¼ë, ì¬ì¬ ë°±ìëììë ì´ë»ê² GraphQLì 구ííì ì§ ê¶ê¸í ì¦ìì´ë¤.<br>ì²ììë ì²´íí기, 기ì´, Spring Boot ì°ëì 3ë¶ìì¼ë¡ í¬ì¤í¸ë¥¼ ìì±í ìì ì´ìì¼ë, ìê°ì´ ë°ëì´ 5ë¶ìì´ ë ê² ê°ë¤.<br>ì²´íí기, 기ì´, Best Practice, GraphQL Java, GraphQL On Spring Bootë¡ ì§íí ìì ì´ë¤.</p> 692 693 694 </div> 695 696 697 698 699 700 701 702 703 704 <div> 705 <ul class="post-copyright"> 706 <li class="post-copyright-author"> 707 <strong>ìì±ì:</strong> 708 supawer0728 709 </li> 710 <li class="post-copyright-link"> 711 <strong>ì본ë§í¬:</strong>
712 <a href="https://supawer0728.github.io/2020/03/09/graphql-java2/" title="GraphQL Vol.2 - GraphQL 기ì´">https://supawer0728.github.io/2020/03/09/graphql-java2/</a> 713 </li> 714 <li class="post-copyright-license"> 715 <strong>ë¼ì´ì¼ì¤: </strong> 716 <a href="https://creativecommons.org/licenses/by-nc-sa/3.0/" rel="external nofollow" target="_blank">CC BY-NC-SA 3.0</a> 717 </li> 718</ul> 719 720 </div> 721 722 723 <footer class="post-footer"> 724 725 <div class="post-tags"> 726 727 <a href="/tags/graphql/" rel="tag"># graphql</a> 728 729 </div> 730 731 732 733 734 <div class="post-widgets"> 735 736 737 738 739 740 741 <div id="needsharebutton-postbottom"> 742 <span class="btn"> 743 <i class="fa fa-share-alt" aria-hidden="true"></i> 744 </span> 745 </div> 746 747 </div> 748 749 750 751 752 <div class="post-nav"> 753 <div class="post-nav-next post-nav-item"> 754 755 <a href="/2020/03/07/graphql-java1/" rel="next" title="GraphQL Vol.1 - GraphQL ì²´íí´ë³´ê¸°"> 756 <i class="fa fa-chevron-left"></i> GraphQL Vol.1 - GraphQL ì²´íí´ë³´ê¸° 757 </a> 758 759 </div> 760 761 <span class="post-nav-divider"></span> 762 763 <div class="post-nav-prev post-nav-item"> 764 765 </div> 766 </div> 767 768 769 770 771 </footer> 772 </div> 773 774 775 776 </article> 777 778 779 780 <div class="post-spread"> 781 782 </div> 783 </div> 784 785 786 </div> 787 788 789 790 791 792 793 <div class="comments" id="comments"> 794 <div id="disqus_thread"> 795 <noscript> 796 Please enable JavaScript to view the 797 <a href="https://disqus.com/?ref_noscript" target="_blank" rel="noopener">comments powered by Disqus.</a> 798 </noscript> 799 </div> 800 </div> 801 802 803 804 805 806 </div> 807 808 809 810 <div class="sidebar-toggle"> 811 <div class="sidebar-toggle-line-wrap"> 812 <span class="sidebar-toggle-line sidebar-toggle-line-first"></span> 813 <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span> 814 <span class="sidebar-toggle-line sidebar-toggle-line-last"></span> 815 </div> 816 </div> 817 818 <aside id="sidebar" class="sidebar"> 819 820 <div class="sidebar-inner"> 821 822 823 824 825 <ul class="sidebar-nav motion-element"> 826 <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap"> 827 목차 828 </li> 829 <li class="sidebar-nav-overview" data-target="site-overview-wrap"> 830 íì´ë³´ê¸° 831 </li> 832 </ul> 833 834 835 <section class="site-overview-wrap sidebar-panel"> 836 <div class="site-overview"> 837 <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person"> 838 839 <img class="site-author-image" itemprop="image" 840 src="/images/avatar.jpg" 841 alt="supawer0728" /> 842 843 <p class="site-author-name" itemprop="name">supawer0728</p> 844 <p class="site-description motion-element" itemprop="description"></p> 845 </div> 846 847 <nav class="site-state motion-element"> 848 849 850 <div class="site-state-item site-state-posts"> 851 852 <a href="/archives/%7C%7C%20archive"> 853 854 <span class="site-state-item-count">34</span> 855 <span class="site-state-item-name">í¬ì¤í¸</span> 856 </a> 857 </div> 858 859 860 861 862 863 <div class="site-state-item site-state-categories"> 864 <a href="/categories/index.html"> 865 <span class="site-state-item-count">17</span> 866 <span class="site-state-item-name">ì¹´í ê³ ë¦¬</span> 867 </a> 868 </div> 869 870 871 872 873 874 <div class="site-state-item site-state-tags"> 875 <a href="/tags/index.html">
876 <span class="site-state-item-count">51</span> 877 <span class="site-state-item-name">íê·¸</span> 878 </a> 879 </div> 880 881 882 </nav> 883 884 885 <div class="feed-link motion-element"> 886 <a href="/feed.xml" rel="alternate"> 887 <i class="fa fa-rss"></i> 888 RSS 889 </a> 890 </div> 891 892 893 894 <div class="links-of-author motion-element"> 895 896 <span class="links-of-author-item"> 897 <a href="https://github.com/supawer0728" target="_blank" title="GitHub"> 898 899 <i class="fa fa-fw fa-github"></i>GitHub</a> 900 </span> 901 902 </div> 903 904 905 906 907 908 909 910 911 912 913 </div> 914 </section> 915 916 917 <!--noindex--> 918 <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active"> 919 <div class="post-toc"> 920 921 922 923 924 925 926 <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#머리ë§"><span class="nav-number">1.</span> <span class="nav-text">머리ë§</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#ì§ì문-Query-ë³ê²½ë¬¸-Mutation"><span class="nav-number">2.</span> <span class="nav-text">ì§ì문(Query) / ë³ê²½ë¬¸(Mutation)</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#íë"><span class="nav-number">2.0.1.</span> <span class="nav-text">íë</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#ì§ì-ì¸ì-Arguments"><span class="nav-number">2.0.2.</span> <span class="nav-text">ì§ì ì¸ì(Arguments)</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#ë³ì¹-í ë¹-Aliases"><span class="nav-number">2.0.3.</span> <span class="nav-text">ë³ì¹ í ë¹(Aliases)</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Fragments"><span class="nav-number">2.0.4.</span> <span class="nav-text">Fragments</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#ì°ì°ìëª "><span class="nav-number">2.0.5.</span> <span class="nav-text">ì°ì°ìëª </span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#ë³ì-Variables"><span class="nav-number">2.0.6.</span> <span class="nav-text">ë³ì(Variables)</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#ë³ì-ì ì"><span class="nav-number">2.0.7.</span> <span class="nav-text">ë³ì ì ì</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#ë³ì-기본ê°"><span class="nav-number">2.0.8.</span> <span class="nav-text">ë³ì 기본ê°</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#ì§ìì-Directives"><span class="nav-number">2.0.9.</span> <span class="nav-text">ì§ìì(Directives)</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#ë³ê²½ë¬¸-Mutations"><span class="nav-number">2.0.10.</span> <span class="nav-text">ë³ê²½ë¬¸(Mutations)</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#mutationì-íëë¤"><span class="nav-number">2.0.11.</span> <span class="nav-text">mutationì íëë¤</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Inline-Fragments"><span class="nav-number">2.0.12.</span> <span class="nav-text">Inline Fragments</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#ë©í-íë"><span class="nav-number">2.0.13.</span> <span class="nav-text">ë©í íë</span></a></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#ì¤í¤ë§ì-íì "><span class="nav-number">3.</span> <span class="nav-text">ì¤í¤ë§ì íì </span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#íì "><span class="nav-number">3.0.1.</span> <span class="nav-text">íì </span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#ê°ì²´-íì ê³¼-íë"><span class="nav-number">
9263.0.2.</span> <span class="nav-text">ê°ì²´ íì ê³¼ íë</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Queryì-Mutation-íì "><span class="nav-number">3.0.3.</span> <span class="nav-text">Queryì Mutation íì </span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#ì¤ì¹¼ë¼-íì "><span class="nav-number">3.0.4.</span> <span class="nav-text">ì¤ì¹¼ë¼ íì </span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Enumumeration"><span class="nav-number">3.0.5.</span> <span class="nav-text">Enumumeration</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Listì-Non-null"><span class="nav-number">3.0.6.</span> <span class="nav-text">Listì Non-null</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#ì¸í°íì´ì¤"><span class="nav-number">3.0.7.</span> <span class="nav-text">ì¸í°íì´ì¤</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Union"><span class="nav-number">3.0.8.</span> <span class="nav-text">Union</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Input"><span class="nav-number">3.0.9.</span> <span class="nav-text">Input</span></a></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#ê²ì¦-Validation"><span class="nav-number">4.</span> <span class="nav-text">ê²ì¦(Validation)</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#Introspection"><span class="nav-number">5.</span> <span class="nav-text">Introspection</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#맺ìë§"><span class="nav-number">6.</span> <span class="nav-text">맺ìë§</span></a></li></ol></div> 927 928 929 </div> 930 </section> 931 <!--/noindex--> 932 933 934 935 936 </div> 937 </aside> 938 939 940 941 </div> 942 </main> 943 944 <footer id="footer" class="footer"> 945 <div class="footer-inner"> 946 <div class="copyright">© 2018 — <span itemprop="copyrightYear">2020</span> 947 <span class="with-love"> 948 <i class="fa fa-heart"></i> 949 </span> 950 <span class="author" itemprop="copyrightHolder">supawer0728</span> 951 952 953</div> 954 955 956 <div class="powered-by">Powered by <a class="theme-link" target="_blank" href="https://hexo.io">Hexo</a></div> 957 958 959 960 <span class="post-meta-divider">|</span> 961 962 963 964 <div class="theme-info">Theme — <a class="theme-link" target="_blank" href="https://github.com/iissnan/hexo-theme-next">NexT.Gemini</a> v5.1.4</div> 965 966 967 968 <div class="footer-custom">To Improve Human Life</div> 969 970 971 972 973 974 975 976 977 978 979 980 </div> 981 </footer> 982 983 984 <div class="back-to-top"> 985 <i class="fa fa-arrow-up"></i> 986 987 </div> 988 989 990 991 992 </div> 993 994 995
996<script type="text/javascript"> 997 if (Object.prototype.toString.call(window.Promise) !== '[object Function]') { 998 window.Promise = null; 999 } 1000</script>
1000 1001 1002 1003 1004 1005 1006 1007 1008 1009 1010 1011 1012 1013 1014 1015 1016 1017 1018 1019 1020 1021 1022 1023 1024 1025
1025<script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script>
1025 1026 1027 1028 1029 1030
1030<script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>
1030 1031 1032 1033 1034 1035
1035<script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>
1035 1036 1037 1038 1039 1040
1040<script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script>
1040 1041 1042 1043 1044 1045
1045<script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>
1045 1046 1047 1048 1049 1050
1050<script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
1050 1051 1052 1053 1054 1055 1056 1057
1057<script type="text/javascript" src="/js/src/utils.js?v=5.1.4"></script>
1057 1058 1059
1059<script type="text/javascript" src="/js/src/motion.js?v=5.1.4"></script>
1059 1060 1061 1062 1063 1064 1065 1066 1067
1067<script type="text/javascript" src="/js/src/affix.js?v=5.1.4"></script>
1067 1068 1069
1069<script type="text/javascript" src="/js/src/schemes/pisces.js?v=5.1.4"></script>
1069 1070 1071 1072 1073 1074
1074<script type="text/javascript" src="/js/src/scrollspy.js?v=5.1.4"></script>
vendor: 1 bytes, line 1074
1074
1075<script type="text/javascript" src="/js/src/post-details.js?v=5.1.4"></script>
1075 1076 1077 1078 1079 1080 1081 1082
1082<script type="text/javascript" src="/js/src/bootstrap.js?v=5.1.4"></script>
1082 1083 1084 1085 1086 1087 1088 1089 1090 1091 1092
1092<script id="dsq-count-scr" src="https://supawer0728-github-com.disqus.com/count.js" async></script>
1092 1093 1094 1095 1096
1096<script type="text/javascript"> 1097 var disqus_config = function () { 1098 this.page.url = 'https://supawer0728.github.io/2020/03/09/graphql-java2/'; 1099 this.page.identifier = '2020/03/09/graphql-java2/'; 1100 this.page.title = 'GraphQL Vol.2 - GraphQL 기ì´'; 1101 }; 1102 var d = document, s = d.createElement('script'); 1103 s.src = 'https://supawer0728-github-com.disqus.com/embed.js'; 1104 s.setAttribute('data-timestamp', '' + +new Date()); 1105 (d.head || d.body).appendChild(s); 1106 </script>
1106 1107 1108 1109 1110 1111 1112 1113 1114 1115 1116 1117 1118 1119 1120 1121 1122 1123 1124 1125 1126 1127 1128 1129 1130 1131 1132 1133 1134 1135 1136 1137
1137<script type="text/javascript"> 1138 // Popup Window; 1139 var isfetched = false; 1140 var isXml = true; 1141 // Search DB path; 1142 var search_path = "search.xml"; 1143 if (search_path.length === 0) { 1144 search_path = "search.xml"; 1145 } else if (/json$/i.test(search_path)) { 1146 isXml = false; 1147 } 1148 var path = "/" + search_path; 1149 // monitor main search box; 1150 1151 var onPopupClose = function (e) { 1152 $('.popup').hide(); 1153 $('#local-search-input').val(''); 1154 $('.search-result-list').remove(); 1155 $('#no-result').remove(); 1156 $(".local-search-pop-overlay").remove(); 1157 $('body').css('overflow', ''); 1158 } 1159 1160 function proceedsearch() { 1161 $("body") 1162 .append('<div class="search-popup-overlay local-search-pop-overlay"></div>') 1163 .css('overflow', 'hidden'); 1164 $('.search-popup-overlay').click(onPopupClose); 1165 $('.popup').toggle(); 1166 var $localSearchInput = $('#local-search-input'); 1167 $localSearchInput.attr("autocapitalize", "none"); 1168 $localSearchInput.attr("autocorrect", "off"); 1169 $localSearchInput.focus(); 1170 } 1171 1172 // search function; 1173 var searchFunc = function(path, search_id, content_id) { 1174 'use strict'; 1175 1176 // start loading animation 1177 $("body") 1178 .append('<div class="search-popup-overlay local-search-pop-overlay">' + 1179 '<div id="search-loading-icon">' + 1180 '<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' + 1181 '</div>' + 1182 '</div>') 1183 .css('overflow', 'hidden'); 1184 $("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center'); 1185 1186 $.ajax({ 1187 url: path, 1188 dataType: isXml ? "xml" : "json", 1189 async: true, 1190 success: function(res) { 1191 // get the contents from search data 1192 isfetched = true; 1193 $('.popup').detach().appendTo('.header-inner'); 1194 var datas = isXml ? $("entry", res).map(function() { 1195 return { 1196 title: $("title", this).text(), 1197 content: $("content",this).text(), 1198 url: $("url" , this).text() 1199 }; 1200 }).get() : res; 1201 var input = document.getElementById(search_id); 1202 var resultContent = document.getElementById(content_id); 1203 var inputEventFunction = function() { 1204 var searchText = input.value.trim().toLowerCase(); 1205 var keywords = searchText.split(/[\s\-]+/); 1206 if (keywords.length > 1) { 1207 keywords.push(searchText); 1208 } 1209 var resultItems = []; 1210 if (searchText.length > 0) { 1211 // perform local searching 1212 datas.forEach(function(data) { 1213 var isMatch = false; 1214 var hitCount = 0; 1215 var searchTextCount = 0; 1216 var title = data.title.trim(); 1217 var titleInLowerCase = title.toLowerCase(); 1218 var content = data.content.trim().replace(/<[^>]+>/g,""); 1219 var contentInLowerCase = content.toLowerCase(); 1220 var articleUrl = decodeURIComponent(data.url); 1221 var indexOfTitle = []; 1222 var indexOfContent = []; 1223 // only match articles with not empty titles 1224 if(title != '') { 1225 keywords.forEach(function(keyword) { 1226 function getIndexByWord(word, text, caseSensitive) { 1227 var wordLen = word.length; 1228 if (wordLen === 0) { 1229 return []; 1230 } 1231 var startPosition = 0, position = [], index = []; 1232 if (!caseSensitive) { 1233 text = text.toLowerCase(); 1234 word = word.toLowerCase(); 1235 } 1236 while ((position = text.indexOf(word, startPosition)) > -1) { 1237 index.push({position: position, word: word}); 1238 startPosition = position + wordLen; 1239 } 1240 return index; 1241 } 1242 1243 indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false)); 1244 indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false)); 1245 }); 1246 if (indexOfTitle.length > 0 || indexOfContent.length > 0) { 1247 isMatch = true; 1248 hitCount = indexOfTitle.length + indexOfContent.length; 1249 } 1250 } 1251 1252 // show search results 1253 1254 if (isMatch) { 1255 // sort index by position of keyword 1256 1257 [indexOfTitle, indexOfContent].forEach(function (index) { 1258 index.sort(function (itemLeft, itemRight) { 1259 if (itemRight.position !== itemLeft.position) { 1260 return itemRight.position - itemLeft.position; 1261 } else { 1262 return itemLeft.word.length - itemRight.word.length; 1263 } 1264 }); 1265 }); 1266 1267 // merge hits into slices 1268 1269 function mergeIntoSlice(text, start, end, index) { 1270 var item = index[index.length - 1]; 1271 var position = item.position; 1272 var word = item.word; 1273 var hits = []; 1274 var searchTextCountInSlice = 0; 1275 while (position + word.length <= end && index.length != 0) { 1276 if (word === searchText) { 1277 searchTextCountInSlice++; 1278 } 1279 hits.push({position: position, length: word.length}); 1280 var wordEnd = position + word.length; 1281 1282 // move to next position of hit 1283 1284 index.pop(); 1285 while (index.length != 0) { 1286 item = index[index.length - 1]; 1287 position = item.position; 1288 word = item.word; 1289 if (wordEnd > position) { 1290 index.pop(); 1291 } else { 1292 break; 1293 } 1294 } 1295 } 1296 searchTextCount += searchTextCountInSlice; 1297 return { 1298 hits: hits, 1299 start: start, 1300 end: end, 1301 searchTextCount: searchTextCountInSlice 1302 }; 1303 } 1304 1305 var slicesOfTitle = []; 1306 if (indexOfTitle.length != 0) { 1307 slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle)); 1308 } 1309 1310 var slicesOfContent = []; 1311 while (indexOfContent.length != 0) { 1312 var item = indexOfContent[indexOfContent.length - 1]; 1313 var position = item.position; 1314 var word = item.word; 1315 // cut out 100 characters 1316 var start = position - 20; 1317 var end = position + 80; 1318 if(start < 0){ 1319 start = 0; 1320 } 1321 if (end < position + word.length) { 1322 end = position + word.length; 1323 } 1324 if(end > content.length){ 1325 end = content.length; 1326 } 1327 slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent)); 1328 } 1329
1330 // sort slices in content by search text's count and hits' count 1331 1332 slicesOfContent.sort(function (sliceLeft, sliceRight) { 1333 if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) { 1334 return sliceRight.searchTextCount - sliceLeft.searchTextCount; 1335 } else if (sliceLeft.hits.length !== sliceRight.hits.length) { 1336 return sliceRight.hits.length - sliceLeft.hits.length; 1337 } else { 1338 return sliceLeft.start - sliceRight.start; 1339 } 1340 }); 1341 1342 // select top N slices in content 1343 1344 var upperBound = parseInt('-1'); 1345 if (upperBound >= 0) { 1346 slicesOfContent = slicesOfContent.slice(0, upperBound); 1347 } 1348 1349 // highlight title and content 1350 1351 function highlightKeyword(text, slice) { 1352 var result = ''; 1353 var prevEnd = slice.start; 1354 slice.hits.forEach(function (hit) { 1355 result += text.substring(prevEnd, hit.position); 1356 var end = hit.position + hit.length; 1357 result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>'; 1358 prevEnd = end; 1359 }); 1360 result += text.substring(prevEnd, slice.end); 1361 return result; 1362 } 1363 1364 var resultItem = ''; 1365 1366 if (slicesOfTitle.length != 0) { 1367 resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>"; 1368 } else { 1369 resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>"; 1370 } 1371 1372 slicesOfContent.forEach(function (slice) { 1373 resultItem += "<a href='" + articleUrl + "'>" + 1374 "<p class=\"search-result\">" + highlightKeyword(content, slice) + 1375 "...</p>" + "</a>"; 1376 }); 1377 1378 resultItem += "</li>"; 1379 resultItems.push({ 1380 item: resultItem, 1381 searchTextCount: searchTextCount, 1382 hitCount: hitCount, 1383 id: resultItems.length 1384 }); 1385 } 1386 }) 1387 }; 1388 if (keywords.length === 1 && keywords[0] === "") { 1389 resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>' 1390 } else if (resultItems.length === 0) { 1391 resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>' 1392 } else { 1393 resultItems.sort(function (resultLeft, resultRight) { 1394 if (resultLeft.searchTextCount !== resultRight.searchTextCount) { 1395 return resultRight.searchTextCount - resultLeft.searchTextCount; 1396 } else if (resultLeft.hitCount !== resultRight.hitCount) { 1397 return resultRight.hitCount - resultLeft.hitCount; 1398 } else { 1399 return resultRight.id - resultLeft.id; 1400 } 1401 }); 1402 var searchResultList = '<ul class=\"search-result-list\">'; 1403 resultItems.forEach(function (result) { 1404 searchResultList += result.item; 1405 }) 1406 searchResultList += "</ul>"; 1407 resultContent.innerHTML = searchResultList; 1408 } 1409 } 1410 1411 if ('auto' === 'auto') { 1412 input.addEventListener('input', inputEventFunction); 1413 } else { 1414 $('.search-icon').click(inputEventFunction); 1415 input.addEventListener('keypress', function (event) { 1416 if (event.keyCode === 13) { 1417 inputEventFunction(); 1418 } 1419 }); 1420 } 1421 1422 // remove loading animation 1423 $(".local-search-pop-overlay").remove(); 1424 $('body').css('overflow', ''); 1425 1426 proceedsearch(); 1427 } 1428 }); 1429 } 1430 1431 // handle and trigger popup window; 1432 $('.popup-trigger').click(function(e) { 1433 e.stopPropagation(); 1434 if (isfetched === false) { 1435 searchFunc(path, 'local-search-input', 'local-search-result'); 1436 } else { 1437 proceedsearch(); 1438 }; 1439 }); 1440 1441 $('.popup-btn-close').click(onPopupClose); 1442 $('.popup').click(function(e){ 1443 e.stopPropagation(); 1444 }); 1445 $(document).on('keyup', function (event) { 1446 var shouldDismissSearchPopup = event.which === 27 && 1447 $('.search-popup').is(':visible'); 1448 if (shouldDismissSearchPopup) { 1449 onPopupClose(); 1450 } 1451 }); 1452 </script>
1452 1453 1454 1455 1456 1457 1458 1459 1460 1461 1462 1463 1464 1465 1466 1467 <link rel="stylesheet" href="/lib/needsharebutton/needsharebutton.css"> 1468 1469 1470 1471
1471<script src="/lib/needsharebutton/needsharebutton.js"></script>
1471 1472 1473
1473<script> 1474 1475 pbOptions = {}; 1476 1477 pbOptions.iconStyle = "box"; 1478 1479 pbOptions.boxForm = "horizontal"; 1480 1481 pbOptions.position = "bottomCenter"; 1482 1483 pbOptions.networks = "Twitter,Facebook,GooglePlus,Evernote"; 1484 1485 new needShareButton('#needsharebutton-postbottom', pbOptions); 1486 1487 1488 </script>
1488 1489 1490 1491 1492 1493 1494 1495 1496 1497 1498</body> 1499</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.