{"id":76037,"date":"2020-09-25T15:00:12","date_gmt":"2020-09-25T12:00:12","guid":{"rendered":"https:\/\/en.buradabiliyorum.com\/what-is-graphql-and-how-is-it-different-from-rest-cloudsavvy-it\/"},"modified":"2020-09-25T15:00:12","modified_gmt":"2020-09-25T12:00:12","slug":"what-is-graphql-and-how-is-it-different-from-rest-cloudsavvy-it","status":"publish","type":"post","link":"https:\/\/buradabiliyorum.com\/en\/what-is-graphql-and-how-is-it-different-from-rest-cloudsavvy-it\/","title":{"rendered":"#What Is GraphQL, and How Is It Different from REST? \u2013 CloudSavvy IT"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6a28b7836222f\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #dd3333;color:#dd3333\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #dd3333;color:#dd3333\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6a28b7836222f\" checked aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/buradabiliyorum.com\/en\/what-is-graphql-and-how-is-it-different-from-rest-cloudsavvy-it\/#The_Difference_Is_Who_Sets_the_Schema\" >The Difference Is Who Sets the Schema<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/buradabiliyorum.com\/en\/what-is-graphql-and-how-is-it-different-from-rest-cloudsavvy-it\/#How_Do_You_Get_Started\" >How Do You Get Started?<\/a><\/li><\/ul><\/nav><\/div>\n<p><strong>&#8220;#What Is GraphQL, and How Is It Different from REST? \u2013 CloudSavvy IT&#8221;<\/strong><\/p>\n<div id=\"article-content-area\">\n<img loading=\"lazy\" decoding=\"async\" class=\"imgchk9 alignnone wp-image-4787 size-full\" src=\"https:\/\/www.cloudsavvyit.com\/thumbcache\/0\/0\/a36dd2bbcd7b396e028370cd7f9f7793\/p\/uploads\/2020\/05\/49e68867.png\" alt=\"GraphQL brings more structure to services that work with complex data\" width=\"700\" height=\"300\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>GraphQL is a query language and runtime resolver for APIs, used to bring more structure to services that work with complex data. With GraphQL, clients can request only the data they need, and nothing more.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"The_Difference_Is_Who_Sets_the_Schema\"><\/span>The Difference Is Who Sets the Schema<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Traditional REST APIs involve an API server that responds to requests with structured data, usually in the form of JSON. If you make a GET request to <code>api.com\/users\/<\/code>, you might expect to get back in response something along the lines of:<\/p>\n<pre>{&#13;\n  users: [&#13;\n    {&#13;\n      name: 'Anthony',&#13;\n      friends: [...]&#13;\n    }&#13;\n  ]&#13;\n}<\/pre>\n<p>Your <a href=\"https:\/\/buradabiliyorum.com\/en\/category\/download-scripts-themes-apps\/\" data-internallinksmanager029f6b8e52c=\"9\" title=\"Download Scripts &amp; Themes &amp; Apps\" target=\"_blank\" rel=\"noopener\">app<\/a> will look different, but the point is that the schema is defined by the REST endpoint. You only made a request to <code>\/users\/<\/code>, but you got back all this data.<\/p>\n<p>This works well, though, if you know what data you\u2019ll be getting back, and it\u2019s the standard for the majority of services on the web. Though, if you\u2019re making PUT requests, you must supply the API with the proper parameters for it to work with, or else you will run into errors. Of course, you can use URL parameters to pass in values to the API, such as the user ID to fetch, which you can use to make the API more dynamic.<\/p>\n<p>GraphQL APIs do things a little differently. Rather than making individual requests to different endpoints, which all represent different pieces of data, a GraphQL application will send a request to a single origin. The request body contains a schema and tells the API what data to send back. This way, you can request complex data in only one request, and the API never sends back more than it is told to, cutting down on large response sizes.<\/p>\n<p>For example, if you wanted to request the email address of a specific user, you could send a GraphQL request to the <code>api.com<\/code>\u00a0endpoint, with the following query:<\/p>\n<pre>{&#13;\n  users(name: \"Anthony\") {&#13;\n    email&#13;\n  }&#13;\n}<\/pre>\n<p>It doesn\u2019t matter if the \u201cUser\u201d object contains fields for other information; because you only requested the email, you\u2019ll only get sent the email. Of course, you\u2019re still getting sent a JSON object like REST, and you\u2019re still communicating in the same fashion, but the requests are much more informative.<\/p>\n<p>For apps with complex schema, this sort of API can be very useful for organizational reasons. With GraphQL, you\u2019re forced to strictly define your schema when setting up the API, much like static typing forces you to adhere to structs and types. The structure of the data is easily referenceable and modifiable. You can easily achieve this same effect with standard REST APIs, but GraphQL enforces it.<\/p>\n<p>On top of that, GraphQL queries can be more efficient. For example, a popular problem is the \u201cfriends of friends\u201d query. In a REST API, you\u2019d have to send a request for the user in question and then upon receiving the IDs of his friends, you send out individual requests for each friend\u2019s info and then filter that all out for the stuff you want. Of course, you can (and should) implement a new endpoint to perform this query on the database side of things, but that\u2019s a bandaid on the real problem.<\/p>\n<p>With GraphQL, this query is simple. You only need to specify that you want the name for each friend, and (assuming the backend is configured to handle this properly) the API will handle this interaction naturally, without special configuration for each request.<\/p>\n<pre>{&#13;\n  users(name: \"Anthony\") {&#13;\n    friends {&#13;\n      name&#13;\n    }&#13;\n  }&#13;\n}<\/pre>\n<p>Of course, GraphQL is not without its downsides. For simple apps, it\u2019s far too complex to replace a basic REST endpoint. Also, with a traditional REST API, you get the benefit of being able to split up different routes. For example, <code>\/users<\/code>\u00a0and <code>\/posts<\/code>\u00a0can be handled by separate serverless Lambda functions, and can be worked on and updated independently from each other, a concept known as microservices backend. For GraphQL, it\u2019s much more centralized and harder (though not impossible) to split up into separate chunks.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"How_Do_You_Get_Started\"><\/span>How Do You Get Started?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>GraphQL has <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/graphql.org\/code\/\">plenty of server libraries<\/a>\u00a0for different languages, but it\u2019s commonly used with JavaScript and NodeJS.<\/p>\n<p>There are two things that a GraphQL query needs\u2014a schema, which defines the structure and types of the data, and a resolver, which takes an input and returns the value associated with the schema. In the resolver, you can do things like fetch database requests, modify data, and perform any actions you need, provided it all condenses down to a return value matching the schema at the end.<\/p>\n<p>For complex apps, the schema and related resolver <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/dotansimha\/graphql-code-generator\">can be generated automatically<\/a>\u00a0based on the structure, but at the end of the day, the schema is just a type definition, and the resolver is just an object with functions that resolves different keys in the schema.<\/p>\n<pre class=\"prism language-javascript\"><span class=\"keyword\">var<\/span> <span class=\"punctuation\">{<\/span> graphql<span class=\"punctuation\">,<\/span> buildSchema <span class=\"punctuation\">}<\/span> <span class=\"operator\">=<\/span> <span class=\"function\">require<\/span><span class=\"punctuation\">(<\/span><span class=\"string\">'graphql'<\/span><span class=\"punctuation\">)<\/span><span class=\"punctuation\">;<\/span>&#13;\n&#13;\n&#13;\n<span class=\"keyword\">var<\/span> schema <span class=\"operator\">=<\/span> <span class=\"function\">buildSchema<\/span><span class=\"punctuation\">(<\/span><span class=\"template-string\"><span class=\"string\">`&#13;\n  type Query {&#13;\n    hello: String&#13;\n  }&#13;\n`<\/span><\/span><span class=\"punctuation\">)<\/span><span class=\"punctuation\">;<\/span>&#13;\n&#13;\n&#13;\n<span class=\"keyword\">var<\/span> root <span class=\"operator\">=<\/span> <span class=\"punctuation\">{<\/span>&#13;\n  hello<span class=\"punctuation\">:<\/span> <span class=\"punctuation\">(<\/span><span class=\"punctuation\">)<\/span> <span class=\"operator\">=<\/span><span class=\"operator\">&gt;<\/span> <span class=\"punctuation\">{<\/span>&#13;\n    <span class=\"keyword\">return<\/span> <span class=\"string\">'Hello world!'<\/span><span class=\"punctuation\">;<\/span>&#13;\n  <span class=\"punctuation\">}<\/span><span class=\"punctuation\">,<\/span>&#13;\n<span class=\"punctuation\">}<\/span><span class=\"punctuation\">;<\/span>&#13;\n&#13;\n&#13;\n<span class=\"function\">graphql<\/span><span class=\"punctuation\">(<\/span>schema<span class=\"punctuation\">,<\/span> <span class=\"string\">'{ hello }'<\/span><span class=\"punctuation\">,<\/span> root<span class=\"punctuation\">)<\/span><span class=\"punctuation\">.<\/span><span class=\"function\">then<\/span><span class=\"punctuation\">(<\/span><span class=\"punctuation\">(<\/span>response<span class=\"punctuation\">)<\/span> <span class=\"operator\">=<\/span><span class=\"operator\">&gt;<\/span> <span class=\"punctuation\">{<\/span>&#13;\n  console<span class=\"punctuation\">.<\/span><span class=\"function\">log<\/span><span class=\"punctuation\">(<\/span>response<span class=\"punctuation\">)<\/span><span class=\"punctuation\">;<\/span>&#13;\n<span class=\"punctuation\">}<\/span><span class=\"punctuation\">)<\/span><span class=\"punctuation\">;<\/span><\/pre>\n<p>For more information on how to set up a full GraphQL server, you can read <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/graphql.org\/graphql-js\/running-an-express-graphql-server\/\">GraphQL\u2019s guide on installing and using it with Express<\/a>.\n<\/div>\n<blockquote>\n<p style=\"text-align: center;\">For forums sites go to <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/forum.buradabiliyorum.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Forum.BuradaBiliyorum.Com<\/a><\/span><\/strong><\/p>\n<\/blockquote>\n<blockquote>\n<p style=\"text-align: center;\"><strong>If you want to read more like this article, you can visit our <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/en.buradabiliyorum.com\/technology\/\" target=\"_blank\" rel=\"noopener noreferrer\">Technology category.<\/a><\/span><\/strong><\/p>\n<\/blockquote>\n<p><span style=\"color: black;\"><a style=\"color: #ff9900;\" href=\"https:\/\/www.cloudsavvyit.com\/3704\/what-is-graphql-and-how-is-it-different-from-rest\/\" target=\"_blank\" rel=\"noopener noreferrer\">Source<\/a><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>&#8220;#What Is GraphQL, and How Is It Different from REST? \u2013 CloudSavvy IT&#8221; GraphQL is a query language and runtime resolver for APIs, used to bring more structure to services that work with complex data. With GraphQL, clients can request only the data they need, and nothing more. The Difference Is Who Sets the Schema&#8230;<\/p>\n","protected":false},"author":1,"featured_media":76038,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2020\/05\/49e68867.png","fifu_image_alt":"","footnotes":""},"categories":[18],"tags":[],"class_list":["post-76037","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-technology"],"_links":{"self":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/76037","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/comments?post=76037"}],"version-history":[{"count":0,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/76037\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media\/76038"}],"wp:attachment":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media?parent=76037"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/categories?post=76037"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/tags?post=76037"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}