{
    "componentChunkName": "component---src-templates-blog-post-js",
    "path": "/how-to-build-an-express-graphql-server-part-7/",
    "result": {"data":{"markdownRemark":{"html":"<div class=\"table-of-contents\">\n<ul>\n<li><a href=\"#named-query-results-with-aliases\">Named query results with aliases</a></li>\n<li><a href=\"#query-fragment\">Query fragment</a></li>\n</ul>\n</div>\n<h6 id=\"this-blog-post-is-part-of-a-series-you-must-finish-part-1-part-2-part-3-part-4-part-5--part-6-before-continuing-here\" style=\"position:relative;\"><a href=\"#this-blog-post-is-part-of-a-series-you-must-finish-part-1-part-2-part-3-part-4-part-5--part-6-before-continuing-here\" aria-label=\"this blog post is part of a series you must finish part 1 part 2 part 3 part 4 part 5  part 6 before continuing here permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>This blog post is part of a series. You must finish <a href=\"https://hemanta.io/how-to-build-an-express-graphql-server-part-one/\">part-1</a>, <a href=\"https://hemanta.io/how-to-build-an-express-graphql-server-part-2/\">part-2</a>, <a href=\"https://hemanta.io/how-to-build-an-express-graphql-server-part-3/\">part-3</a>, <a href=\"https://hemanta.io/how-to-build-an-express-graphql-server-part-4/\">part-4</a>, <a href=\"https://hemanta.io/how-to-build-an-express-graphql-server-part-5/\">part-5</a> &#x26; <a href=\"https://hemanta.io/how-to-build-an-express-graphql-server-part-6/\">part-6</a> before continuing here.</h6>\n<p>Until now, we have been writing queries inside the GraphiQL IDE like the following.</p>\n<pre class=\"grvsc-container synthwave-84\" data-language=\"sh\" data-index=\"0\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"grvsc-source\"><span class=\"mtk1\">{</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-source\"><span class=\"mtk1\">  company (id: </span><span class=\"mtk16\">&quot;1&quot;</span><span class=\"mtk1\">) {</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-source\"><span class=\"mtk1\">    name</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-source\"><span class=\"mtk1\">    description</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-source\"><span class=\"mtk1\">  }</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-source\"><span class=\"mtk1\">}</span></span></span></code></pre>\n<p>Now if I we add the text <del>query</del>, the response is not going to change.</p>\n<pre class=\"grvsc-container synthwave-84\" data-language=\"sh\" data-index=\"1\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"grvsc-source\"><span class=\"mtk1\">query {</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-source\"><span class=\"mtk1\">  company (id: </span><span class=\"mtk16\">&quot;1&quot;</span><span class=\"mtk1\">) {</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-source\"><span class=\"mtk1\">    name</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-source\"><span class=\"mtk1\">    description</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-source\"><span class=\"mtk1\">  }</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-source\"><span class=\"mtk1\">}</span></span></span></code></pre>\n<p>We can also name our query as follows:</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 669px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/4be0ef5bd34bcec39285f23fa4b85f96/66b6b/queryName.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 66%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAIAAAAmMtkJAAAACXBIWXMAAA7DAAAOwwHHb6hkAAABEElEQVQoz+3Sy26EMAwFUP7//9ouqoFhREgCmRDsJI55paLz6rRqv6BXV175yBsX5eHw8vqmpD6WRy21aqVsZdu2QgittZRSSdU0Td/35ta+6461EK0sYITE3HvbodFoOn+mRJyYmRHRDg7RI3rYiwAIiCNcW4QQtryNMyoyms64xC1v+TOJGdxohTEWKBIlJp72eWuBAGCtEmpo1KD0vC75FmaOkWQ/vJ86JYwTBpSNMUW6tgjBU5pPygGmZV7vZ3POE08jgA/RB3IYfaQA/gl79POyrOs2Lcu6PeTlMiBe9ugCEt/ljoloezYPPE0+xK/b37rj/EuY+R//wNbaqqrqui7LQ9M0uP/gNc65v/EHx6ruGa26BxcAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Query Name\"\n        title=\"Query Name\"\n        src=\"/static/4be0ef5bd34bcec39285f23fa4b85f96/66b6b/queryName.png\"\n        srcset=\"/static/4be0ef5bd34bcec39285f23fa4b85f96/56d15/queryName.png 200w,\n/static/4be0ef5bd34bcec39285f23fa4b85f96/d9f49/queryName.png 400w,\n/static/4be0ef5bd34bcec39285f23fa4b85f96/66b6b/queryName.png 669w\"\n        sizes=\"(max-width: 669px) 100vw, 669px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n        decoding=\"async\"\n      />\n  </a>\n    </span></p>\n<p>Naming queries become useful when we make multiple different queries from the frontend of our application.</p>\n<h2 id=\"named-query-results-with-aliases\" style=\"position:relative;\"><a href=\"#named-query-results-with-aliases\" aria-label=\"named query results with aliases permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Named query results with aliases</h2>\n<p>With GraphQL, we can send multiple queries in a single request. However, since the response data is shaped after the structure of the fields being requested, we will run into naming issues when sending multiple queries asking for the same fields.</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 668px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/8d48c208ae837750cec07170ff68e046/1d36f/aliasQuery.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 66%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAIAAAAmMtkJAAAACXBIWXMAAA7DAAAOwwHHb6hkAAABZklEQVQoz42S2W7jMAxF/f8fOO1DjcSJbCletFAiRcpLOk47bSZoi15caHk4OISgqn6p/zw9t1rXh4O5GKXartNd17Vta4zRWhttlFLjXYahPzRt25nKO4fBc4hptGg9M4sIMxcpAGCtA4gAECDe9f1aEWGcnKrbPIKEtG7b9XrdbiszQ4A0+giJpGQpmWXvv0OFiPOy2EiRy7LuzJ7bvsNTsL1XapyMhdMA2oamD+cRkShzhYQsc0p5KcsiZV0/zVLEvnShNqmdwrEPTQ+nITRDvDgMiZgrxERcGu1CzPM8v4s/xh6d01afh8lBSrgLMRPL3syV92Fd123b5mV9Yz4iLIkoF9GjV8aFSMRM+bMVEV2/iYikhETsPEwuJvyP3GFm/hnOLJfRn7XdzQ9wzvknGCkmTEhIGYm/gLe7PMA+QMJH4a/MzBxjyreH/Rq21p5OjVLqeDxqrWPcP+NbvPf4vfYv/AraoeuWQuOp2wAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Aliases\"\n        title=\"Aliases\"\n        src=\"/static/8d48c208ae837750cec07170ff68e046/1d36f/aliasQuery.png\"\n        srcset=\"/static/8d48c208ae837750cec07170ff68e046/56d15/aliasQuery.png 200w,\n/static/8d48c208ae837750cec07170ff68e046/d9f49/aliasQuery.png 400w,\n/static/8d48c208ae837750cec07170ff68e046/1d36f/aliasQuery.png 668w\"\n        sizes=\"(max-width: 668px) 100vw, 668px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n        decoding=\"async\"\n      />\n  </a>\n    </span></p>\n<p>We get an error, simply because, in the response, which is a javaScript object, we can’t have duplicate keys. So, we will have to rename the results of the fields to anything we want.</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 672px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/29862f64379c6ba1d95c18c6b6a63f19/00e42/aliasQuery2.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 66.5%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAIAAAAmMtkJAAAACXBIWXMAAA7DAAAOwwHHb6hkAAABPUlEQVQoz62P7U7DMAxF+/7vB/wAiW1N0m5tl8aO7cTpB+rGxxgSEhJHV/53dK+r3W7/8PhUG7M77I21zjlrXeOcsfbYtk3TNk1jatPf0HXd695a11beezgPEgC7AXvPzHIhpYSI57MHQEAMgCPAGC4Zw5YAFRMRoDU9DBg8QJQ5lblM67pmVQxwtv2pD4AkkkVVUv5MRTFqmTwm4DzNy3qDqhLzaQjPh5MzvTcdtJ5JWNI1FVGUlJGSaiHVyHnKZdJylWOkbgju5PshYGSO/GlucowoKdfH0QOJljJNy7zx3kx8HMLLoWtMF0aMA8QQv2TvRy26rGuZ5mW5nz0CEAtxwu0KIdH32XTt+YmqAm67WJJchZQ53cwWkV9kjHT75F3+Q14++LN85/xB9t7XdW2tPVwuIsIHIYRIv8lvobLse5HVyZQAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Aliases\"\n        title=\"Aliases\"\n        src=\"/static/29862f64379c6ba1d95c18c6b6a63f19/00e42/aliasQuery2.png\"\n        srcset=\"/static/29862f64379c6ba1d95c18c6b6a63f19/56d15/aliasQuery2.png 200w,\n/static/29862f64379c6ba1d95c18c6b6a63f19/d9f49/aliasQuery2.png 400w,\n/static/29862f64379c6ba1d95c18c6b6a63f19/00e42/aliasQuery2.png 672w\"\n        sizes=\"(max-width: 672px) 100vw, 672px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n        decoding=\"async\"\n      />\n  </a>\n    </span></p>\n<p>You will notice that in both our queries we are asking for the <del>name</del> and <del>description</del> of the company. We are asking for the details twice. Typing just two properties is not a big problem but if we were querying for ten properties lets say, then typing those ten properties in two places would get tiresome. To solve this issue, we can make use of query fragments.</p>\n<h2 id=\"query-fragment\" style=\"position:relative;\"><a href=\"#query-fragment\" aria-label=\"query fragment permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Query fragment</h2>\n<p>A query fragment is essentially a list of properties that we want to get access to.</p>\n<p>So, let’s define a query fragment.</p>\n<pre class=\"grvsc-container synthwave-84\" data-language=\"sh\" data-index=\"2\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"grvsc-source\"><span class=\"mtk1\">fragment companyDetails on Company {</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-source\"><span class=\"mtk1\">  name</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-source\"><span class=\"mtk1\">  description</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-source\"><span class=\"mtk1\">}</span></span></span></code></pre>\n<p>Now, instead of listing out individual property names in both the locations inside our query, we can use the fragment we just defined.</p>\n<p>Let’s go back to GraphiQL and use the query fragment.</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 669px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/474dd96b3e674383908497ff5a22ef42/66b6b/queryFragment.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 65.49999999999999%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAIAAAAmMtkJAAAACXBIWXMAAA7DAAAOwwHHb6hkAAABiElEQVQoz4WQy24bMQxF5/8/rUB3WaTZZGzHmpdmJFEkJVKjUeEabtwCTQ/u9vBxu9P59Pr642qG99PJDMNgzDiM4zgaM8zzPE3TPE3GmPUJa+35YoZx7uyyrMuCAH7dwHtEjL8AiN77xVoXwrpuzvnnWLutm+uYiWNczQqXxZkFgJvWWvbWmqiAB5i2AIScsmrWkrKkLFk0i3aIWGotohq5EJckRz1qra01VSWiYdze+slcF2/WuHhKmR/pCCllcVskjxAiBKpSqspdRqTFgZn9NDvwkVzkZznGWPZ6aEnAJ0sfXk1qPR64t3LbzMPi3/ppuNoQEF2kgJ9yCGFPqRYVKRYksohwzlCrqGoIESlFTICMlDAgIX/KEMI62XFchxnCRs6Tsq18PnYWKRBjSsIpp7uQb4P/OPv2Y6m63xpuxTX81vB74xdNG1J6fvKvdDnn4zjab4697bFVajVqDkj8pZzSUevxoD1xb/srWUTaP/i/7L3v+/5yvvT9+8f1ysz0AAC+ln8CqNnohIXwM98AAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Query fragment\"\n        title=\"Query fragment\"\n        src=\"/static/474dd96b3e674383908497ff5a22ef42/66b6b/queryFragment.png\"\n        srcset=\"/static/474dd96b3e674383908497ff5a22ef42/56d15/queryFragment.png 200w,\n/static/474dd96b3e674383908497ff5a22ef42/d9f49/queryFragment.png 400w,\n/static/474dd96b3e674383908497ff5a22ef42/66b6b/queryFragment.png 669w\"\n        sizes=\"(max-width: 669px) 100vw, 669px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n        decoding=\"async\"\n      />\n  </a>\n    </span></p>\n<p>Go to <a href=\"https://hemanta.io/how-to-build-an-express-graphql-server-part-8/\">part-8</a></p>\n<style class=\"grvsc-styles\">\n  .grvsc-container {\n    overflow: auto;\n    position: relative;\n    -webkit-overflow-scrolling: touch;\n    padding-top: 1rem;\n    padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem));\n    padding-bottom: 1rem;\n    padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem));\n    border-radius: 8px;\n    border-radius: var(--grvsc-border-radius, 8px);\n    font-feature-settings: normal;\n    line-height: 1.4;\n  }\n  \n  .grvsc-code {\n    display: table;\n  }\n  \n  .grvsc-line {\n    display: table-row;\n    box-sizing: border-box;\n    width: 100%;\n    position: relative;\n  }\n  \n  .grvsc-line > * {\n    position: relative;\n  }\n  \n  .grvsc-gutter-pad {\n    display: table-cell;\n    padding-left: 0.75rem;\n    padding-left: calc(var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)) / 2);\n  }\n  \n  .grvsc-gutter {\n    display: table-cell;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    user-select: none;\n  }\n  \n  .grvsc-gutter::before {\n    content: attr(data-content);\n  }\n  \n  .grvsc-source {\n    display: table-cell;\n    padding-left: 1.5rem;\n    padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem));\n    padding-right: 1.5rem;\n    padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));\n  }\n  \n  .grvsc-source:empty::after {\n    content: ' ';\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    user-select: none;\n  }\n  \n  .grvsc-gutter + .grvsc-source {\n    padding-left: 0.75rem;\n    padding-left: calc(var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)) / 2);\n  }\n  \n  /* Line transformer styles */\n  \n  .grvsc-has-line-highlighting > .grvsc-code > .grvsc-line::before {\n    content: ' ';\n    position: absolute;\n    width: 100%;\n  }\n  \n  .grvsc-line-diff-add::before {\n    background-color: var(--grvsc-line-diff-add-background-color, rgba(0, 255, 60, 0.2));\n  }\n  \n  .grvsc-line-diff-del::before {\n    background-color: var(--grvsc-line-diff-del-background-color, rgba(255, 0, 20, 0.2));\n  }\n  \n  .grvsc-line-number {\n    padding: 0 2px;\n    text-align: right;\n    opacity: 0.7;\n  }\n  \n  .synthwave-84 { background-color: #262335; }\n  .synthwave-84 .mtk1 { color: #FFFFFF; }\n  .synthwave-84 .mtk16 { color: #FF8B39; }\n  .synthwave-84 .grvsc-line-highlighted::before {\n    background-color: var(--grvsc-line-highlighted-background-color, rgba(255, 255, 255, 0.1));\n    box-shadow: inset var(--grvsc-line-highlighted-border-width, 4px) 0 0 0 var(--grvsc-line-highlighted-border-color, rgba(255, 255, 255, 0.5));\n  }\n</style>","frontmatter":{"title":"How to Build an Express/GraphQL Server - Part 7?","date":"2021-06-06"}}},"pageContext":{"slug":"/how-to-build-an-express-graphql-server-part-7/","prev":{"fields":{"slug":"/how-to-build-an-express-graphql-server-part-6/"},"frontmatter":{"modules":null}},"next":{"fields":{"slug":"/how-to-build-an-express-graphql-server-part-8/"},"frontmatter":{"modules":null}}}},
    "staticQueryHashes": ["3159585216"]}