{"id":1833,"date":"2022-04-18T04:00:03","date_gmt":"2022-04-18T02:00:03","guid":{"rendered":"https:\/\/nguenkam.com\/blog\/?p=1833"},"modified":"2022-04-18T04:02:44","modified_gmt":"2022-04-18T02:02:44","slug":"graphql","status":"publish","type":"post","link":"https:\/\/nguenkam.com\/blog\/index.php\/2022\/04\/18\/graphql\/","title":{"rendered":"Introduction to GraphQL"},"content":{"rendered":"\n<ul><li>GraphQL is a language designed for client applications to fetch the exact data needed from an API.<\/li><li>GraphQL allows client applications to describe the type and shape of data required from a backend API.<\/li><li>GraphQL enables client applications to call a single endpoint for any type of request.<\/li><li><em>GraphQL is like SQL, but for the front end.<\/em><\/li><\/ul>\n\n\n\n<p>How did GraphQL come to be? What brought about this paradigm-shifting innovation?<\/p>\n\n\n\n<p>It turns out that GraphQL started at Facebook as a project by engineers Lee Byron, Dan Schafer, and Nick Schrock.<\/p>\n\n\n\n<p>The first prototype was developed in February 2012, and shipped in the Facebook iOS application around August of the same year. The technology itself was not open sourced&nbsp;<a href=\"https:\/\/engineering.fb.com\/core-data\/graphql-a-data-query-language\/\">until 2015<\/a>.<\/p>\n\n\n\n<p>The developers on the mobile application needed to work with a lot of nested and interlinked data. To make the application performant, they needed to query the exact shape of the data they needed \u2014 to serve modules like the news feed, messaging, and the Facebook wall with posts, along with their respective comments, and likes, and likes for comments under the posts\u2026 do you see the problem?<\/p>\n\n\n\n<p>They eventually solved these issues with the technology we now know as GraphQL.&nbsp;<\/p>\n\n\n\n<h4>Why GraphQL ?<\/h4>\n\n\n\n<p>Let\u2019s assume you have a blog API that has users and these users create posts and that you can retrieve data similar to the collection below.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#91;\n  {\n    id: 1,\n    name: \"Fikayo Adepoju\",\n    email: \"fik4christ@yahoo.com\",\n    posts: &#91;\n      {\n        id: 1,\n        title: \"Debugging an Ionic Android App Using Chrome Dev Tools\",\n        published: true,\n        link:\n          \"https:\/\/medium.com\/@coderonfleek\/debugging-an-ionic-android-app-using-chrome-dev-tools-6e139b79e8d2\",\n        author: 1\n      },\n      {\n        id: 2,\n        title: \"Hosting a Laravel Application on Azure Web App\",\n        published: true,\n        link:\n          \"https:\/\/medium.com\/@coderonfleek\/hosting-a-laravel-application-on-azure-web-app-b55e12514c46\",\n        author: 1\n      }\n     ]\n  },\n  {\n    id: 3,\n    name: \"Jane Paul\",\n    email: \"jane@company.com\",\n    posts: &#91;]\n  }\n];<\/code><\/pre>\n\n\n\n<p>The User data has these properties:<\/p>\n\n\n\n<ul><li>ID<\/li><li>name<\/li><li>email<\/li><\/ul>\n\n\n\n<p>Each user Post has these properties:<\/p>\n\n\n\n<ul><li>ID<\/li><li>title<\/li><li>published (boolean representing whether the post is published or not)<\/li><li>link (link to the article)<\/li><li>author (user\u2019s ID)<\/li><\/ul>\n\n\n\n<p>Now imagine that you need to build these three frontend components:<\/p>\n\n\n\n<ul><li>A Profile component that shows user information<\/li><li>A Post component that displays a post, its link, and the author\u2019s name<\/li><li>An Author component that shows a user\u2019s details and list of post titles by the user<\/li><\/ul>\n\n\n\n<p>All these components require different shapes of data. With a traditional <strong>REST API<\/strong>, each different shape of data would require its own endpoint or require tacking numerous, ugly query parameters to the endpoint. For example, when the front end would request user data, there would be no way of specifying if you only want the ID and email of the user (no name), or you just want the name of the user. The API returns all of the user data. Good luck if your user data contains more parameters than the example above.<\/p>\n\n\n\n<p>You might ask, is it really that expensive to have all the user data returned? The answer is, as always, it depends.<\/p>\n\n\n\n<p>Imagine that you need to show all of the authors on the blog, but you only need to show the names of the authors. If you have 50 authors to display and your user is viewing the page from a mobile application, it will be quite expensive to download the complete user data for each of the fifty authors into the mobile app just to display their names.<\/p>\n\n\n\n<p>With GraphQL, the client is given control over the shape of data to query. All other content within the database wouldn&#8217;t be returned, so the issue of overfetching wouldn&#8217;t be a concern. Overfetching means getting more information than you need. The user can simply say something like this:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><em>Get me the users but I only want their names, thank you.<\/em><\/code><\/pre>\n\n\n\n<p>And the API responds with a collection of user data containing just the names of the authors. <span class=\"has-inline-color has-vivid-cyan-blue-color\"><em><strong>And you can do this from just one endpoint<\/strong><\/em><\/span>. Unlike REST, a GraphQL API exposes a single endpoint. This is the endpoint that serves all requests made by the client.<\/p>\n\n\n\n<h4>How GraphQL Queries Work<\/h4>\n\n\n\n<p>So far we have learned that GraphQL is a language spoken by the client, but in what way does the client speak this language? What is the format for sending a request in GraphQL?<\/p>\n\n\n\n<p>Requests are made using a special format that is used to describe the data The best way to learn this format is to write some GraphQL queries. Let\u2019s pick the three components in the last section and write queries for their respective data requests in GraphQL.<\/p>\n\n\n\n<h4><span class=\"has-inline-color has-vivid-cyan-blue-color\">A Profile component that shows user information<\/span><\/h4>\n\n\n\n<p>This component requires a user\u2019s information. In GraphQL, the request would be:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n    user(id : 1){\n        Id\n        name\n        email\n    }\n}<\/code><\/pre>\n\n\n\n<p>The request above queries the GraphQL endpoint with the user\u2019s ID and gets back the ID, name, and email of the user.<\/p>\n\n\n\n<h4><span class=\"has-inline-color has-vivid-cyan-blue-color\">A Post component that displays a post, its link, and the author\u2019s name<\/span><\/h4>\n\n\n\n<p>This component requires a specific post and the name of the post\u2019s author:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n    post(id : 2){\n        title\n        link\n        author {\n            name\n        }\n    }\n}<\/code><\/pre>\n\n\n\n<p>The query above requests a single post by sending the ID of the post. The post is returned with the title and the link. The author of the post is also returned.<\/p>\n\n\n\n<h4><span class=\"has-inline-color has-vivid-cyan-blue-color\">An Author component that shows a user\u2019s details and list of post titles by the user<\/span><\/h4>\n\n\n\n<p>This component needs to get a user and the post titles authored by that user<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n    user(id : 2){\n        email\n        name\n        posts {\n            title\n        }\n    }\n}<\/code><\/pre>\n\n\n\n<p>The query above requests a user\u2019s data and includes with it all the user\u2019s posts, but only retrieves the titles of the posts. In the array of posts returned, only the title of the posts are contained in each post object.<\/p>\n\n\n\n<p>Let\u2019s test out a query on a GraphQL demo created by one of my favorite authors, Andrew Mead. The demo is also based on an API that exposes users and their posts.<\/p>\n\n\n\n<p>We will query for all the users and the title of their posts<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n    users{\n        id\n        name\n        email\n        posts{\n            title\n        }\n    }\n}<\/code><\/pre>\n\n\n\n<p>The good thing about GraphQL APIs is that they are self-documenting and will flag any incorrect query and return helpful error messages.<\/p>\n\n\n\n<p>Now paste the query in the left window of the GraphQL playground at&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/graphql-demo.mead.io\/\" target=\"_blank\">https:\/\/graphql-demo.mead.io\/<\/a>&nbsp;then hit the play button to run the query. You will get something similar to the screen below:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" src=\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/04\/image-24.png\" alt=\"\" class=\"wp-image-1834\" width=\"526\" height=\"291\" srcset=\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/04\/image-24.png 712w, https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/04\/image-24-300x166.png 300w\" sizes=\"(max-width: 526px) 100vw, 526px\" \/><\/figure><\/div>\n\n\n\n<p>Awesome!<\/p>\n\n\n\n<p>With this, you have a practical demonstration of how GraphQL works. Feel free to play with some queries on the query window to get a better understanding of how querying data works in GraphQL. Click on the little green tab on the right edge of the screen that reads&nbsp;<strong>SCHEMA<\/strong>&nbsp;to inspect the structure of the data the API exposes.<\/p>\n\n\n\n<h4>How to Resolve GraphQL Queries?<\/h4>\n\n\n\n<p>Our API must be able to read and understand GraphQL queries.<\/p>\n\n\n\n<p><span class=\"has-inline-color has-vivid-red-color\"><em>Breaking news! <\/em><\/span>The bulk of the work that needs to be done in implementing GraphQL APIs is done in the backend. <\/p>\n\n\n\n<p>We need to expose a GraphQL endpoint from our backend that clients can query to get data as-needed. So how do we do that?<\/p>\n\n\n\n<p>At the backend, we need to create an interface that exposes the data we have available to the client.<\/p>\n\n\n\n<p>Let\u2019s take a look at our blog API. We have data for Users and we have data for Posts. Those are two separate entities. In GraphQL we need to define these by creating a schema.<\/p>\n\n\n\n<p>In GraphQL, entities (or models) are represented by types. Therefore, we need to define a User type and a Post type in our schema. <em><span class=\"has-inline-color has-vivid-cyan-blue-color\"><strong>A type definition simply lists the properties available to the client of that type<\/strong><\/span><\/em>. Below is how we define types for our User and Post types:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>type User {\n        id: Int!\n        name: String!\n        email: String\n        posts: &#91;Post!]\n}\n \ntype Post {\n    id: Int!\n    title: String!\n    published: Boolean!\n    link: String\n    author: User!\n}<\/code><\/pre>\n\n\n\n<p>Let\u2019s break these down. Types are defined as key\/value pairs, the keys being the properties you wish to expose while the values are standard GraphQL data types or custom types.<\/p>\n\n\n\n<p>GraphQL ships with several default types, the most common ones being the scalar types. There are five scalar types for defining the datatype of any property you are returning from the API. These are:<\/p>\n\n\n\n<ul><li><strong>ID:<\/strong>&nbsp;defines a field with a unique identifier<\/li><li><strong>Int:<\/strong>&nbsp;A signed 32?bit integer<\/li><li><strong>Float:<\/strong>&nbsp;A signed double-precision floating-point value<\/li><li><strong>String:<\/strong>&nbsp;A UTF?8 character sequence<\/li><li><strong>Boolean:<\/strong>&nbsp;true or false<\/li><\/ul>\n\n\n\n<p>We can also define custom scalar types :<\/p>\n\n\n\n<p>The <strong>User<\/strong> and <strong>Post<\/strong> types that we just defined are custom types. Observe that we have a post\u2019s property on the User type set to the custom type Post, this returns an array of posts belonging to a user. We also have an author property on the Post type which returns the details of the author of a post.<\/p>\n\n\n\n<p><em><span class=\"has-inline-color has-luminous-vivid-orange-color\"><strong>The exclamation marks <\/strong><\/span><strong><span class=\"has-inline-color has-vivid-red-color\">(!)<\/span><\/strong><span class=\"has-inline-color has-luminous-vivid-orange-color\"><strong> indicate non-nullable fields. Any field without an exclamation mark can return null.<\/strong><\/span><\/em><\/p>\n\n\n\n<p>To query these types, we need to define one of GraphQL\u2019s default types : the <strong><em>Query type<\/em><\/strong>.<\/p>\n\n\n\n<p>The<em><strong> Query type<\/strong><\/em> is used to define data points for querying. For example, if we write the following query:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n     users {\n    name\n    email\n     }\n}<\/code><\/pre>\n\n\n\n<p>It means that a user\u2019s data querying point has been defined inside the Query type. A typical Query type definition looks like this:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>type Query {\n    users: &#91;User!]!,\n    user(id: Int!): User!\n}<\/code><\/pre>\n\n\n\n<p>This definition exposes two querying points. The first one, users can fetch a collection of users. The second one, user, can fetch a single user given the id of the user.<\/p>\n\n\n\n<p>Now, this is all well and good but I am sure you\u2019re asking, how will I connect these query points to my data source? And how will I ensure that only the properties the client requests get returned? We can answer the first question with another concept in GraphQL known as <strong><em>Resolvers<\/em><\/strong>. The second question is handled by GraphQL itself so we don\u2019t have to worry about it.<\/p>\n\n\n\n<p>Resolvers are functions that map to your querying points to return the entity requested.<\/p>\n\n\n\n<p>For example, our data source is an array of users. A resolver for the user query point will look like this:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\nfunction () {\n    return usersArray;\n}<\/code><\/pre>\n\n\n\n<p>A resolver for the user query point will look like:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function ({ id }){\n    return  usersArray.find((user) =&amp;gt;; user.id == id);\n}<\/code><\/pre>\n\n\n\n<p>Don\u2019t get too attached to the syntax, as various programming languages have their own ways of writing resolver functions.<\/p>\n\n\n\n<p><span class=\"has-inline-color has-vivid-red-color\"><strong><em>In summary:<\/em><\/strong><\/span><\/p>\n\n\n\n<ul><li>Custom types are defined for each data entity\/model<\/li><li>The Query type is used to expose various query points as needed<\/li><li>Resolvers are used to resolve queries to each query point<\/li><\/ul>\n\n\n\n<h4>Using GraphQL with Existing Backends<\/h4>\n\n\n\n<p>There are still following questions to answer:<\/p>\n\n\n\n<ul><li>How do I implement these concepts in my preferred back end language?<\/li><li>How do Types, Query types, and Resolvers fit together into one GraphQL API?<\/li><li>How do I expose the single (magical) endpoint that answers all my queries?<\/li><\/ul>\n\n\n\n<p>GraphQL is language-agnostic, so none of the above concepts rely on any specific language. The concepts apply across all languages that currently support GraphQL.<\/p>\n\n\n\n<p>As for the implementation, there are libraries for all popular back end languages that you can use to implement a GraphQL API.<\/p>\n\n\n\n<p>On the&nbsp;<a href=\"https:\/\/graphql.org\/code\/#server-libraries\">Server Libraries<\/a>&nbsp;page of GraphQL\u2019s official website, you will find libraries for backend languages\/frameworks like C#, Node.js (Javascript), Go, PHP, Java, etc.<\/p>\n\n\n\n<p>With these libraries and a good grasp of the concepts you have learned so far, you can get a GraphQL server up and running in no time.<\/p>\n\n\n\n<h4>Building a Simple GraphQL Server with Node.js<\/h4>\n\n\n\n<p>We will be building a simple GraphQL server in Node.js which uses a static data store (<em><span class=\"has-inline-color has-vivid-cyan-blue-color\"><strong>in production this data will mostly come from a database<\/strong><\/span><\/em>).<\/p>\n\n\n\n<p>&nbsp;we are going to need three packages from NPM which are:<\/p>\n\n\n\n<ul><li><a href=\"https:\/\/expressjs.com\/\">Express<\/a>: to create a simple Node.js server<\/li><li><a href=\"https:\/\/www.npmjs.com\/package\/graphql\">GraphQL<\/a>: the GraphQL server library for Node.js<\/li><li><a href=\"https:\/\/github.com\/graphql\/express-graphql\">Express-GraphQL<\/a>: Express middleware for composing a GraphQL server.<\/li><\/ul>\n\n\n\n<p>Let\u2019s install these packages in one go by running the following command:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm install express graphql express-graphql<\/code><\/pre>\n\n\n\n<p>Once the installation is done, let\u2019s begin putting together our GraphQL server.<\/p>\n\n\n\n<p>The first thing we will do is create our static data store and export it. Create a file named data.js at the root of the project and fill it with the following code:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* data.js *\/\n \nconst Users = &#91;\n  {\n    id: 1,\n    name: \"Fikayo Adepoju\",\n    email: \"fik4christ@yahoo.com\",\n    posts: &#91;\n      {\n        id: 1,\n        title: \"Debugging an Ionic Android App Using Chrome Dev Tools\",\n        published: true,\n        link:\n          \"https:\/\/medium.com\/@coderonfleek\/debugging-an-ionic-android-app-using-chrome-dev-tools-6e139b79e8d2\",\n        author: 1\n      },\n      {\n        id: 2,\n        title: \"Hosting a Laravel Application on Azure Web App\",\n        published: true,\n        link:\n          \"https:\/\/medium.com\/@coderonfleek\/hosting-a-laravel-application-on-azure-web-app-b55e12514c46\",\n        author: 1\n      }\n     ]\n  },\n  {\n    id: 3,\n    name: \"Jane Paul\",\n    email: \"jane@company.com\",\n    posts: &#91;]\n  }\n];\n \n \nmodule.exports = {\n  Users\n};<\/code><\/pre>\n\n\n\n<p>This file exports a collection of user data and each user\u2019s posts.<\/p>\n\n\n\n<p>Next, let\u2019s build our schema and export it. Create a file named schema.js at the root of your project and enter the following code:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* schema.js *\/\n \nconst { buildSchema } = require(\"graphql\");\n \nconst schema = buildSchema(`\n    type Query {\n        users: &#91;User!]!,\n        user(id: Int!): User!\n    }\n \n \n    type User {\n        id: ID!\n        name: String!\n        email: String\n        posts: &#91;Post!]\n    }\n \n    type Post {\n        id: ID!\n        title: String!\n        published: Boolean!\n        link: String\n        author: User!\n    }\n`);\n \nmodule.exports = schema;<\/code><\/pre>\n\n\n\n<p>In this file, we use the buildSchema method from Node.js\u2019s GraphQL library to set up our schema. We create two custom types, User and Post, then expose users and user query points in our query definition.<\/p>\n\n\n\n<p>Next, let\u2019s build the resolvers that will handle these queries. Create a file named resolvers.js at the root of the project and enter the following code:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* resolvers.js*\/\n \nconst {Users} = require('.\/data')\n \nconst resolvers = {\n  users: async (_) =&amp;gt;; {\n    return Users;\n  },\n  user: async ({ id }, context) =&amp;gt;; {\n    return Users.find((user) =&amp;gt;; user.id == id)\n  }\n};\n \nmodule.exports = resolvers;<\/code><\/pre>\n\n\n\n<p>In this file, we import our Users collection from data.js and use it to return the appropriate data in our resolvers for the users and user query points.<\/p>\n\n\n\n<p>Time to connect our schema to our resolvers and expose our GraphQL endpoint.<\/p>\n\n\n\n<p>Create a file named index.js at the root of the project and enter the following code:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* index.js *\/\n \nconst express = require(\"express\");\nconst graphqlHTTP = require(\"express-graphql\");\nconst schema = require(\".\/schema\");\nconst resolvers = require(\".\/resolvers\");\n \n \nconst app = express();\n \napp.use(\n  \"\/graphql\",\n  graphqlHTTP({\n    schema,\n    rootValue: resolvers,\n    graphiql: true\n  })\n);\n \n \nconst port = process.env.PORT || 4200;\n \napp.listen(port);\n \nconsole.log(`? Server ready at http:\/\/localhost:4200\/graphql`);<\/code><\/pre>\n\n\n\n<p>In the above file, we create an ExpressJS application and use the express-graphql middleware package to connect our schema to our resolvers and expose our GraphQL API at the endpoint \/graphql.<\/p>\n\n\n\n<p>We also set a third parameter graphiql : true. This was done to enable the&nbsp;<a href=\"https:\/\/github.com\/graphql\/graphiql\">GraphiQL<\/a>&nbsp;tool. GraphiQL (notice the i) is a web-based GUI for testing our GraphQL queries. This tool comes shipped with the GraphQL package.<\/p>\n\n\n\n<p>Finally, we set our server to listen on port 4200.<\/p>\n\n\n\n<p>Now, let\u2019s take our GraphQL server for a spin.<\/p>\n\n\n\n<p>Boot up the server by running the following command at the root of your project:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>node index.js<\/code><\/pre>\n\n\n\n<p>The console message should indicate that the server is now running at port 4200.<\/p>\n\n\n\n<p>Go into your favorite browser and visit http:\/\/localhost:4200\/graphql:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" src=\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/04\/image-25.png\" alt=\"\" class=\"wp-image-1835\" width=\"528\" height=\"295\" srcset=\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/04\/image-25.png 713w, https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/04\/image-25-300x167.png 300w\" sizes=\"(max-width: 528px) 100vw, 528px\" \/><\/figure><\/div>\n\n\n\n<p>Now run the following query in the query window:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n   users {\n      name\n      email\n      posts  {    \n             title\n      }\n   }\n}<\/code><\/pre>\n\n\n\n<p>Hit the play button and you will see the screen below:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" src=\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/04\/image-26.png\" alt=\"\" class=\"wp-image-1836\" width=\"682\" height=\"382\" srcset=\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/04\/image-26.png 712w, https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/04\/image-26-300x168.png 300w\" sizes=\"(max-width: 682px) 100vw, 682px\" \/><\/figure><\/div>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h5>Reference:<\/h5>\n\n\n\n<p><blockquote class=\"wp-embedded-content\" data-secret=\"Ji29AuORLN\"><a href=\"https:\/\/thenewstack.io\/introduction-to-graphql\/\">Introduction to GraphQL<\/a><\/blockquote><iframe class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" title=\"&#8220;Introduction to GraphQL&#8221; &#8212; The New Stack\" src=\"https:\/\/thenewstack.io\/introduction-to-graphql\/embed\/#?secret=ClLCFrHksj#?secret=Ji29AuORLN\" data-secret=\"Ji29AuORLN\" width=\"600\" height=\"338\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe><\/p>\n","protected":false},"excerpt":{"rendered":"<p>GraphQL is a language designed for client applications to fetch the exact data needed from an API. GraphQL allows client applications to describe the type and shape of data required from a backend API. GraphQL enables client applications to call a single endpoint for any type of request. GraphQL is like SQL, but for the [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1837,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1,26,145],"tags":[28,531,532],"_links":{"self":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/1833"}],"collection":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=1833"}],"version-history":[{"count":3,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/1833\/revisions"}],"predecessor-version":[{"id":1840,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/1833\/revisions\/1840"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media\/1837"}],"wp:attachment":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=1833"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=1833"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=1833"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}