{"id":59099,"date":"2023-10-20T14:19:17","date_gmt":"2023-10-20T08:49:17","guid":{"rendered":"https:\/\/www.tothenew.com\/blog\/?p=59099"},"modified":"2023-11-05T14:24:21","modified_gmt":"2023-11-05T08:54:21","slug":"introduction-of-drupal-jsonapi","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/introduction-of-drupal-jsonapi\/","title":{"rendered":"Introduction of Drupal JSON:API"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">JSON API is a standardized specification for building APIs in JSON format. It aims to simplify and streamline the process of creating and consuming APIs by providing a clear and consistent structure for data exchange. JSON API is a core module to access Drupal&#8217;s data structures, i.e., entity types, bundles, fields, etc. It supports the ability to build decoupled applications or integrate Drupal with other systems.<\/span><\/p>\n<h3><b>Enabling JSON API<\/p>\n<p><\/b><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-59081 size-large\" src=\"\/blog\/wp-ttn-blog\/uploads\/2023\/10\/pasted-image-0-1024x420.png\" alt=\"\" width=\"625\" height=\"256\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2023\/10\/pasted-image-0-1024x420.png 1024w, \/blog\/wp-ttn-blog\/uploads\/2023\/10\/pasted-image-0-300x123.png 300w, \/blog\/wp-ttn-blog\/uploads\/2023\/10\/pasted-image-0-768x315.png 768w, \/blog\/wp-ttn-blog\/uploads\/2023\/10\/pasted-image-0-1536x629.png 1536w, \/blog\/wp-ttn-blog\/uploads\/2023\/10\/pasted-image-0-624x256.png 624w, \/blog\/wp-ttn-blog\/uploads\/2023\/10\/pasted-image-0.png 1811w\" sizes=\"(max-width: 625px) 100vw, 625px\" \/><\/h3>\n<p><span style=\"font-weight: 400;\">Visit: \/admin\/config\/services\/jsonapi and check the &#8220;Accept all JSON:API create, read, update, and delete operations.&#8221; option to allow POST, PATCH, and DELETE operations.<\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-59083 size-large\" src=\"\/blog\/wp-ttn-blog\/uploads\/2023\/10\/pasted-image-0-1-1024x229.png\" alt=\"\" width=\"625\" height=\"140\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2023\/10\/pasted-image-0-1-1024x229.png 1024w, \/blog\/wp-ttn-blog\/uploads\/2023\/10\/pasted-image-0-1-300x67.png 300w, \/blog\/wp-ttn-blog\/uploads\/2023\/10\/pasted-image-0-1-768x172.png 768w, \/blog\/wp-ttn-blog\/uploads\/2023\/10\/pasted-image-0-1-1536x343.png 1536w, \/blog\/wp-ttn-blog\/uploads\/2023\/10\/pasted-image-0-1-624x140.png 624w, \/blog\/wp-ttn-blog\/uploads\/2023\/10\/pasted-image-0-1.png 1847w\" sizes=\"(max-width: 625px) 100vw, 625px\" \/><\/p>\n<h3><b>Understanding JSON API<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Every resource in JSON:API must have a globally unique <\/span><span style=\"font-weight: 400;\">type of<\/span><span style=\"font-weight: 400;\"> property. The Drupal JSON:API implementation derives this type property from the entity type machine name and bundle machine name. For example, articles, pages, and users are given the types of node<\/span><span style=\"font-weight: 400;\">&#8212;<\/span><span style=\"font-weight: 400;\">article, node<\/span><span style=\"font-weight: 400;\">&#8212;<\/span><span style=\"font-weight: 400;\">pages, and user<\/span><span style=\"font-weight: 400;\">&#8212;<\/span><span style=\"font-weight: 400;\">user, respectively.<\/span><\/p>\n<h3><b>Example of JSON:API URL structure<\/b><\/h3>\n<p><em><span style=\"font-weight: 400;\">GET | POST: \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/jsonapi\/node\/article<\/span><\/em><\/p>\n<p><em><span style=\"font-weight: 400;\">PATCH | DELETE:\u00a0 \/jsonapi\/node\/article\/{uuid}<\/span><\/em><\/p>\n<p><strong>JSON: API accepts the following HTTP methods<\/strong><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">GET &#8211; Retrieve data, which can be a collection of resources or an individual resource<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">POST &#8211; Create a new resource<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">PATCH &#8211; Update an existing resource<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">DELETE &#8211; Remove an existing resource<\/span><\/li>\n<\/ul>\n<p><b>GET requests:<\/b><\/p>\n<p><span style=\"font-weight: 400;\">The following headers are required on all Get requests.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Accept: application\/vnd.api+json<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Authorization:Basic VOxwmuUua_0<\/span><\/li>\n<\/ul>\n<p><b><br \/>\n<\/b><span style=\"font-weight: 400;\">To get JSON:API object of a single article node, including attributes, relationships, and links.<\/span><b><br \/>\n<\/b><span style=\"font-weight: 400;\">URL: <\/span><a href=\"http:\/\/example.com\/jsonapi\/node\/article\/%7B%7Barticle_uuid\"><span style=\"font-weight: 400;\">http:\/\/example.com\/jsonapi\/node\/article\/{{article_uuid<\/span><\/a><span style=\"font-weight: 400;\">}}<\/span><b><br \/>\n<\/b><b><br \/>\n<\/b><strong>Note: JSON Api works with uuid, not nid. You can find uuid of an entity using the Devel module.<\/strong><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-59087 size-large\" src=\"\/blog\/wp-ttn-blog\/uploads\/2023\/10\/pasted-image-0-2-1024x615.png\" alt=\"\" width=\"625\" height=\"375\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2023\/10\/pasted-image-0-2-1024x615.png 1024w, \/blog\/wp-ttn-blog\/uploads\/2023\/10\/pasted-image-0-2-300x180.png 300w, \/blog\/wp-ttn-blog\/uploads\/2023\/10\/pasted-image-0-2-768x462.png 768w, \/blog\/wp-ttn-blog\/uploads\/2023\/10\/pasted-image-0-2-624x375.png 624w, \/blog\/wp-ttn-blog\/uploads\/2023\/10\/pasted-image-0-2.png 1303w\" sizes=\"(max-width: 625px) 100vw, 625px\" \/><\/p>\n<h3><strong>Response<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">HTTP 200 response. The response body contains the JSON:API object of a single article node, including attributes, relationships, and links.<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><b>Post requests<\/b><\/p>\n<p><span style=\"font-weight: 400;\">The following headers are <\/span><b>required<\/b><span style=\"font-weight: 400;\"> on all POST request to get a proper JSON:API request and response.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Accept: application\/vnd.api+json<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Content-Type:application\/vnd.api+json<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Authorization:Basic VOxwmuUua_0<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Note: You can get access token by \/session\/token.<\/span><\/p>\n<h3><strong>Basic POST request<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">URL: http:\/\/example.com\/jsonapi\/node\/article<\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-59089 size-large\" src=\"\/blog\/wp-ttn-blog\/uploads\/2023\/10\/pasted-image-0-3-1024x615.png\" alt=\"\" width=\"625\" height=\"375\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2023\/10\/pasted-image-0-3-1024x615.png 1024w, \/blog\/wp-ttn-blog\/uploads\/2023\/10\/pasted-image-0-3-300x180.png 300w, \/blog\/wp-ttn-blog\/uploads\/2023\/10\/pasted-image-0-3-768x462.png 768w, \/blog\/wp-ttn-blog\/uploads\/2023\/10\/pasted-image-0-3-624x375.png 624w, \/blog\/wp-ttn-blog\/uploads\/2023\/10\/pasted-image-0-3.png 1303w\" sizes=\"(max-width: 625px) 100vw, 625px\" \/><\/p>\n<h3><strong>Response<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">HTTP 201 (Created) response. The response body contains the JsonApi response of the created entity.<\/span><\/p>\n<p><b>Delete Request:<\/b><b><br \/>\n<\/b><b><br \/>\n<\/b><span style=\"font-weight: 400;\">The following headers are used for All DELETE request :<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Content-Type:application\/vnd.api+json<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Authorization:Basic VOxwmuUua_0<\/span><\/li>\n<\/ul>\n<h3><strong>Basic DELETE request<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">URL: <\/span><a href=\"http:\/\/example.com\/jsonapi\/node\/article\/%7B%7Barticle_uuid\"><span style=\"font-weight: 400;\">http<\/span><b>:<\/b><span style=\"font-weight: 400;\">\/\/example.com\/jsonapi\/node\/article\/{{article_uuid<\/span><\/a><span style=\"font-weight: 400;\">}}<\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-59090 size-large\" src=\"\/blog\/wp-ttn-blog\/uploads\/2023\/10\/pasted-image-0-4-1024x514.png\" alt=\"\" width=\"625\" height=\"314\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2023\/10\/pasted-image-0-4-1024x514.png 1024w, \/blog\/wp-ttn-blog\/uploads\/2023\/10\/pasted-image-0-4-300x151.png 300w, \/blog\/wp-ttn-blog\/uploads\/2023\/10\/pasted-image-0-4-768x385.png 768w, \/blog\/wp-ttn-blog\/uploads\/2023\/10\/pasted-image-0-4-624x313.png 624w, \/blog\/wp-ttn-blog\/uploads\/2023\/10\/pasted-image-0-4.png 1309w\" sizes=\"(max-width: 625px) 100vw, 625px\" \/><\/p>\n<h3><strong>Response<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">HTTP 204 (No content) response. Empty response body.<\/span><\/p>\n<p><b>Patch Request<\/b><\/p>\n<p><span style=\"font-weight: 400;\">The following header is needed for all patch requests:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Accept: application\/vnd.api+json<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Content-Type:application\/vnd.api+json<\/span><\/li>\n<\/ul>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Authorization:Basic VALUE<\/span><\/li>\n<\/ul>\n<h2><span style=\"font-weight: 400;\">Basic PATCH request<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">URL: <\/span><a href=\"http:\/\/example.com\/jsonapi\/node\/article\/%7B%7Barticle_uuid\"><span style=\"font-weight: 400;\">http:\/\/example.com\/jsonapi\/node\/article\/{{article_uuid<\/span><\/a><span style=\"font-weight: 400;\">}}<\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-59091 size-large\" src=\"\/blog\/wp-ttn-blog\/uploads\/2023\/10\/pasted-image-0-5-1024x620.png\" alt=\"\" width=\"625\" height=\"378\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2023\/10\/pasted-image-0-5-1024x620.png 1024w, \/blog\/wp-ttn-blog\/uploads\/2023\/10\/pasted-image-0-5-300x182.png 300w, \/blog\/wp-ttn-blog\/uploads\/2023\/10\/pasted-image-0-5-768x465.png 768w, \/blog\/wp-ttn-blog\/uploads\/2023\/10\/pasted-image-0-5-624x378.png 624w, \/blog\/wp-ttn-blog\/uploads\/2023\/10\/pasted-image-0-5.png 1306w\" sizes=\"(max-width: 625px) 100vw, 625px\" \/><\/p>\n<h3><strong>Response<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">HTTP 200 response. The response body with the JsonApi response of the updated entity.<\/span><\/p>\n<h3><b>Features of JSON API<\/b><\/h3>\n<p><b>Automatic Serialization<\/b><span style=\"font-weight: 400;\">: JSON API handles the serialization of data for you. When you request data from Drupal, it&#8217;s automatically transformed into a JSON API-compliant format, reducing the need for custom serialization code.<\/span><\/p>\n<p><b>Pagination and Sorting<\/b><span style=\"font-weight: 400;\">: JSON API supports pagination and sorting out of the box. This is particularly useful for large datasets, ensuring that clients can retrieve data efficiently.<\/span><\/p>\n<p><b>Relationships<\/b><span style=\"font-weight: 400;\">: JSON API allows you to retrieve related resources in a single request, reducing the number of API calls needed to fetch interconnected data.<\/span><\/p>\n<p><b>Filtering and Querying<\/b><span style=\"font-weight: 400;\">: You can filter and query Drupal resources using query parameters in the URL, allowing you to request only the data you need.<\/span><\/p>\n<h3><b>Benefits of Using JSON API in Drupal 10<\/b><\/h3>\n<p><span style=\"font-weight: 400;\"><strong>1.<\/strong> <\/span><b>Simplified Development<\/b><span style=\"font-weight: 400;\">: JSON API simplifies the development of web applications by providing a standardized way to interact with Drupal&#8217;s data<\/span><\/p>\n<p><b>2. Efficiency<\/b><span style=\"font-weight: 400;\">: With automatic serialization and support for relationships, JSON API reduces the complexity of handling data, leading to more efficient development.<\/span><\/p>\n<p><b>3. Compatibilit<\/b><span style=\"font-weight: 400;\">y: JSON API is widely supported across various programming languages and frameworks, making it easy to integrate Drupal with a wide range of technologies.<\/span><\/p>\n<p><b>4. Scalability<\/b><span style=\"font-weight: 400;\">: JSON API&#8217;s RESTful design allows your Drupal site to scale effortlessly, handling a growing number of clients and requests.<\/span><\/p>\n<h3><b>Conclusion<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">JSON API is a powerful tool that exposes content in a flexible way and in a standardized format. It simplifies the process of building a decoupled application or integrating Drupal with other services and promotes best practices in API design.<\/span><\/p>\n<div class=\"ap-custom-wrapper\"><\/div><!--ap-custom-wrapper-->","protected":false},"excerpt":{"rendered":"<p>JSON API is a standardized specification for building APIs in JSON format. It aims to simplify and streamline the process of creating and consuming APIs by providing a clear and consistent structure for data exchange. JSON API is a core module to access Drupal&#8217;s data structures, i.e., entity types, bundles, fields, etc. It supports the [&hellip;]<\/p>\n","protected":false},"author":1672,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":238},"categories":[3602],"tags":[5510],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/59099"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/1672"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=59099"}],"version-history":[{"count":2,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/59099\/revisions"}],"predecessor-version":[{"id":59382,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/59099\/revisions\/59382"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=59099"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=59099"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=59099"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}