m-lamonaca/dev-notes
1
0
Fork 0
mirror of https://github.com/m-lamonaca/dev-notes.git synced 2025-04-06 02:46:39 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions
dev-notes/misc/graph-ql.html

5005 lines
No EOL
132 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="author" content="Marcello Lamonaca">
<link rel="canonical" href="http://m-lamonaca.github.io/dev-notes/misc/graph-ql.html">
<link rel="prev" href="git.html">
<link rel="next" href="regular-expressions.html">
<link rel="icon" href="../assets/images/favicon.png">
<meta name="generator" content="mkdocs-1.6.1, mkdocs-material-9.5.34">
<title>GraphQL - Dev Notes</title>
<link rel="stylesheet" href="../assets/stylesheets/main.35f28582.min.css">
<link rel="stylesheet" href="../assets/stylesheets/palette.06af60db.min.css">
<script src="https://unpkg.com/iframe-worker/shim"></script>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i%7CRoboto+Mono:400,400i,700,700i&display=fallback">
<style>:root{--md-text-font:"Roboto";--md-code-font:"Roboto Mono"}</style>
<script>__md_scope=new URL("..",location),__md_hash=e=>[...e].reduce(((e,_)=>(e<<5)-e+_.charCodeAt(0)),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script>
<meta property="og:type" content="website" >
<meta property="og:title" content="GraphQL - Dev Notes" >
<meta property="og:description" content="None" >
<meta property="og:image" content="http://m-lamonaca.github.io/dev-notes/assets/images/social/misc/graph-ql.png" >
<meta property="og:image:type" content="image/png" >
<meta property="og:image:width" content="1200" >
<meta property="og:image:height" content="630" >
<meta property="og:url" content="http://m-lamonaca.github.io/dev-notes/misc/graph-ql.html" >
<meta name="twitter:card" content="summary_large_image" >
<meta name="twitter:title" content="GraphQL - Dev Notes" >
<meta name="twitter:description" content="None" >
<meta name="twitter:image" content="http://m-lamonaca.github.io/dev-notes/assets/images/social/misc/graph-ql.png" >
</head>
<body dir="ltr" data-md-color-scheme="default" data-md-color-primary="orange" data-md-color-accent="deep-orange">
<input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
<input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
<label class="md-overlay" for="__drawer"></label>
<div data-md-component="skip">
<a href="#graphql" class="md-skip">
Skip to content
</a>
</div>
<div data-md-component="announce">
</div>
<header class="md-header md-header--shadow md-header--lifted" data-md-component="header">
<nav class="md-header__inner md-grid" aria-label="Header">
<a href="../index.html" title="Dev Notes" class="md-header__button md-logo" aria-label="Dev Notes" data-md-component="logo">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M392.8 1.2c-17-4.9-34.7 5-39.6 22l-128 448c-4.9 17 5 34.7 22 39.6s34.7-5 39.6-22l128-448c4.9-17-5-34.7-22-39.6m80.6 120.1c-12.5 12.5-12.5 32.8 0 45.3l89.3 89.4-89.4 89.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l112-112c12.5-12.5 12.5-32.8 0-45.3l-112-112c-12.5-12.5-32.8-12.5-45.3 0zm-306.7 0c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3l112 112c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256l89.4-89.4c12.5-12.5 12.5-32.8 0-45.3"/></svg>
</a>
<label class="md-header__button md-icon" for="__drawer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/></svg>
</label>
<div class="md-header__title" data-md-component="header-title">
<div class="md-header__ellipsis">
<div class="md-header__topic">
<span class="md-ellipsis">
Dev Notes
</span>
</div>
<div class="md-header__topic" data-md-component="header-topic">
<span class="md-ellipsis">
GraphQL
</span>
</div>
</div>
</div>
<form class="md-header__option" data-md-component="palette">
<input class="md-option" data-md-color-media="(prefers-color-scheme: light)" data-md-color-scheme="default" data-md-color-primary="orange" data-md-color-accent="deep-orange" aria-label="Switch to dark mode" type="radio" name="__palette" id="__palette_0">
<label class="md-header__button md-icon" title="Switch to dark mode" for="__palette_1" hidden>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 8a4 4 0 0 0-4 4 4 4 0 0 0 4 4 4 4 0 0 0 4-4 4 4 0 0 0-4-4m0 10a6 6 0 0 1-6-6 6 6 0 0 1 6-6 6 6 0 0 1 6 6 6 6 0 0 1-6 6m8-9.31V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12z"/></svg>
</label>
<input class="md-option" data-md-color-media="(prefers-color-scheme: dark)" data-md-color-scheme="slate" data-md-color-primary="orange" data-md-color-accent="deep-orange" aria-label="Switch to light mode" type="radio" name="__palette" id="__palette_1">
<label class="md-header__button md-icon" title="Switch to light mode" for="__palette_0" hidden>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 18c-.89 0-1.74-.2-2.5-.55C11.56 16.5 13 14.42 13 12s-1.44-4.5-3.5-5.45C10.26 6.2 11.11 6 12 6a6 6 0 0 1 6 6 6 6 0 0 1-6 6m8-9.31V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12z"/></svg>
</label>
</form>
<script>var palette=__md_get("__palette");if(palette&&palette.color){if("(prefers-color-scheme)"===palette.color.media){var media=matchMedia("(prefers-color-scheme: light)"),input=document.querySelector(media.matches?"[data-md-color-media='(prefers-color-scheme: light)']":"[data-md-color-media='(prefers-color-scheme: dark)']");palette.color.media=input.getAttribute("data-md-color-media"),palette.color.scheme=input.getAttribute("data-md-color-scheme"),palette.color.primary=input.getAttribute("data-md-color-primary"),palette.color.accent=input.getAttribute("data-md-color-accent")}for(var[key,value]of Object.entries(palette.color))document.body.setAttribute("data-md-color-"+key,value)}</script>
<label class="md-header__button md-icon" for="__search">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5"/></svg>
</label>
<div class="md-search" data-md-component="search" role="dialog">
<label class="md-search__overlay" for="__search"></label>
<div class="md-search__inner" role="search">
<form class="md-search__form" name="search">
<input type="text" class="md-search__input" name="query" aria-label="Search" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" required>
<label class="md-search__icon md-icon" for="__search">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11z"/></svg>
</label>
<nav class="md-search__options" aria-label="Search">
<button type="reset" class="md-search__icon md-icon" title="Clear" aria-label="Clear" tabindex="-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>
</button>
</nav>
</form>
<div class="md-search__output">
<div class="md-search__scrollwrap" tabindex="0" data-md-scrollfix>
<div class="md-search-result" data-md-component="search-result">
<div class="md-search-result__meta">
Initializing search
</div>
<ol class="md-search-result__list" role="presentation"></ol>
</div>
</div>
</div>
</div>
</div>
<div class="md-header__source">
<a href="https://github.com/m-lamonaca/dev-notes" title="Go to repository" class="md-source" data-md-component="source">
<div class="md-source__icon md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81"/></svg>
</div>
<div class="md-source__repository">
GitHub
</div>
</a>
</div>
</nav>
<nav class="md-tabs" aria-label="Tabs" data-md-component="tabs">
<div class="md-grid">
<ul class="md-tabs__list">
<li class="md-tabs__item">
<a href="../index.html" class="md-tabs__link">
Home
</a>
</li>
<li class="md-tabs__item">
<a href="../containers/docker.html" class="md-tabs__link">
Containers
</a>
</li>
<li class="md-tabs__item">
<a href="../databases/redis.html" class="md-tabs__link">
Databases
</a>
</li>
<li class="md-tabs__item">
<a href="../languages/html/html.html" class="md-tabs__link">
Languages
</a>
</li>
<li class="md-tabs__item md-tabs__item--active">
<a href="git.html" class="md-tabs__link">
Misc
</a>
</li>
<li class="md-tabs__item">
<a href="../linux/filesystem/file-links.html" class="md-tabs__link">
Linux
</a>
</li>
</ul>
</div>
</nav>
</header>
<div class="md-container" data-md-component="container">
<main class="md-main" data-md-component="main">
<div class="md-main__inner md-grid">
<div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
<nav class="md-nav md-nav--primary md-nav--lifted" aria-label="Navigation" data-md-level="0">
<label class="md-nav__title" for="__drawer">
<a href="../index.html" title="Dev Notes" class="md-nav__button md-logo" aria-label="Dev Notes" data-md-component="logo">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M392.8 1.2c-17-4.9-34.7 5-39.6 22l-128 448c-4.9 17 5 34.7 22 39.6s34.7-5 39.6-22l128-448c4.9-17-5-34.7-22-39.6m80.6 120.1c-12.5 12.5-12.5 32.8 0 45.3l89.3 89.4-89.4 89.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l112-112c12.5-12.5 12.5-32.8 0-45.3l-112-112c-12.5-12.5-32.8-12.5-45.3 0zm-306.7 0c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3l112 112c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256l89.4-89.4c12.5-12.5 12.5-32.8 0-45.3"/></svg>
</a>
Dev Notes
</label>
<div class="md-nav__source">
<a href="https://github.com/m-lamonaca/dev-notes" title="Go to repository" class="md-source" data-md-component="source">
<div class="md-source__icon md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81"/></svg>
</div>
<div class="md-source__repository">
GitHub
</div>
</a>
</div>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../index.html" class="md-nav__link">
<span class="md-ellipsis">
Home
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2" >
<label class="md-nav__link" for="__nav_2" id="__nav_2_label" tabindex="0">
<span class="md-ellipsis">
Containers
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_2_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_2">
<span class="md-nav__icon md-icon"></span>
Containers
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../containers/docker.html" class="md-nav__link">
<span class="md-ellipsis">
Docker
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../containers/kubernetes.html" class="md-nav__link">
<span class="md-ellipsis">
Kubernetes
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3" >
<label class="md-nav__link" for="__nav_3" id="__nav_3_label" tabindex="0">
<span class="md-ellipsis">
Databases
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_3_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_3">
<span class="md-nav__icon md-icon"></span>
Databases
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../databases/redis.html" class="md-nav__link">
<span class="md-ellipsis">
Redis
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../databases/sql.html" class="md-nav__link">
<span class="md-ellipsis">
SQL
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../databases/mongo-db.html" class="md-nav__link">
<span class="md-ellipsis">
MongoDB
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4" >
<label class="md-nav__link" for="__nav_4" id="__nav_4_label" tabindex="0">
<span class="md-ellipsis">
Languages
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_4_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4">
<span class="md-nav__icon md-icon"></span>
Languages
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../languages/html/html.html" class="md-nav__link">
<span class="md-ellipsis">
HTML
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../languages/markdown.html" class="md-nav__link">
<span class="md-ellipsis">
Markdown
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../languages/css/css.html" class="md-nav__link">
<span class="md-ellipsis">
CSS
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../languages/c/c.html" class="md-nav__link">
<span class="md-ellipsis">
C
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../languages/kotlin/kotlin.html" class="md-nav__link">
<span class="md-ellipsis">
Kotlin
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../languages/swift/swift.html" class="md-nav__link">
<span class="md-ellipsis">
Swift
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_7" >
<label class="md-nav__link" for="__nav_4_7" id="__nav_4_7_label" tabindex="0">
<span class="md-ellipsis">
Assembly
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_7_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_7">
<span class="md-nav__icon md-icon"></span>
Assembly
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../languages/assembly/intel.html" class="md-nav__link">
<span class="md-ellipsis">
Intel
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../languages/assembly/riscv.html" class="md-nav__link">
<span class="md-ellipsis">
RISC-V
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_8" >
<label class="md-nav__link" for="__nav_4_8" id="__nav_4_8_label" tabindex="0">
<span class="md-ellipsis">
Python
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_8_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_8">
<span class="md-nav__icon md-icon"></span>
Python
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../languages/python/python.html" class="md-nav__link">
<span class="md-ellipsis">
Python
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_8_2" >
<label class="md-nav__link" for="__nav_4_8_2" id="__nav_4_8_2_label" tabindex="0">
<span class="md-ellipsis">
Modules
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="3" aria-labelledby="__nav_4_8_2_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_8_2">
<span class="md-nav__icon md-icon"></span>
Modules
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../languages/python/modules/argparse.html" class="md-nav__link">
<span class="md-ellipsis">
argparse
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../languages/python/modules/collections.html" class="md-nav__link">
<span class="md-ellipsis">
collection
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../languages/python/modules/csv.html" class="md-nav__link">
<span class="md-ellipsis">
csv
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../languages/python/modules/ftplib.html" class="md-nav__link">
<span class="md-ellipsis">
ftplib
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../languages/python/modules/itertools.html" class="md-nav__link">
<span class="md-ellipsis">
itertools
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../languages/python/modules/json.html" class="md-nav__link">
<span class="md-ellipsis">
json
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../languages/python/modules/logging.html" class="md-nav__link">
<span class="md-ellipsis">
logging
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../languages/python/modules/shutil.html" class="md-nav__link">
<span class="md-ellipsis">
shutil
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../languages/python/modules/smtplib.html" class="md-nav__link">
<span class="md-ellipsis">
smtplib
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../languages/python/modules/socket.html" class="md-nav__link">
<span class="md-ellipsis">
socket
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../languages/python/modules/sqlite.html" class="md-nav__link">
<span class="md-ellipsis">
sqlite
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../languages/python/modules/time-datetime.html" class="md-nav__link">
<span class="md-ellipsis">
time & datetime
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../languages/python/modules/unittest.html" class="md-nav__link">
<span class="md-ellipsis">
unittest
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_8_3" >
<label class="md-nav__link" for="__nav_4_8_3" id="__nav_4_8_3_label" tabindex="0">
<span class="md-ellipsis">
Libraries
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="3" aria-labelledby="__nav_4_8_3_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_8_3">
<span class="md-nav__icon md-icon"></span>
Libraries
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../languages/python/libs/tkinter.html" class="md-nav__link">
<span class="md-ellipsis">
TKinter
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../languages/python/libs/numpy.html" class="md-nav__link">
<span class="md-ellipsis">
Numpy
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../languages/python/libs/pandas.html" class="md-nav__link">
<span class="md-ellipsis">
Pandas
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../languages/python/libs/seaborn.html" class="md-nav__link">
<span class="md-ellipsis">
Seaborn
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../languages/python/libs/requests.html" class="md-nav__link">
<span class="md-ellipsis">
Requests
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../languages/python/libs/beautiful-soup.html" class="md-nav__link">
<span class="md-ellipsis">
Beatiful Soup
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_9" >
<label class="md-nav__link" for="__nav_4_9" id="__nav_4_9_label" tabindex="0">
<span class="md-ellipsis">
.NET
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_9_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_9">
<span class="md-nav__icon md-icon"></span>
.NET
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_9_1" >
<label class="md-nav__link" for="__nav_4_9_1" id="__nav_4_9_1_label" tabindex="0">
<span class="md-ellipsis">
C#
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="3" aria-labelledby="__nav_4_9_1_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_9_1">
<span class="md-nav__icon md-icon"></span>
C#
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../languages/dotnet/csharp/csharp.html" class="md-nav__link">
<span class="md-ellipsis">
C#
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../languages/dotnet/csharp/linq.html" class="md-nav__link">
<span class="md-ellipsis">
Linq
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../languages/dotnet/csharp/collections.html" class="md-nav__link">
<span class="md-ellipsis">
Collections
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../languages/dotnet/csharp/reactive-extensions.html" class="md-nav__link">
<span class="md-ellipsis">
Reactive Extensions
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../languages/dotnet/csharp/async-programming.html" class="md-nav__link">
<span class="md-ellipsis">
Async Programming
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../languages/dotnet/csharp/unit-tests.html" class="md-nav__link">
<span class="md-ellipsis">
Unit Tests
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_9_2" >
<label class="md-nav__link" for="__nav_4_9_2" id="__nav_4_9_2_label" tabindex="0">
<span class="md-ellipsis">
ASP.NET
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="3" aria-labelledby="__nav_4_9_2_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_9_2">
<span class="md-nav__icon md-icon"></span>
ASP.NET
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../languages/dotnet/asp.net/minimal-api.html" class="md-nav__link">
<span class="md-ellipsis">
Minimal API
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../languages/dotnet/asp.net/filters.html" class="md-nav__link">
<span class="md-ellipsis">
FIlters
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../languages/dotnet/asp.net/middleware.html" class="md-nav__link">
<span class="md-ellipsis">
Middleware
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../languages/dotnet/asp.net/razor-syntax.html" class="md-nav__link">
<span class="md-ellipsis">
Razor Syntax
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../languages/dotnet/asp.net/blazor.html" class="md-nav__link">
<span class="md-ellipsis">
Blazor
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../languages/dotnet/asp.net/signalr.html" class="md-nav__link">
<span class="md-ellipsis">
SignalR
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../languages/dotnet/asp.net/web-forms.html" class="md-nav__link">
<span class="md-ellipsis">
Web Forms
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_9_3" >
<label class="md-nav__link" for="__nav_4_9_3" id="__nav_4_9_3_label" tabindex="0">
<span class="md-ellipsis">
Database
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="3" aria-labelledby="__nav_4_9_3_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_9_3">
<span class="md-nav__icon md-icon"></span>
Database
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../languages/dotnet/database/ado.net.html" class="md-nav__link">
<span class="md-ellipsis">
ADO.NET
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../languages/dotnet/database/entity-framework.html" class="md-nav__link">
<span class="md-ellipsis">
Entity Framework
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_10" >
<label class="md-nav__link" for="__nav_4_10" id="__nav_4_10_label" tabindex="0">
<span class="md-ellipsis">
Java
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_10_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_10">
<span class="md-nav__icon md-icon"></span>
Java
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../languages/java/java.html" class="md-nav__link">
<span class="md-ellipsis">
Java
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../languages/java/java-collection-framework.html" class="md-nav__link">
<span class="md-ellipsis">
Java Collection Framework
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../languages/java/dao.html" class="md-nav__link">
<span class="md-ellipsis">
DAO
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_10_4" >
<label class="md-nav__link" for="__nav_4_10_4" id="__nav_4_10_4_label" tabindex="0">
<span class="md-ellipsis">
Web
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="3" aria-labelledby="__nav_4_10_4_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_10_4">
<span class="md-nav__icon md-icon"></span>
Web
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../languages/java/web/servlet.html" class="md-nav__link">
<span class="md-ellipsis">
Serverlet
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_10_4_2" >
<label class="md-nav__link" for="__nav_4_10_4_2" id="__nav_4_10_4_2_label" tabindex="0">
<span class="md-ellipsis">
Spring
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="4" aria-labelledby="__nav_4_10_4_2_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_10_4_2">
<span class="md-nav__icon md-icon"></span>
Spring
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../languages/java/spring/pom.xml.html" class="md-nav__link">
<span class="md-ellipsis">
POM
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../languages/java/spring/spring-project.html" class="md-nav__link">
<span class="md-ellipsis">
Project Structure
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_11" >
<label class="md-nav__link" for="__nav_4_11" id="__nav_4_11_label" tabindex="0">
<span class="md-ellipsis">
PHP
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_11_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_11">
<span class="md-nav__icon md-icon"></span>
PHP
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../languages/php/php.html" class="md-nav__link">
<span class="md-ellipsis">
PHP
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../languages/php/database.html" class="md-nav__link">
<span class="md-ellipsis">
Database
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../languages/php/web.html" class="md-nav__link">
<span class="md-ellipsis">
Web
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../languages/php/dependency-injection.html" class="md-nav__link">
<span class="md-ellipsis">
Dependency Injection
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../languages/php/unit-tests.html" class="md-nav__link">
<span class="md-ellipsis">
Unit Tests
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../languages/php/composer.html" class="md-nav__link">
<span class="md-ellipsis">
Composer
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../languages/php/psr-7.html" class="md-nav__link">
<span class="md-ellipsis">
PSR 7
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../languages/php/plates-templating.html" class="md-nav__link">
<span class="md-ellipsis">
Plates
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_11_9" >
<label class="md-nav__link" for="__nav_4_11_9" id="__nav_4_11_9_label" tabindex="0">
<span class="md-ellipsis">
Simple MVC
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="3" aria-labelledby="__nav_4_11_9_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_11_9">
<span class="md-nav__icon md-icon"></span>
Simple MVC
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../languages/php/simple-mvc/simple-mvc.html" class="md-nav__link">
<span class="md-ellipsis">
Simple MVC
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../languages/php/simple-mvc/rest-api.html" class="md-nav__link">
<span class="md-ellipsis">
REST API
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_12" >
<label class="md-nav__link" for="__nav_4_12" id="__nav_4_12_label" tabindex="0">
<span class="md-ellipsis">
Rust
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_12_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_12">
<span class="md-nav__icon md-icon"></span>
Rust
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../languages/rust/rust.html" class="md-nav__link">
<span class="md-ellipsis">
Rust
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../languages/rust/macros.html" class="md-nav__link">
<span class="md-ellipsis">
Macros
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../languages/rust/cargo.html" class="md-nav__link">
<span class="md-ellipsis">
Cargo
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../languages/rust/concurrency.html" class="md-nav__link">
<span class="md-ellipsis">
Concurrency
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../languages/rust/unit-tests.html" class="md-nav__link">
<span class="md-ellipsis">
Unit Tests
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_13" >
<label class="md-nav__link" for="__nav_4_13" id="__nav_4_13_label" tabindex="0">
<span class="md-ellipsis">
Javascript
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_13_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_13">
<span class="md-nav__icon md-icon"></span>
Javascript
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../languages/javascript/javascript.html" class="md-nav__link">
<span class="md-ellipsis">
Javascript
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../languages/javascript/dom.html" class="md-nav__link">
<span class="md-ellipsis">
DOM
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../languages/javascript/events-animation.html" class="md-nav__link">
<span class="md-ellipsis">
Events & Animation
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../languages/javascript/ajax.html" class="md-nav__link">
<span class="md-ellipsis">
AJAX
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../languages/javascript/jquery.html" class="md-nav__link">
<span class="md-ellipsis">
jQuery
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_13_6" >
<label class="md-nav__link" for="__nav_4_13_6" id="__nav_4_13_6_label" tabindex="0">
<span class="md-ellipsis">
React
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="3" aria-labelledby="__nav_4_13_6_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_13_6">
<span class="md-nav__icon md-icon"></span>
React
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../languages/javascript/react/react.html" class="md-nav__link">
<span class="md-ellipsis">
React
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../languages/javascript/react/react-router.html" class="md-nav__link">
<span class="md-ellipsis">
React Router
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../languages/javascript/react/react-tests.html" class="md-nav__link">
<span class="md-ellipsis">
React Tests
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../languages/javascript/react/redux.html" class="md-nav__link">
<span class="md-ellipsis">
Redux
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../languages/javascript/react/redux-tests.html" class="md-nav__link">
<span class="md-ellipsis">
Redux Tests
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="../languages/javascript/svelte/svelte.html" class="md-nav__link">
<span class="md-ellipsis">
Svelte
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_14" >
<label class="md-nav__link" for="__nav_4_14" id="__nav_4_14_label" tabindex="0">
<span class="md-ellipsis">
PowerShell
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_14_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_14">
<span class="md-nav__icon md-icon"></span>
PowerShell
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../languages/powershell/scripting.html" class="md-nav__link">
<span class="md-ellipsis">
Scripting
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../languages/powershell/commands.html" class="md-nav__link">
<span class="md-ellipsis">
Commands
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_15" >
<label class="md-nav__link" for="__nav_4_15" id="__nav_4_15_label" tabindex="0">
<span class="md-ellipsis">
Bash
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_15_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_15">
<span class="md-nav__icon md-icon"></span>
Bash
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../languages/bash/scripting.html" class="md-nav__link">
<span class="md-ellipsis">
Scripting
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../languages/bash/commands.html" class="md-nav__link">
<span class="md-ellipsis">
Commands
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--active md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5" checked>
<label class="md-nav__link" for="__nav_5" id="__nav_5_label" tabindex="">
<span class="md-ellipsis">
Misc
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_5_label" aria-expanded="true">
<label class="md-nav__title" for="__nav_5">
<span class="md-nav__icon md-icon"></span>
Misc
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="git.html" class="md-nav__link">
<span class="md-ellipsis">
Git
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--active">
<input class="md-nav__toggle md-toggle" type="checkbox" id="__toc">
<label class="md-nav__link md-nav__link--active" for="__toc">
<span class="md-ellipsis">
GraphQL
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<a href="graph-ql.html" class="md-nav__link md-nav__link--active">
<span class="md-ellipsis">
GraphQL
</span>
</a>
<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
<label class="md-nav__title" for="__toc">
<span class="md-nav__icon md-icon"></span>
Table of contents
</label>
<ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
<li class="md-nav__item">
<a href="#schema-and-types" class="md-nav__link">
<span class="md-ellipsis">
Schema and Types
</span>
</a>
<nav class="md-nav" aria-label="Schema and Types">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#object-types-and-fields" class="md-nav__link">
<span class="md-ellipsis">
Object types and fields
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#field-arguments" class="md-nav__link">
<span class="md-ellipsis">
Field Arguments
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#query-and-mutation-types" class="md-nav__link">
<span class="md-ellipsis">
Query and Mutation types
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#scalar-types" class="md-nav__link">
<span class="md-ellipsis">
Scalar Types
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#enumeration-types" class="md-nav__link">
<span class="md-ellipsis">
Enumeration Types
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#lists-and-non-null" class="md-nav__link">
<span class="md-ellipsis">
Lists and Non-Null
</span>
</a>
<nav class="md-nav" aria-label="Lists and Non-Null">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#interfaces" class="md-nav__link">
<span class="md-ellipsis">
Interfaces
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#union-type" class="md-nav__link">
<span class="md-ellipsis">
Union Type
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#input-type" class="md-nav__link">
<span class="md-ellipsis">
Input Type
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#queries-mutations-and-subscriptions" class="md-nav__link">
<span class="md-ellipsis">
Queries, Mutations and Subscriptions
</span>
</a>
<nav class="md-nav" aria-label="Queries, Mutations and Subscriptions">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#simple-query" class="md-nav__link">
<span class="md-ellipsis">
Simple Query
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#query-arguments" class="md-nav__link">
<span class="md-ellipsis">
Query Arguments
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#aliases" class="md-nav__link">
<span class="md-ellipsis">
Aliases
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#fragments" class="md-nav__link">
<span class="md-ellipsis">
Fragments
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#using-variables-inside-fragments" class="md-nav__link">
<span class="md-ellipsis">
Using variables inside fragments
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#operation-name" class="md-nav__link">
<span class="md-ellipsis">
Operation Name
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#variables" class="md-nav__link">
<span class="md-ellipsis">
Variables
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#directives" class="md-nav__link">
<span class="md-ellipsis">
Directives
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#mutations" class="md-nav__link">
<span class="md-ellipsis">
Mutations
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#subscriptions" class="md-nav__link">
<span class="md-ellipsis">
Subscriptions
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#inline-fragments" class="md-nav__link">
<span class="md-ellipsis">
Inline Fragments
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#meta-fields" class="md-nav__link">
<span class="md-ellipsis">
Meta Fields
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#execution" class="md-nav__link">
<span class="md-ellipsis">
Execution
</span>
</a>
<nav class="md-nav" aria-label="Execution">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#root-fields-and-resolvers" class="md-nav__link">
<span class="md-ellipsis">
Root fields and Resolvers
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="regular-expressions.html" class="md-nav__link">
<span class="md-ellipsis">
RegEx
</span>
</a>
</li>
<li class="md-nav__item">
<a href="ssh.html" class="md-nav__link">
<span class="md-ellipsis">
SSH
</span>
</a>
</li>
<li class="md-nav__item">
<a href="web-components.html" class="md-nav__link">
<span class="md-ellipsis">
WebComponents
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_6" >
<label class="md-nav__link" for="__nav_6" id="__nav_6_label" tabindex="0">
<span class="md-ellipsis">
Linux
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_6_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_6">
<span class="md-nav__icon md-icon"></span>
Linux
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_6_1" >
<label class="md-nav__link" for="__nav_6_1" id="__nav_6_1_label" tabindex="0">
<span class="md-ellipsis">
Filesystem
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_6_1_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_6_1">
<span class="md-nav__icon md-icon"></span>
Filesystem
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../linux/filesystem/file-links.html" class="md-nav__link">
<span class="md-ellipsis">
File Links
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../linux/filesystem/procfs.html" class="md-nav__link">
<span class="md-ellipsis">
/proc
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../linux/filesystem/sysfs.html" class="md-nav__link">
<span class="md-ellipsis">
/sys
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_6_2" >
<label class="md-nav__link" for="__nav_6_2" id="__nav_6_2_label" tabindex="0">
<span class="md-ellipsis">
System Init
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_6_2_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_6_2">
<span class="md-nav__icon md-icon"></span>
System Init
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../linux/init/systemd.html" class="md-nav__link">
<span class="md-ellipsis">
Systemd
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../linux/init/open-rc.html" class="md-nav__link">
<span class="md-ellipsis">
OpenRC
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" >
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
<label class="md-nav__title" for="__toc">
<span class="md-nav__icon md-icon"></span>
Table of contents
</label>
<ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
<li class="md-nav__item">
<a href="#schema-and-types" class="md-nav__link">
<span class="md-ellipsis">
Schema and Types
</span>
</a>
<nav class="md-nav" aria-label="Schema and Types">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#object-types-and-fields" class="md-nav__link">
<span class="md-ellipsis">
Object types and fields
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#field-arguments" class="md-nav__link">
<span class="md-ellipsis">
Field Arguments
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#query-and-mutation-types" class="md-nav__link">
<span class="md-ellipsis">
Query and Mutation types
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#scalar-types" class="md-nav__link">
<span class="md-ellipsis">
Scalar Types
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#enumeration-types" class="md-nav__link">
<span class="md-ellipsis">
Enumeration Types
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#lists-and-non-null" class="md-nav__link">
<span class="md-ellipsis">
Lists and Non-Null
</span>
</a>
<nav class="md-nav" aria-label="Lists and Non-Null">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#interfaces" class="md-nav__link">
<span class="md-ellipsis">
Interfaces
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#union-type" class="md-nav__link">
<span class="md-ellipsis">
Union Type
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#input-type" class="md-nav__link">
<span class="md-ellipsis">
Input Type
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#queries-mutations-and-subscriptions" class="md-nav__link">
<span class="md-ellipsis">
Queries, Mutations and Subscriptions
</span>
</a>
<nav class="md-nav" aria-label="Queries, Mutations and Subscriptions">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#simple-query" class="md-nav__link">
<span class="md-ellipsis">
Simple Query
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#query-arguments" class="md-nav__link">
<span class="md-ellipsis">
Query Arguments
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#aliases" class="md-nav__link">
<span class="md-ellipsis">
Aliases
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#fragments" class="md-nav__link">
<span class="md-ellipsis">
Fragments
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#using-variables-inside-fragments" class="md-nav__link">
<span class="md-ellipsis">
Using variables inside fragments
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#operation-name" class="md-nav__link">
<span class="md-ellipsis">
Operation Name
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#variables" class="md-nav__link">
<span class="md-ellipsis">
Variables
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#directives" class="md-nav__link">
<span class="md-ellipsis">
Directives
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#mutations" class="md-nav__link">
<span class="md-ellipsis">
Mutations
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#subscriptions" class="md-nav__link">
<span class="md-ellipsis">
Subscriptions
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#inline-fragments" class="md-nav__link">
<span class="md-ellipsis">
Inline Fragments
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#meta-fields" class="md-nav__link">
<span class="md-ellipsis">
Meta Fields
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#execution" class="md-nav__link">
<span class="md-ellipsis">
Execution
</span>
</a>
<nav class="md-nav" aria-label="Execution">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#root-fields-and-resolvers" class="md-nav__link">
<span class="md-ellipsis">
Root fields and Resolvers
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="md-content" data-md-component="content">
<article class="md-content__inner md-typeset">
<h1 id="graphql">GraphQL</h1>
<p><a href="https://www.howtographql.com/">How to GraphQL - The Fullstack Tutorial for GraphQL</a></p>
<p>GraphQL is a query language for APIa, and a server-side runtime for executing queries by using a type system for the data. GraphQL isn't tied to any specific database or storage engine and is instead backed by existing code and data.</p>
<p>A GraphQL service is created by defining types and fields on those types, then providing functions for each field on each type.</p>
<hr />
<h2 id="schema-and-types">Schema and Types</h2>
<h3 id="object-types-and-fields">Object types and fields</h3>
<p>The most basic components of a GraphQL schema are object types, which just represent a kind of object fetchable from the service, and what fields it has.</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">GraphQL</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-0-1">1</a></span>
<span class="normal"><a href="#__codelineno-0-2">2</a></span>
<span class="normal"><a href="#__codelineno-0-3">3</a></span>
<span class="normal"><a href="#__codelineno-0-4">4</a></span>
<span class="normal"><a href="#__codelineno-0-5">5</a></span>
<span class="normal"><a href="#__codelineno-0-6">6</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-0-1" name="__codelineno-0-1"></a><span class="k">type</span><span class="w"> </span><span class="err">Type</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-0-2" name="__codelineno-0-2"></a><span class="w"> </span><span class="nl">field</span><span class="p">:</span><span class="w"> </span><span class="n">Type</span>
<a id="__codelineno-0-3" name="__codelineno-0-3"></a><span class="w"> </span><span class="nl">field</span><span class="p">:</span><span class="w"> </span><span class="n">Type</span><span class="err">!</span><span class="w"> </span><span class="c"># non-nullable type</span>
<a id="__codelineno-0-4" name="__codelineno-0-4"></a><span class="w"> </span><span class="nl">field</span><span class="p">:</span><span class="w"> </span><span class="err">[</span><span class="n">Type</span><span class="err">]</span><span class="w"> </span><span class="c"># array of objects</span>
<a id="__codelineno-0-5" name="__codelineno-0-5"></a><span class="w"> </span><span class="nl">field</span><span class="p">:</span><span class="w"> </span><span class="err">[</span><span class="n">Type</span><span class="err">!]!</span><span class="w"> </span><span class="c"># non-nullable array of non-nullable objects</span>
<a id="__codelineno-0-6" name="__codelineno-0-6"></a><span class="p">}</span>
</code></pre></div></td></tr></table></div>
<h3 id="field-arguments">Field Arguments</h3>
<p>Every field on a GraphQL object type can have zero or more arguments. All arguments are named.</p>
<p>Arguments can be either <em>required</em> or <em>optional</em>. When an argument is optional, it's possible to define a default value.</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">GraphQL</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-1-1">1</a></span>
<span class="normal"><a href="#__codelineno-1-2">2</a></span>
<span class="normal"><a href="#__codelineno-1-3">3</a></span>
<span class="normal"><a href="#__codelineno-1-4">4</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-1-1" name="__codelineno-1-1"></a><span class="k">type</span><span class="w"> </span><span class="err">Type</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-1-2" name="__codelineno-1-2"></a><span class="w"> </span><span class="nl">field</span><span class="p">:</span><span class="w"> </span><span class="n">Type</span><span class="p">,</span>
<a id="__codelineno-1-3" name="__codelineno-1-3"></a><span class="w"> </span><span class="n">field</span><span class="p">(</span><span class="n">namedArg</span><span class="p">:</span><span class="w"> </span><span class="no">Type</span><span class="w"> </span><span class="err">=</span><span class="w"> </span><span class="n">defaultValue</span><span class="p">)</span><span class="err">:</span><span class="w"> </span><span class="n">Type</span>
<a id="__codelineno-1-4" name="__codelineno-1-4"></a><span class="p">}</span>
</code></pre></div></td></tr></table></div>
<h3 id="query-and-mutation-types">Query and Mutation types</h3>
<p>Every GraphQL service has a <code>query</code> type and may or may not have a <code>mutation</code> type. These types are the same as a regular object type, but they are special because they define the <em>entry point</em> of every GraphQL query.</p>
<h3 id="scalar-types">Scalar Types</h3>
<p>A GraphQL object type has a name and fields, but at some point those fields have to resolve to some concrete data.
That's where the scalar types come in: they represent the <em>leaves</em> of the query. Scalar types do not have sub-types and fields.</p>
<p>GraphQL comes with a set of default scalar types out of the box:</p>
<ul>
<li><code>Int</code>: A signed 32‐bit integer.</li>
<li><code>Float</code>: A signed double-precision floating-point value.</li>
<li><code>String</code>: A UTF‐8 character sequence.</li>
<li><code>Boolean</code>: <code>true</code> or <code>false</code>.</li>
<li><code>ID</code>: The ID scalar type represents a unique identifier, often used to refetch an object or as the key for a cache. The ID type is serialized in the same way as a <code>String</code>; however, defining it as an <code>ID</code> signifies that it is not intended to be human‐readable.</li>
</ul>
<p>In most GraphQL service implementations, there is also a way to specify custom scalar types.</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">GraphQL</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-2-1">1</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-2-1" name="__codelineno-2-1"></a><span class="k">scalar</span><span class="w"> </span><span class="err">ScalarType</span>
</code></pre></div></td></tr></table></div>
<p>Then it's up to the implementation to define how that type should be serialized, deserialized, and validated.</p>
<h3 id="enumeration-types">Enumeration Types</h3>
<p>Also called <em>Enums</em>, enumeration types are a special kind of scalar that is restricted to a particular set of allowed values.</p>
<p>This allows to:</p>
<ol>
<li>Validate that any arguments of this type are one of the allowed values</li>
<li>Communicate through the type system that a field will always be one of a finite set of values</li>
</ol>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">GraphQL</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-3-1">1</a></span>
<span class="normal"><a href="#__codelineno-3-2">2</a></span>
<span class="normal"><a href="#__codelineno-3-3">3</a></span>
<span class="normal"><a href="#__codelineno-3-4">4</a></span>
<span class="normal"><a href="#__codelineno-3-5">5</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-3-1" name="__codelineno-3-1"></a><span class="k">enum</span><span class="w"> </span><span class="err">Type</span><span class="p">{</span>
<a id="__codelineno-3-2" name="__codelineno-3-2"></a><span class="w"> </span><span class="n">VALUE</span><span class="p">,</span>
<a id="__codelineno-3-3" name="__codelineno-3-3"></a><span class="w"> </span><span class="n">VALUE</span><span class="p">,</span>
<a id="__codelineno-3-4" name="__codelineno-3-4"></a><span class="w"> </span><span class="p">...</span>
<a id="__codelineno-3-5" name="__codelineno-3-5"></a><span class="err">}</span>
</code></pre></div></td></tr></table></div>
<p><strong>Note</strong>: GraphQL service implementations in various languages will have their own language-specific way to deal with enums. In languages that support enums as a first-class citizen, the implementation might take advantage of that; in a language like JavaScript with no enum support, these values might be internally mapped to a set of integers. However, these details don't leak out to the client, which can operate entirely in terms of the string names of the enum values.</p>
<h2 id="lists-and-non-null">Lists and Non-Null</h2>
<p>Object types, scalars, and enums are the only kinds of types that can be defined in GraphQL.
But when used in other parts of the schema, or in the query variable declarations, it's possible apply additional <em>type modifiers</em> that affect <strong>validation</strong> of those values.</p>
<p>It's possible to mark a field as <em>Non-Null</em> by adding an exclamation mark, <code>!</code> after the type name. This means that the server always expects to return a non-null value for this field, and if it ends up getting a null value that will actually trigger a GraphQL execution error, letting the client know that something has gone wrong.</p>
<p>The <em>Non-Null</em> type modifier can also be used when defining arguments for a field, which will cause the GraphQL server to return a validation error if a null value is passed as that argument, whether in the GraphQL string or in the variables.</p>
<p>It's possible to use a type modifier to mark a type as a <code>List</code>, which indicates that this field will return an array of that type. In the schema language, this is denoted by wrapping the type in square brackets, <code>[</code> and <code>]</code>. It works the same for arguments, where the validation step will expect an array for that value.</p>
<h3 id="interfaces">Interfaces</h3>
<p>Like many type systems, GraphQL supports interfaces. An Interface is an abstract type that includes a certain set of fields that a type must include to implement the interface.</p>
<p>Interfaces are useful when returning an object or set of objects, but those might be of several different types.</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">GraphQL</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-4-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-4-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-4-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-4-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-4-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-4-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-4-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-4-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-4-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-4-10">10</a></span>
<span class="normal"><a href="#__codelineno-4-11">11</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-4-1" name="__codelineno-4-1"></a><span class="k">interface</span><span class="w"> </span><span class="err">Interface</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-4-2" name="__codelineno-4-2"></a><span class="w"> </span><span class="nl">fieldA</span><span class="p">:</span><span class="w"> </span><span class="n">TypeA</span>
<a id="__codelineno-4-3" name="__codelineno-4-3"></a><span class="w"> </span><span class="nl">fieldB</span><span class="p">:</span><span class="w"> </span><span class="n">TypeB</span>
<a id="__codelineno-4-4" name="__codelineno-4-4"></a><span class="p">}</span>
<a id="__codelineno-4-5" name="__codelineno-4-5"></a>
<a id="__codelineno-4-6" name="__codelineno-4-6"></a><span class="k">type</span><span class="w"> </span><span class="err">Type</span><span class="w"> </span><span class="k">implements</span><span class="w"> </span><span class="err">Interface</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-4-7" name="__codelineno-4-7"></a><span class="w"> </span><span class="nl">fieldA</span><span class="p">:</span><span class="w"> </span><span class="n">TypeA</span><span class="p">,</span>
<a id="__codelineno-4-8" name="__codelineno-4-8"></a><span class="w"> </span><span class="nl">fieldB</span><span class="p">:</span><span class="w"> </span><span class="n">TypeB</span>
<a id="__codelineno-4-9" name="__codelineno-4-9"></a><span class="w"> </span><span class="nl">field</span><span class="p">:</span><span class="w"> </span><span class="n">Type</span><span class="p">,</span>
<a id="__codelineno-4-10" name="__codelineno-4-10"></a><span class="w"> </span><span class="p">...</span>
<a id="__codelineno-4-11" name="__codelineno-4-11"></a><span class="err">}</span>
</code></pre></div></td></tr></table></div>
<h3 id="union-type">Union Type</h3>
<p>Interfaces are useful when returning an object or set of objects, but those might be of several different types.</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">GraphQL</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-5-1">1</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-5-1" name="__codelineno-5-1"></a><span class="k">union</span><span class="w"> </span><span class="err">Union</span><span class="w"> </span><span class="err">=</span><span class="w"> </span><span class="err">TypeA</span><span class="w"> </span><span class="err">|</span><span class="w"> </span><span class="err">TypeB</span><span class="w"> </span><span class="err">|</span><span class="w"> </span><span class="err">TypeC</span>
</code></pre></div></td></tr></table></div>
<p><strong>Note</strong>: members of a union type need to be <em>concrete</em> object types; it's not possible to create a union type out of interfaces or other unions.</p>
<h3 id="input-type">Input Type</h3>
<p>In the GraphQL schema language, input types look exactly the same as regular object types, but with the keyword input instead of type:</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">GraphQL</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-6-1">1</a></span>
<span class="normal"><a href="#__codelineno-6-2">2</a></span>
<span class="normal"><a href="#__codelineno-6-3">3</a></span>
<span class="normal"><a href="#__codelineno-6-4">4</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-6-1" name="__codelineno-6-1"></a><span class="k">input</span><span class="w"> </span><span class="err">Input</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-6-2" name="__codelineno-6-2"></a><span class="w"> </span><span class="nl">field</span><span class="p">:</span><span class="w"> </span><span class="n">Type</span><span class="p">,</span>
<a id="__codelineno-6-3" name="__codelineno-6-3"></a><span class="w"> </span><span class="p">...</span>
<a id="__codelineno-6-4" name="__codelineno-6-4"></a><span class="err">}</span>
</code></pre></div></td></tr></table></div>
<p>The fields on an input object type can themselves refer to input object types, but it's not possible to mix input and output types in the schema.
Input object types also can't have arguments on their fields.</p>
<hr />
<h2 id="queries-mutations-and-subscriptions">Queries, Mutations and Subscriptions</h2>
<h3 id="simple-query">Simple Query</h3>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">GraphQL</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-7-1">1</a></span>
<span class="normal"><a href="#__codelineno-7-2">2</a></span>
<span class="normal"><a href="#__codelineno-7-3">3</a></span>
<span class="normal"><a href="#__codelineno-7-4">4</a></span>
<span class="normal"><a href="#__codelineno-7-5">5</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-7-1" name="__codelineno-7-1"></a><span class="p">{</span>
<a id="__codelineno-7-2" name="__codelineno-7-2"></a><span class="w"> </span><span class="n">field</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="c"># root field</span>
<a id="__codelineno-7-3" name="__codelineno-7-3"></a><span class="w"> </span><span class="p">...</span><span class="w"> </span><span class="c"># payload</span>
<a id="__codelineno-7-4" name="__codelineno-7-4"></a><span class="w"> </span><span class="err">}</span>
<a id="__codelineno-7-5" name="__codelineno-7-5"></a><span class="err">}</span>
</code></pre></div></td></tr></table></div>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">JSON</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-8-1">1</a></span>
<span class="normal"><a href="#__codelineno-8-2">2</a></span>
<span class="normal"><a href="#__codelineno-8-3">3</a></span>
<span class="normal"><a href="#__codelineno-8-4">4</a></span>
<span class="normal"><a href="#__codelineno-8-5">5</a></span>
<span class="normal"><a href="#__codelineno-8-6">6</a></span>
<span class="normal"><a href="#__codelineno-8-7">7</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-8-1" name="__codelineno-8-1"></a><span class="p">{</span>
<a id="__codelineno-8-2" name="__codelineno-8-2"></a><span class="w"> </span><span class="nt">&quot;data&quot;</span><span class="w"> </span><span class="p">:</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-8-3" name="__codelineno-8-3"></a><span class="w"> </span><span class="nt">&quot;field&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-8-4" name="__codelineno-8-4"></a><span class="w"> </span><span class="err">...</span>
<a id="__codelineno-8-5" name="__codelineno-8-5"></a><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-8-6" name="__codelineno-8-6"></a><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-8-7" name="__codelineno-8-7"></a><span class="p">}</span>
</code></pre></div></td></tr></table></div>
<h3 id="query-arguments">Query Arguments</h3>
<p>In a system like REST, it's possible to only pass a single set of arguments - the query parameters and URL segments in your request.</p>
<p>But in GraphQL, every field and nested object can get its own set of arguments, making GraphQL a complete replacement for making multiple API fetches.</p>
<p>It's aldo possible to pass arguments into scalar fields, to implement data transformations once on the server, instead of on every client separately.</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">GraphQL</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-9-1">1</a></span>
<span class="normal"><a href="#__codelineno-9-2">2</a></span>
<span class="normal"><a href="#__codelineno-9-3">3</a></span>
<span class="normal"><a href="#__codelineno-9-4">4</a></span>
<span class="normal"><a href="#__codelineno-9-5">5</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-9-1" name="__codelineno-9-1"></a><span class="p">{</span>
<a id="__codelineno-9-2" name="__codelineno-9-2"></a><span class="w"> </span><span class="n">fieldA</span><span class="p">(</span><span class="n">arg</span><span class="p">:</span><span class="w"> </span><span class="no">value</span><span class="p">)</span><span class="w"> </span><span class="c"># filter results</span>
<a id="__codelineno-9-3" name="__codelineno-9-3"></a><span class="w"> </span><span class="n">fieldB</span><span class="p">(</span><span class="n">arg</span><span class="p">:</span><span class="w"> </span><span class="no">value</span><span class="p">)</span>
<a id="__codelineno-9-4" name="__codelineno-9-4"></a><span class="w"> </span><span class="p">...</span>
<a id="__codelineno-9-5" name="__codelineno-9-5"></a><span class="err">}</span>
</code></pre></div></td></tr></table></div>
<h3 id="aliases">Aliases</h3>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">GraphQL</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-10-1">1</a></span>
<span class="normal"><a href="#__codelineno-10-2">2</a></span>
<span class="normal"><a href="#__codelineno-10-3">3</a></span>
<span class="normal"><a href="#__codelineno-10-4">4</a></span>
<span class="normal"><a href="#__codelineno-10-5">5</a></span>
<span class="normal"><a href="#__codelineno-10-6">6</a></span>
<span class="normal"><a href="#__codelineno-10-7">7</a></span>
<span class="normal"><a href="#__codelineno-10-8">8</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-10-1" name="__codelineno-10-1"></a><span class="p">{</span>
<a id="__codelineno-10-2" name="__codelineno-10-2"></a><span class="w"> </span><span class="nl">aliasA</span><span class="p">:</span><span class="w"> </span><span class="n">field</span><span class="p">(</span><span class="n">arg</span><span class="p">:</span><span class="w"> </span><span class="no">valueA</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-10-3" name="__codelineno-10-3"></a><span class="w"> </span><span class="n">field</span>
<a id="__codelineno-10-4" name="__codelineno-10-4"></a><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-10-5" name="__codelineno-10-5"></a><span class="w"> </span><span class="nl">aliasB</span><span class="p">:</span><span class="w"> </span><span class="n">field</span><span class="p">(</span><span class="n">arg</span><span class="p">:</span><span class="w"> </span><span class="no">valueB</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-10-6" name="__codelineno-10-6"></a><span class="w"> </span><span class="n">field</span>
<a id="__codelineno-10-7" name="__codelineno-10-7"></a><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-10-8" name="__codelineno-10-8"></a><span class="p">}</span>
</code></pre></div></td></tr></table></div>
<h3 id="fragments">Fragments</h3>
<p>Fragments allow to construct sets of fields, and then include them in queries where that are needed.
The concept of fragments is frequently used to split complicated application data requirements into smaller chunks.</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">GraphQL</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-11-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-11-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-11-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-11-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-11-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-11-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-11-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-11-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-11-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-11-10">10</a></span>
<span class="normal"><a href="#__codelineno-11-11">11</a></span>
<span class="normal"><a href="#__codelineno-11-12">12</a></span>
<span class="normal"><a href="#__codelineno-11-13">13</a></span>
<span class="normal"><a href="#__codelineno-11-14">14</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-11-1" name="__codelineno-11-1"></a><span class="p">{</span>
<a id="__codelineno-11-2" name="__codelineno-11-2"></a><span class="w"> </span><span class="nl">aliasA</span><span class="p">:</span><span class="w"> </span><span class="n">field</span><span class="p">(</span><span class="n">arg</span><span class="p">:</span><span class="w"> </span><span class="no">valueA</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-11-3" name="__codelineno-11-3"></a><span class="w"> </span><span class="p">...</span><span class="n">fragment</span>
<a id="__codelineno-11-4" name="__codelineno-11-4"></a><span class="w"> </span><span class="p">},</span>
<a id="__codelineno-11-5" name="__codelineno-11-5"></a><span class="w"> </span><span class="nl">aliasB</span><span class="p">:</span><span class="w"> </span><span class="n">field</span><span class="p">(</span><span class="n">arg</span><span class="p">:</span><span class="w"> </span><span class="no">valueB</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-11-6" name="__codelineno-11-6"></a><span class="w"> </span><span class="p">...</span><span class="n">fragment</span>
<a id="__codelineno-11-7" name="__codelineno-11-7"></a><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-11-8" name="__codelineno-11-8"></a><span class="p">}</span>
<a id="__codelineno-11-9" name="__codelineno-11-9"></a>
<a id="__codelineno-11-10" name="__codelineno-11-10"></a><span class="c"># define a set of fields to be retrieved </span>
<a id="__codelineno-11-11" name="__codelineno-11-11"></a><span class="k">fragment</span><span class="w"> </span><span class="nf">fragment</span><span class="w"> </span><span class="k">on</span><span class="w"> </span><span class="nc">Type</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-11-12" name="__codelineno-11-12"></a><span class="w"> </span><span class="n">field</span>
<a id="__codelineno-11-13" name="__codelineno-11-13"></a><span class="w"> </span><span class="p">...</span>
<a id="__codelineno-11-14" name="__codelineno-11-14"></a><span class="err">}</span>
</code></pre></div></td></tr></table></div>
<h3 id="using-variables-inside-fragments">Using variables inside fragments</h3>
<p>It is possible for fragments to access variables declared in the query or mutation.</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">GraphQL</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-12-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-12-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-12-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-12-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-12-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-12-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-12-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-12-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-12-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-12-10">10</a></span>
<span class="normal"><a href="#__codelineno-12-11">11</a></span>
<span class="normal"><a href="#__codelineno-12-12">12</a></span>
<span class="normal"><a href="#__codelineno-12-13">13</a></span>
<span class="normal"><a href="#__codelineno-12-14">14</a></span>
<span class="normal"><a href="#__codelineno-12-15">15</a></span>
<span class="normal"><a href="#__codelineno-12-16">16</a></span>
<span class="normal"><a href="#__codelineno-12-17">17</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-12-1" name="__codelineno-12-1"></a><span class="k">query</span><span class="w"> </span><span class="nf">Query</span><span class="p">(</span><span class="nv">$var</span><span class="p">:</span><span class="w"> </span><span class="nc">Type</span><span class="w"> </span><span class="p">=</span><span class="w"> </span><span class="no">value</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-12-2" name="__codelineno-12-2"></a><span class="w"> </span><span class="nl">aliasA</span><span class="p">:</span><span class="w"> </span><span class="n">field</span><span class="p">(</span><span class="n">arg</span><span class="p">:</span><span class="w"> </span><span class="no">valueA</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-12-3" name="__codelineno-12-3"></a><span class="w"> </span><span class="p">...</span><span class="n">fragment</span>
<a id="__codelineno-12-4" name="__codelineno-12-4"></a><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-12-5" name="__codelineno-12-5"></a><span class="w"> </span><span class="nl">aliasB</span><span class="p">:</span><span class="w"> </span><span class="n">field</span><span class="p">(</span><span class="n">arg</span><span class="p">:</span><span class="w"> </span><span class="no">valueB</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-12-6" name="__codelineno-12-6"></a><span class="w"> </span><span class="p">...</span><span class="n">fragment</span>
<a id="__codelineno-12-7" name="__codelineno-12-7"></a><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-12-8" name="__codelineno-12-8"></a><span class="p">}</span>
<a id="__codelineno-12-9" name="__codelineno-12-9"></a>
<a id="__codelineno-12-10" name="__codelineno-12-10"></a><span class="k">fragment</span><span class="w"> </span><span class="nf">fragment</span><span class="w"> </span><span class="k">on</span><span class="w"> </span><span class="nc">Type</span><span class="p">{</span>
<a id="__codelineno-12-11" name="__codelineno-12-11"></a><span class="w"> </span><span class="n">field</span>
<a id="__codelineno-12-12" name="__codelineno-12-12"></a><span class="w"> </span><span class="n">field</span><span class="p">(</span><span class="n">arg</span><span class="p">:</span><span class="w"> </span><span class="nv">$var</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-12-13" name="__codelineno-12-13"></a><span class="w"> </span><span class="n">field</span>
<a id="__codelineno-12-14" name="__codelineno-12-14"></a><span class="w"> </span><span class="p">...</span>
<a id="__codelineno-12-15" name="__codelineno-12-15"></a><span class="w"> </span><span class="err">}</span>
<a id="__codelineno-12-16" name="__codelineno-12-16"></a><span class="w"> </span><span class="err">}</span>
<a id="__codelineno-12-17" name="__codelineno-12-17"></a><span class="err">}</span>
</code></pre></div></td></tr></table></div>
<h3 id="operation-name">Operation Name</h3>
<p>The <em>operation type</em> is either <code>query</code>, <code>mutation</code>, or <code>subscription</code> and describes what type of operation it's intended to be done. The operation type is required unless when using the <em>query shorthand syntax</em>, in which case it's not possible to supply a name or variable definitions for the operation.</p>
<p>The <em>operation name</em> is a meaningful and explicit name for the operation. It is only required in multi-operation documents, but its use is encouraged because it is very helpful for debugging and server-side logging. When something goes wrong it is easier to identify a query in the codebase by name instead of trying to decipher the contents.</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">GraphQL</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-13-1">1</a></span>
<span class="normal"><a href="#__codelineno-13-2">2</a></span>
<span class="normal"><a href="#__codelineno-13-3">3</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-13-1" name="__codelineno-13-1"></a><span class="k">query</span><span class="w"> </span><span class="nf">Operation</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-13-2" name="__codelineno-13-2"></a><span class="w"> </span><span class="p">...</span>
<a id="__codelineno-13-3" name="__codelineno-13-3"></a><span class="err">}</span>
</code></pre></div></td></tr></table></div>
<h3 id="variables">Variables</h3>
<p>When working with variables, three things need to be done:</p>
<ol>
<li>Replace the static value in the query with <code>$variableName</code></li>
<li>Declare <code>$variableName</code> as one of the variables accepted by the query</li>
<li>Pass <code>variableName: value</code> in the separate, transport-specific (usually JSON) variables dictionary</li>
</ol>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">GraphQL</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-14-1">1</a></span>
<span class="normal"><a href="#__codelineno-14-2">2</a></span>
<span class="normal"><a href="#__codelineno-14-3">3</a></span>
<span class="normal"><a href="#__codelineno-14-4">4</a></span>
<span class="normal"><a href="#__codelineno-14-5">5</a></span>
<span class="normal"><a href="#__codelineno-14-6">6</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-14-1" name="__codelineno-14-1"></a><span class="k">query</span><span class="w"> </span><span class="nf">Operation</span><span class="p">(</span><span class="nv">$var</span><span class="p">:</span><span class="w"> </span><span class="nc">Type</span><span class="w"> </span><span class="p">=</span><span class="w"> </span><span class="no">defaultValue</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-14-2" name="__codelineno-14-2"></a><span class="w"> </span><span class="n">field</span><span class="p">(</span><span class="n">arg</span><span class="p">:</span><span class="w"> </span><span class="nv">$var</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-14-3" name="__codelineno-14-3"></a><span class="w"> </span><span class="n">field</span>
<a id="__codelineno-14-4" name="__codelineno-14-4"></a><span class="w"> </span><span class="p">...</span>
<a id="__codelineno-14-5" name="__codelineno-14-5"></a><span class="w"> </span><span class="err">}</span>
<a id="__codelineno-14-6" name="__codelineno-14-6"></a><span class="err">}</span>
</code></pre></div></td></tr></table></div>
<p>All declared variables must be either <em>scalars</em>, <em>enums</em>, or <em>input</em> object types. So to pass a complex object into a field, the input type that matches on the server must be known.</p>
<p>Variable definitions can be <em>optional</em> or <em>required</em>. If the field requires a non-null argument, then the variable has to be required as well.</p>
<p>Default values can also be assigned to the variables in the query by adding the default value after the type declaration. When default values are provided for all variables, it's possible to call the query without passing any variables. If any variables are passed as part of the variables dictionary, they will override the defaults.</p>
<h3 id="directives">Directives</h3>
<p>A directive can be attached to a field or fragment inclusion, and can affect execution of the query in any way the server desires.</p>
<p>The core GraphQL specification includes exactly two directives, which must be supported by any spec-compliant GraphQL server implementation:</p>
<ul>
<li><code>@include(if: Boolean)</code> Only include this field in the result if the argument is <code>true</code>.</li>
<li><code>@skip(if: Boolean)</code> Skip this field if the argument is <code>true</code>.</li>
</ul>
<p>Server implementations may also add experimental features by defining completely new directives.</p>
<h3 id="mutations">Mutations</h3>
<p>Operations of mutations:</p>
<ul>
<li><strong>Creating</strong> new data</li>
<li><strong>Updating</strong> existing data</li>
<li><strong>Deleting</strong> existing data</li>
</ul>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">GraphQL</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-15-1">1</a></span>
<span class="normal"><a href="#__codelineno-15-2">2</a></span>
<span class="normal"><a href="#__codelineno-15-3">3</a></span>
<span class="normal"><a href="#__codelineno-15-4">4</a></span>
<span class="normal"><a href="#__codelineno-15-5">5</a></span>
<span class="normal"><a href="#__codelineno-15-6">6</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-15-1" name="__codelineno-15-1"></a><span class="k">mutation</span><span class="w"> </span><span class="nf">Operation</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-15-2" name="__codelineno-15-2"></a><span class="w"> </span><span class="n">createObject</span><span class="p">(</span><span class="n">arg</span><span class="p">:</span><span class="w"> </span><span class="no">value</span><span class="p">,</span><span class="w"> </span><span class="err">...</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-15-3" name="__codelineno-15-3"></a><span class="w"> </span><span class="n">field</span>
<a id="__codelineno-15-4" name="__codelineno-15-4"></a><span class="w"> </span><span class="err">..</span>
<a id="__codelineno-15-5" name="__codelineno-15-5"></a><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-15-6" name="__codelineno-15-6"></a><span class="p">}</span>
</code></pre></div></td></tr></table></div>
<h3 id="subscriptions">Subscriptions</h3>
<p>Open a stable connection with the server to receive real-time updates on the operations happening.</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">GraphQL</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-16-1">1</a></span>
<span class="normal"><a href="#__codelineno-16-2">2</a></span>
<span class="normal"><a href="#__codelineno-16-3">3</a></span>
<span class="normal"><a href="#__codelineno-16-4">4</a></span>
<span class="normal"><a href="#__codelineno-16-5">5</a></span>
<span class="normal"><a href="#__codelineno-16-6">6</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-16-1" name="__codelineno-16-1"></a><span class="k">subscription</span><span class="w"> </span><span class="nf">Operation</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-16-2" name="__codelineno-16-2"></a><span class="w"> </span><span class="n">event</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="c"># get notified when event happens</span>
<a id="__codelineno-16-3" name="__codelineno-16-3"></a><span class="w"> </span><span class="n">field</span><span class="w"> </span><span class="c"># data received on notification</span>
<a id="__codelineno-16-4" name="__codelineno-16-4"></a><span class="w"> </span><span class="p">...</span>
<a id="__codelineno-16-5" name="__codelineno-16-5"></a><span class="w"> </span><span class="err">}</span>
<a id="__codelineno-16-6" name="__codelineno-16-6"></a><span class="err">}</span>
</code></pre></div></td></tr></table></div>
<h3 id="inline-fragments">Inline Fragments</h3>
<p>If you are querying a field that returns an interface or a union type, you will need to use inline fragments to access data on the underlying concrete type. Named fragments can also be used in the same way, since a named fragment always has a type attached.</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">GraphQL</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-17-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-17-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-17-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-17-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-17-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-17-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-17-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-17-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-17-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-17-10">10</a></span>
<span class="normal"><a href="#__codelineno-17-11">11</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-17-1" name="__codelineno-17-1"></a><span class="k">query</span><span class="w"> </span><span class="nf">Operation</span><span class="p">(</span><span class="nv">$var</span><span class="p">:</span><span class="w"> </span><span class="nc">Type</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-17-2" name="__codelineno-17-2"></a><span class="w"> </span><span class="n">field</span><span class="p">(</span><span class="n">arg</span><span class="p">:</span><span class="w"> </span><span class="nv">$var</span><span class="p">)</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="c"># interface of union</span>
<a id="__codelineno-17-3" name="__codelineno-17-3"></a><span class="w"> </span><span class="n">field</span>
<a id="__codelineno-17-4" name="__codelineno-17-4"></a><span class="w"> </span><span class="p">...</span><span class="w"> </span><span class="k">on</span><span class="w"> </span><span class="nc">ConcreteTypeA</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-17-5" name="__codelineno-17-5"></a><span class="w"> </span><span class="n">fieldA</span>
<a id="__codelineno-17-6" name="__codelineno-17-6"></a><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-17-7" name="__codelineno-17-7"></a><span class="w"> </span><span class="p">...</span><span class="w"> </span><span class="k">on</span><span class="w"> </span><span class="nc">ConcreteTypeB</span><span class="p">{</span>
<a id="__codelineno-17-8" name="__codelineno-17-8"></a><span class="w"> </span><span class="n">fieldB</span>
<a id="__codelineno-17-9" name="__codelineno-17-9"></a><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-17-10" name="__codelineno-17-10"></a><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-17-11" name="__codelineno-17-11"></a><span class="p">}</span>
</code></pre></div></td></tr></table></div>
<h3 id="meta-fields">Meta Fields</h3>
<p>GraphQL allows to request <code>__typename</code>, a meta field, at any point in a query to get the name of the object type at that point.</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">GraphQL</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-18-1">1</a></span>
<span class="normal"><a href="#__codelineno-18-2">2</a></span>
<span class="normal"><a href="#__codelineno-18-3">3</a></span>
<span class="normal"><a href="#__codelineno-18-4">4</a></span>
<span class="normal"><a href="#__codelineno-18-5">5</a></span>
<span class="normal"><a href="#__codelineno-18-6">6</a></span>
<span class="normal"><a href="#__codelineno-18-7">7</a></span>
<span class="normal"><a href="#__codelineno-18-8">8</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-18-1" name="__codelineno-18-1"></a><span class="p">{</span>
<a id="__codelineno-18-2" name="__codelineno-18-2"></a><span class="w"> </span><span class="n">field</span><span class="p">(</span><span class="n">arg</span><span class="p">:</span><span class="w"> </span><span class="no">value</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-18-3" name="__codelineno-18-3"></a><span class="w"> </span><span class="n">__typename</span>
<a id="__codelineno-18-4" name="__codelineno-18-4"></a><span class="w"> </span><span class="p">...</span><span class="w"> </span><span class="k">on</span><span class="w"> </span><span class="nc">Type</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-18-5" name="__codelineno-18-5"></a><span class="w"> </span><span class="n">field</span>
<a id="__codelineno-18-6" name="__codelineno-18-6"></a><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-18-7" name="__codelineno-18-7"></a><span class="w"> </span><span class="p">}</span>
<a id="__codelineno-18-8" name="__codelineno-18-8"></a><span class="p">}</span>
</code></pre></div></td></tr></table></div>
<hr />
<h2 id="execution">Execution</h2>
<p>After being validated, a GraphQL query is executed by a GraphQL server which returns a result that mirrors the shape of the requested query, typically as JSON.</p>
<p>Each field on each type is backed by a function called the <em>resolver</em> which is provided by the GraphQL server developer. When a field is executed, the corresponding <em>resolver</em> is called to produce the next value.</p>
<p>If a field produces a scalar value like a string or number, then the execution completes. However if a field produces an object value then the query will contain another selection of fields which apply to that object. This continues until scalar values are reached. GraphQL queries always end at scalar values.</p>
<h3 id="root-fields-and-resolvers">Root fields and Resolvers</h3>
<p>At the top level of every GraphQL server is a type that represents all of the possible entry points into the GraphQL API, it's often called the <em>Root</em> type or the <em>Query</em> type.</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">GraphQL</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-19-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-19-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-19-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-19-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-19-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-19-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-19-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-19-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-19-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-19-10">10</a></span>
<span class="normal"><a href="#__codelineno-19-11">11</a></span>
<span class="normal"><a href="#__codelineno-19-12">12</a></span>
<span class="normal"><a href="#__codelineno-19-13">13</a></span>
<span class="normal"><a href="#__codelineno-19-14">14</a></span>
<span class="normal"><a href="#__codelineno-19-15">15</a></span>
<span class="normal"><a href="#__codelineno-19-16">16</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-19-1" name="__codelineno-19-1"></a><span class="c"># root types for entry-points</span>
<a id="__codelineno-19-2" name="__codelineno-19-2"></a>
<a id="__codelineno-19-3" name="__codelineno-19-3"></a><span class="k">type</span><span class="w"> </span><span class="err">Query</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-19-4" name="__codelineno-19-4"></a><span class="w"> </span><span class="n">rootField</span><span class="p">(</span><span class="n">arg</span><span class="p">:</span><span class="w"> </span><span class="no">Type</span><span class="w"> </span><span class="err">=</span><span class="w"> </span><span class="n">defValue</span><span class="p">,</span><span class="w"> </span><span class="err">...</span><span class="p">)</span><span class="err">:</span><span class="w"> </span><span class="n">Type</span>
<a id="__codelineno-19-5" name="__codelineno-19-5"></a><span class="w"> </span><span class="p">...</span><span class="w"> </span><span class="c"># other query entry points</span>
<a id="__codelineno-19-6" name="__codelineno-19-6"></a><span class="err">}</span>
<a id="__codelineno-19-7" name="__codelineno-19-7"></a>
<a id="__codelineno-19-8" name="__codelineno-19-8"></a><span class="n">type</span><span class="w"> </span><span class="n">Mutation</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-19-9" name="__codelineno-19-9"></a><span class="w"> </span><span class="n">rootField</span><span class="p">(</span><span class="n">arg</span><span class="p">:</span><span class="w"> </span><span class="no">Type</span><span class="w"> </span><span class="err">=</span><span class="w"> </span><span class="n">defValue</span><span class="p">,</span><span class="w"> </span><span class="err">...</span><span class="p">)</span><span class="err">:</span><span class="w"> </span><span class="n">Type</span>
<a id="__codelineno-19-10" name="__codelineno-19-10"></a><span class="w"> </span><span class="p">...</span><span class="w"> </span><span class="c"># other mutation entry points</span>
<a id="__codelineno-19-11" name="__codelineno-19-11"></a><span class="err">}</span>
<a id="__codelineno-19-12" name="__codelineno-19-12"></a>
<a id="__codelineno-19-13" name="__codelineno-19-13"></a><span class="n">type</span><span class="w"> </span><span class="n">Subscription</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-19-14" name="__codelineno-19-14"></a><span class="w"> </span><span class="n">rootField</span><span class="p">(</span><span class="n">arg</span><span class="p">:</span><span class="w"> </span><span class="no">Type</span><span class="w"> </span><span class="err">=</span><span class="w"> </span><span class="n">defValue</span><span class="p">,</span><span class="w"> </span><span class="err">...</span><span class="p">)</span><span class="err">:</span><span class="w"> </span><span class="n">Type</span>
<a id="__codelineno-19-15" name="__codelineno-19-15"></a><span class="w"> </span><span class="p">...</span><span class="w"> </span><span class="c"># other subscription entry points</span>
<a id="__codelineno-19-16" name="__codelineno-19-16"></a><span class="err">}</span>
</code></pre></div></td></tr></table></div>
<p>A resolver function receives four arguments:</p>
<ul>
<li><code>obj</code> The previous object, which for a field on the root Query type is often not used.</li>
<li><code>args</code> The arguments provided to the field in the GraphQL query.</li>
<li><code>context</code> A value which is provided to every resolver and holds important contextual information like the currently logged in user, or access to a database.</li>
<li><code>info</code> A value which holds field-specific information relevant to the current query as well as the schema details</li>
</ul>
</article>
</div>
<script>var target=document.getElementById(location.hash.slice(1));target&&target.name&&(target.checked=target.name.startsWith("__tabbed_"))</script>
</div>
<button type="button" class="md-top md-icon" data-md-component="top" hidden>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8z"/></svg>
Back to top
</button>
</main>
<footer class="md-footer">
<nav class="md-footer__inner md-grid" aria-label="Footer" >
<a href="git.html" class="md-footer__link md-footer__link--prev" aria-label="Previous: Git">
<div class="md-footer__button md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11z"/></svg>
</div>
<div class="md-footer__title">
<span class="md-footer__direction">
Previous
</span>
<div class="md-ellipsis">
Git
</div>
</div>
</a>
<a href="regular-expressions.html" class="md-footer__link md-footer__link--next" aria-label="Next: RegEx">
<div class="md-footer__title">
<span class="md-footer__direction">
Next
</span>
<div class="md-ellipsis">
RegEx
</div>
</div>
<div class="md-footer__button md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 11v2h12l-5.5 5.5 1.42 1.42L19.84 12l-7.92-7.92L10.5 5.5 16 11z"/></svg>
</div>
</a>
</nav>
<div class="md-footer-meta md-typeset">
<div class="md-footer-meta__inner md-grid">
<div class="md-copyright">
<div class="md-copyright__highlight">
MIT
</div>
Made with
<a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
Material for MkDocs
</a>
</div>
<div class="md-social">
<a href="https://hachyderm.io/@m_lamonaca" target="_blank" rel="noopener me" title="hachyderm.io" class="md-social__link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M433 179.11c0-97.2-63.71-125.7-63.71-125.7-62.52-28.7-228.56-28.4-290.48 0 0 0-63.72 28.5-63.72 125.7 0 115.7-6.6 259.4 105.63 289.1 40.51 10.7 75.32 13 103.33 11.4 50.81-2.8 79.32-18.1 79.32-18.1l-1.7-36.9s-36.31 11.4-77.12 10.1c-40.41-1.4-83-4.4-89.63-54a102.5 102.5 0 0 1-.9-13.9c85.63 20.9 158.65 9.1 178.75 6.7 56.12-6.7 105-41.3 111.23-72.9 9.8-49.8 9-121.5 9-121.5m-75.12 125.2h-46.63v-114.2c0-49.7-64-51.6-64 6.9v62.5h-46.33V197c0-58.5-64-56.6-64-6.9v114.2H90.19c0-122.1-5.2-147.9 18.41-175 25.9-28.9 79.82-30.8 103.83 6.1l11.6 19.5 11.6-19.5c24.11-37.1 78.12-34.8 103.83-6.1 23.71 27.3 18.4 53 18.4 175z"/></svg>
</a>
<a href="https://github.com/m-lamonaca" target="_blank" rel="noopener" title="github.com" class="md-social__link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--! Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path 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.6m-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.3m44.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.9M244.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 8M97.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-1m-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.7m32.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-1m-11.4-14.7c-1.6 1-1.6 3.6 0 5.9s4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2"/></svg>
</a>
</div>
</div>
</div>
</footer>
</div>
<div class="md-dialog" data-md-component="dialog">
<div class="md-dialog__inner md-typeset"></div>
</div>
<script id="__config" type="application/json">{"base": "..", "features": ["navigation.instant", "navigation.indexes", "navigation.tracking", "navigation.pruning", "navigation.sections", "navigation.top", "navigation.tabs", "navigation.tabs.sticky", "navigation.footer", "toc.follow", "content.code.copy"], "search": "../assets/javascripts/workers/search.07f07601.min.js", "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}}</script>
<script src="../assets/javascripts/bundle.56dfad97.min.js"></script>
</body>
</html>
Reference in a new issue View git blame Copy permalink