{"componentChunkName":"component---src-templates-blog-post-jsx","path":"/blogs/learnGraphql","result":{"data":{"blog":{"frontmatter":{"title":"LEARN GRAPHQL","thumbnail":"blog47","date":"February 12, 2021","dsaCppCodeFile":null},"excerpt":"<div class=\"my-2 p-2\">\n              <h4>Introduction</h4>\n              <div class=\"m-2\">\n                <p>\n                  GraphQL is a query language for APIs and a runtime for\n                  fulfilling those queries with your existing data. GraphQL was\n                  developed internally by Facebook in 2012 before being publicly\n                  released in 2015.\n                </p>\n                <p>\n                  GraphQL provides a complete and understandable description of\n                  the data in your API, gives clients the power to ask for\n                  exactly what they need and nothing more, makes it easier to\n                  evolve APIs over time, and enables powerful developer tools.\n                </p>\n              </div>\n            </div>\n            <div class=\"my-2 p-2\">\n              <h4>Why learn GraphQL?</h4>\n              <ol class=\"pl-4\">\n                <li>\n                  <strong>No more client-specific endpoints: </strong>To make\n                  your REST API efficient, you often need to write endpoints\n                  tailored to a specific consumer. With GraphQL, each client can\n                  get just what it needs.\n                </li>\n                <li>\n                  <strong>Don't worry about outdated docs: </strong>Don't worry\n                  about outdated docs\n                </li>\n                <li>\n                  <strong>Understand how your API is used: </strong>Consumers of\n                  your GraphQL API specify what they are going to use, giving\n                  you fine-grained understanding of exactly which fields are\n                  used and by whom.\n                </li>\n              </ol>\n            </div>\n            <div class=\"my-2 p-2\">\n              <h4>Features</h4>\n              <ol class=\"pl-4\">\n                <li>\n                  <strong>Ask for what you need, get exactly that: </strong>Send\n                  a GraphQL query to your API and get exactly what you need,\n                  nothing more and nothing less. GraphQL queries always return\n                  predictable results. Apps using GraphQL are fast and stable\n                  because they control the data they get, not the server.\n                </li>\n                <li>\n                  <strong>Get many resources in a single request: </strong\n                  >GraphQL queries access not just the properties of one\n                  resource but also smoothly follow references between them.\n                  While typical REST APIs require loading from multiple URLs,\n                  GraphQL APIs get all the data your app needs in a single\n                  request. Apps using GraphQL can be quick even on slow mobile\n                  network connections.\n                </li>\n                <li>\n                  <strong>Describe what’s possible with a type system: </strong\n                  >GraphQL APIs are organized in terms of types and fields, not\n                  endpoints. Access the full capabilities of your data from a\n                  single endpoint. GraphQL uses types to ensure Apps only ask\n                  for what’s possible and provide clear and helpful errors. Apps\n                  can use types to avoid writing manual parsing code.\n                </li>\n                <li>\n                  <strong>Evolve your API without versions: </strong>Add new\n                  fields and types to your GraphQL API without impacting\n                  existing queries. Aging fields can be deprecated and hidden\n                  from tools. By using a single evolving version, GraphQL APIs\n                  give apps continuous access to new features and encourage\n                  cleaner, more maintainable server code.\n                </li>\n              </ol>\n            </div>\n            <div class=\"row my-2 p-2\">\n              <div class=\"col-12\">\n                <h4>Topics to cover</h4>\n              </div>\n              <div class=\"col-md-4 mx-auto my-2\">\n                <p><strong>Basics</strong></p>\n                <ul class=\"pl-4\">\n                  <li>Schema</li>\n                  <li>Resolvers</li>\n                  <li>Basic & Object Types</li>\n                  <li>Queries</li>\n                  <li>Mutations</li>\n                  <li>Testing queries and mutations</li>\n                </ul>\n                <div class=\"m-2\"></div>\n              </div>\n              <div class=\"col-md-4 mx-auto my-2\">\n                <p><strong>Intermediate</strong></p>\n                <ul class=\"pl-4\">\n                  <li>Type Relations</li>\n                  <li>Connecting with database</li>\n                  <li>Client(frontend) integration using Apollo</li>\n                  <li>Fetching & Refetching queries from client</li>\n                  <li>Sending mutations from client</li>\n                </ul>\n              </div>\n              <div class=\"col-md-4 mx-auto my-2\">\n                <p><strong>Advanced</strong></p>\n                <ul class=\"pl-4\">\n                  <li>Middlewares</li>\n                  <li>Authentication</li>\n                  <li>Constructing type</li>\n                </ul>\n              </div>\n            </div>\n            <div class=\"my-2 p-2\">\n              <h4>Resources to learn & code projects</h4>\n              <div class=\"row m-2\">\n                <div class=\"col-md-6 my-3\">\n                  <iframe\n                    width=\"100%\"\n                    height=\"200\"\n                    src=\"https://www.youtube.com/embed/ZQL7tL2S0oQ\"\n                    frameborder=\"0\"\n                    allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\n                    allowfullscreen\n                  ></iframe>\n                </div>\n                <div class=\"col-md-6 my-3\">\n                  <iframe\n                    width=\"100%\"\n                    height=\"200\"\n                    src=\"https://www.youtube.com/embed/_Zss2Mbz4Bs\"\n                    frameborder=\"0\"\n                    allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\n                    allowfullscreen\n                  ></iframe>\n                </div>\n                <div class=\"col-md-6 my-3\">\n                  <iframe\n                    width=\"100%\"\n                    height=\"200\"\n                    src=\"https://youtube.com/embed/playlist?list=PL4cUxeGkcC9iK6Qhn-QLcXCXPQUov1U7f\"\n                    frameborder=\"0\"\n                    allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\n                    allowfullscreen\n                  ></iframe>\n                </div>\n                <div class=\"col-md-6 my-3\">\n                  <iframe\n                    width=\"100%\"\n                    height=\"200\"\n                    src=\"https://www.youtube.com/embed/n1mdAPFq2Os\"\n                    frameborder=\"0\"\n                    allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\n                    allowfullscreen\n                  ></iframe>\n                </div>\n                <div class=\"col-md-6 my-3\">\n                  <iframe\n                    width=\"100%\"\n                    height=\"200\"\n                    src=\"https://www.youtube.com/embed/E3NHd-PkLrQ\"\n                    frameborder=\"0\"\n                    allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\n                    allowfullscreen\n                  ></iframe>\n                </div>\n              </div>\n            </div>\n","html":"<div class=\"my-2 p-2\">\n              <h4>Introduction</h4>\n              <div class=\"m-2\">\n                <p>\n                  GraphQL is a query language for APIs and a runtime for\n                  fulfilling those queries with your existing data. GraphQL was\n                  developed internally by Facebook in 2012 before being publicly\n                  released in 2015.\n                </p>\n                <p>\n                  GraphQL provides a complete and understandable description of\n                  the data in your API, gives clients the power to ask for\n                  exactly what they need and nothing more, makes it easier to\n                  evolve APIs over time, and enables powerful developer tools.\n                </p>\n              </div>\n            </div>\n            <div class=\"my-2 p-2\">\n              <h4>Why learn GraphQL?</h4>\n              <ol class=\"pl-4\">\n                <li>\n                  <strong>No more client-specific endpoints: </strong>To make\n                  your REST API efficient, you often need to write endpoints\n                  tailored to a specific consumer. With GraphQL, each client can\n                  get just what it needs.\n                </li>\n                <li>\n                  <strong>Don't worry about outdated docs: </strong>Don't worry\n                  about outdated docs\n                </li>\n                <li>\n                  <strong>Understand how your API is used: </strong>Consumers of\n                  your GraphQL API specify what they are going to use, giving\n                  you fine-grained understanding of exactly which fields are\n                  used and by whom.\n                </li>\n              </ol>\n            </div>\n            <div class=\"my-2 p-2\">\n              <h4>Features</h4>\n              <ol class=\"pl-4\">\n                <li>\n                  <strong>Ask for what you need, get exactly that: </strong>Send\n                  a GraphQL query to your API and get exactly what you need,\n                  nothing more and nothing less. GraphQL queries always return\n                  predictable results. Apps using GraphQL are fast and stable\n                  because they control the data they get, not the server.\n                </li>\n                <li>\n                  <strong>Get many resources in a single request: </strong\n                  >GraphQL queries access not just the properties of one\n                  resource but also smoothly follow references between them.\n                  While typical REST APIs require loading from multiple URLs,\n                  GraphQL APIs get all the data your app needs in a single\n                  request. Apps using GraphQL can be quick even on slow mobile\n                  network connections.\n                </li>\n                <li>\n                  <strong>Describe what’s possible with a type system: </strong\n                  >GraphQL APIs are organized in terms of types and fields, not\n                  endpoints. Access the full capabilities of your data from a\n                  single endpoint. GraphQL uses types to ensure Apps only ask\n                  for what’s possible and provide clear and helpful errors. Apps\n                  can use types to avoid writing manual parsing code.\n                </li>\n                <li>\n                  <strong>Evolve your API without versions: </strong>Add new\n                  fields and types to your GraphQL API without impacting\n                  existing queries. Aging fields can be deprecated and hidden\n                  from tools. By using a single evolving version, GraphQL APIs\n                  give apps continuous access to new features and encourage\n                  cleaner, more maintainable server code.\n                </li>\n              </ol>\n            </div>\n            <div class=\"row my-2 p-2\">\n              <div class=\"col-12\">\n                <h4>Topics to cover</h4>\n              </div>\n              <div class=\"col-md-4 mx-auto my-2\">\n                <p><strong>Basics</strong></p>\n                <ul class=\"pl-4\">\n                  <li>Schema</li>\n                  <li>Resolvers</li>\n                  <li>Basic & Object Types</li>\n                  <li>Queries</li>\n                  <li>Mutations</li>\n                  <li>Testing queries and mutations</li>\n                </ul>\n                <div class=\"m-2\"></div>\n              </div>\n              <div class=\"col-md-4 mx-auto my-2\">\n                <p><strong>Intermediate</strong></p>\n                <ul class=\"pl-4\">\n                  <li>Type Relations</li>\n                  <li>Connecting with database</li>\n                  <li>Client(frontend) integration using Apollo</li>\n                  <li>Fetching & Refetching queries from client</li>\n                  <li>Sending mutations from client</li>\n                </ul>\n              </div>\n              <div class=\"col-md-4 mx-auto my-2\">\n                <p><strong>Advanced</strong></p>\n                <ul class=\"pl-4\">\n                  <li>Middlewares</li>\n                  <li>Authentication</li>\n                  <li>Constructing type</li>\n                </ul>\n              </div>\n            </div>\n            <div class=\"my-2 p-2\">\n              <h4>Resources to learn & code projects</h4>\n              <div class=\"row m-2\">\n                <div class=\"col-md-6 my-3\">\n                  <iframe\n                    width=\"100%\"\n                    height=\"200\"\n                    src=\"https://www.youtube.com/embed/ZQL7tL2S0oQ\"\n                    frameborder=\"0\"\n                    allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\n                    allowfullscreen\n                  ></iframe>\n                </div>\n                <div class=\"col-md-6 my-3\">\n                  <iframe\n                    width=\"100%\"\n                    height=\"200\"\n                    src=\"https://www.youtube.com/embed/_Zss2Mbz4Bs\"\n                    frameborder=\"0\"\n                    allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\n                    allowfullscreen\n                  ></iframe>\n                </div>\n                <div class=\"col-md-6 my-3\">\n                  <iframe\n                    width=\"100%\"\n                    height=\"200\"\n                    src=\"https://youtube.com/embed/playlist?list=PL4cUxeGkcC9iK6Qhn-QLcXCXPQUov1U7f\"\n                    frameborder=\"0\"\n                    allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\n                    allowfullscreen\n                  ></iframe>\n                </div>\n                <div class=\"col-md-6 my-3\">\n                  <iframe\n                    width=\"100%\"\n                    height=\"200\"\n                    src=\"https://www.youtube.com/embed/n1mdAPFq2Os\"\n                    frameborder=\"0\"\n                    allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\n                    allowfullscreen\n                  ></iframe>\n                </div>\n                <div class=\"col-md-6 my-3\">\n                  <iframe\n                    width=\"100%\"\n                    height=\"200\"\n                    src=\"https://www.youtube.com/embed/E3NHd-PkLrQ\"\n                    frameborder=\"0\"\n                    allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\n                    allowfullscreen\n                  ></iframe>\n                </div>\n              </div>\n            </div>"},"thumbnail":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='225'%20viewBox='0%200%20400%20225'%20preserveAspectRatio='none'%3e%3cpath%20d='M0%20113v112h401V0H0v113m89-68c-3%202-5%206-5%2010s0%204-13%2011c-13%208-14%208-16%207l-7-2c-11%200-15%2016-5%2022l3%201v15c0%2015%200%2016-2%2016-4%202-7%207-7%2011%200%209%209%2015%2016%2010%204-2%204-2%2018%206l13%208v4c1%207%205%2011%2012%2011%206%200%2012-7%2011-13%200-2%201-3%2013-10l13-8%204%202c9%206%2020-4%2016-14-1-2-3-5-5-5l-3-2v-16l1-16c3%200%207-6%208-9%201-10-9-16-18-11-3%201-3%201-16-6-12-8-13-8-13-11%200-9-10-15-18-11M73%2071l-13%207v5c-1%204-5%2010-8%2010l-1%2016c0%209%200%2016%201%2015l35-60-14%207m31-6l35%2060%201-15V94l-3-1c-4-3-5-5-6-10v-4l-13-8c-13-7-14-8-14-6m-15%207l-18%2030-14%2025%201%204%202%203h71l1-3%202-3-10-18C96%2062%2099%2066%2095%2066c-3%200-4%201-6%206m145%2010v15h5c4%200%205%200%205-2s-1-2-3-2h-3V80c0-13%200-14-2-14s-2%201-2%2016m17%200v15h5c4%200%205%200%205-2%200-1-1-2-3-2-3-1-5-9-1-9l2-2c0-2-1-3-2-3-2%200-2-1-2-4%200-4%201-4%203-4s3-1%203-3%200-2-5-2h-5v16m18-1c-2%2017-2%2016%200%2016l3-3c0-2%201-3%203-3s2%200%202%203c0%202%200%203%202%203h3l-2-12c-3-20-3-19-6-19h-3l-2%2015m19%201v15h3c2%200%202%200%202-7%200-8%202-7%203%202%200%204%200%205%203%205%202%200%202%200%201-8-2-5-2-7%200-10%203-7-1-13-8-13h-4v16m20-1c0%2015%200%2016%202%2016s2-1%202-9l1-8%202%208c2%207%203%209%204%209%202%200%202-1%202-15%200-15%200-16-2-16s-2%201-2%208v9l-2-8c-2-7-3-9-5-9s-2%200-2%2015m-93%2034c-2%203-2%204-2%2015%200%2014%200%2015%207%2015h5v-16l-3%201c-2%200-5%203-2%203%202%200%201%207-1%208l-1-11%201-12%202%204c0%205%204%204%204-1%200-7-5-10-10-6m100%200c-2%202-2%203-2%2014%200%2014%201%2016%206%2016l4%201c2%202%204%201%203-2l-1-14c0-13%200-13-3-15-3-3-4-3-7%200m-82%2015v15h3c2%200%202%200%202-7s1-6%203%202c0%204%201%205%203%205s2%200%202-2c-2-7-3-13-2-15l1-6c0-6-2-8-8-8h-4v16m22-5c-4%2021-4%2020-1%2020%201%200%202-1%202-3%201-4%205-4%206%200%200%202%201%203%202%203h3l-2-9c-3-23-3-22-6-22s-3%200-4%2011m18%205v15h3c2%200%202%200%202-6s0-7%202-7c3%200%206-4%206-9%200-6-3-9-9-9h-4v16m19%200v15h3c2%200%202%200%202-7%200-6%200-7%202-7%201%200%202%202%202%207%200%206%200%207%202%207s2-1%202-15c0-15%200-16-2-16s-2%201-2%206-1%207-2%207c-2%200-2-1-2-6%200-7%200-7-2-7h-3v16m41%200v15h5c4%200%205%200%205-2s-1-2-3-2h-3v-13c0-13%200-14-2-14s-2%201-2%2016M61%20140l13%208c12%207%2013%207%2015%206%204-2%208-2%2012%200l4%201%2011-6c19-11%2021-10-20-10-23%200-36%200-35%201'%20fill='%23d3d3d3'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":1.7699115044247788,"src":"/static/0b0622010e576e594d6814a9f01c416b/ee604/blog47.png","srcSet":"/static/0b0622010e576e594d6814a9f01c416b/69585/blog47.png 200w,\n/static/0b0622010e576e594d6814a9f01c416b/497c6/blog47.png 400w,\n/static/0b0622010e576e594d6814a9f01c416b/ee604/blog47.png 800w,\n/static/0b0622010e576e594d6814a9f01c416b/f3583/blog47.png 1200w,\n/static/0b0622010e576e594d6814a9f01c416b/5707d/blog47.png 1600w,\n/static/0b0622010e576e594d6814a9f01c416b/9ddc6/blog47.png 2240w","sizes":"(max-width: 800px) 100vw, 800px"}}}},"pageContext":{"blog":"learnGraphql","thumbnail":"thumbnails/blog47.png"}},"staticQueryHashes":["2987289216","63159454"]}