{"id":15806,"date":"2018-08-14T11:00:56","date_gmt":"2018-08-14T10:00:56","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=15806"},"modified":"2020-11-12T12:25:09","modified_gmt":"2020-11-12T12:25:09","slug":"building-a-marvel-integration-in-javascript-using-our-graphql-api","status":"publish","type":"post","link":"https:\/\/shopjessicabuckley.com\/blog\/building-a-marvel-integration-in-javascript-using-our-graphql-api\/","title":{"rendered":"Building a Marvel Integration in Javascript, Using Our GraphQL API"},"content":{"rendered":"<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">If you've been following us a little these last few months, you probably noticed we've launched a series of small applications built on top of our <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/shopjessicabuckley.com\/developers\">Platform API<\/a>.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Including:<\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/botbot.shopjessicabuckley.com\/\">BotBot<\/a>: Automate Marvel tasks in Slack by using slash commands, such as creating and adding people to projects or pulling up a searchable list.<\/li>\n<li><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/shopjessicabuckley.com\/integrations\/keynote\">Marvel for Keynote<\/a>: A Mac app which allows you to upload Keynote documents to Marvel<\/li>\n<li><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/shopjessicabuckley.com\/integrations\/dashboard\">Dashboard<\/a>: A microsite that displays the latest designs uploaded to Marvel by members of your team<\/li>\n<li><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/userflows.shopjessicabuckley.com\/\">Userflows<\/a>: A tool which quickly converts prototypes into user journey diagrams.<\/li>\n<\/ul>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">These little applications are only the tip of the iceberg of what's possible with the Marvel API.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">We built these not only to enhance your Marvel experience but also to showcase how to use our Platform API, it's something we launched earlier in the year to allow you to access Marvel's core functionality and build your own tools, apps and integrations. Therefore BotBot, Marvel for Keynote and Dashboard are all open source and can be found on our GitHub account.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Alright let's build a simple, \u201cThe owner of this Marvel account is: [your name]\u201d web application.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/08\/MaxsBlog01.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15840\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/08\/MaxsBlog01.png\" alt=\"API Image\" width=\"750\" height=\"707\" \/><\/a><\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">What do you need?<\/h2>\n<ol class=\"pageWrap pageWrap--s list list--ordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li>Pick a coding language, we'll use Javascript in this.<\/li>\n<li>Visit <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/shopjessicabuckley.com\/oauth\/devtoken\">https:\/\/shopjessicabuckley.com\/oauth\/devtoken<\/a> and save the token. We'll need this to connect to your Marvel account later on.<\/li>\n<li>Read our documentation, especially if you're not clear on how specific things work after this tutorial. <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/shopjessicabuckley.com\/developers\/documentation\/\">https:\/\/shopjessicabuckley.com\/developers\/documentation\/<\/a><\/li>\n<\/ol>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">If you quickly scan through our documentation you'll notice our API uses something called GraphQL, instead of a classic REST API. At first, this fancy word sounded scary to me but it's actually more flexible and easy to understand than REST API's, which can often give you back too much data that you have to scan through.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">For example, when I need the name and email of a user:<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><b class=\"fontWeight-5\"> A classic REST API returns:<\/b><\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li>name<\/li>\n<li>email<\/li>\n<li>address<\/li>\n<li>age<\/li>\n<li>city<\/li>\n<li>...<\/li>\n<\/ul>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><b class=\"fontWeight-5\">A GraphQL API returns only what you need:<\/b><\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li>name<\/li>\n<li>email<\/li>\n<li><del>address<\/del> (I don't need this)<\/li>\n<li><del>age<\/del> (I don't need this)<\/li>\n<li><del>city<\/del> (I don't need this)<\/li>\n<\/ul>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Therefore there is less data for your integration to scan through, which is faster for the Marvel API, faster for your integration and easier to understand by you when going through this data.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Starting to write your integration<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Alright, let's write something in Javascript to understand this better.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">First let's create a <b class=\"fontWeight-5\">hello.html<\/b> file and add this to it:<\/p>\n<aside class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s\">\n<pre class=\"language-markup\"><code class=\"language-markup\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n  &lt;head&gt;\r\n    &lt;title&gt;Hello&lt;\/title&gt;\r\n    &lt;script&gt;\r\n      \/\/ Here we'll add our Javascript\r\n    &lt;\/script&gt;\r\n  &lt;\/head&gt;\r\n  &lt;body&gt;\r\n    &lt;h1 id=\"target\"&gt;&lt;\/h1&gt;\r\n  &lt;\/body&gt;\r\n&lt;\/html&gt;<\/code><\/pre>\n<\/aside>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Now, let's fetch your name from the Marvel API by adding some basic Javascript inside the <code class=\"fontSize-s language-html\">&lt;script&gt;<\/code> tag:<\/p>\n<aside class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s\">\n<pre data-line=\"7-27\" class=\"language-markup\"><code class=\"language-markup\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n  &lt;head&gt;\r\n    &lt;title&gt;Hello&lt;\/title&gt;\r\n    &lt;script&gt;\r\n      \/\/ Here we'll add our Javascript\r\n      var apiUrl = \"https:\/\/api.shopjessicabuckley.com\/graphql\/\";\r\n      var token = \"YOUR TOKEN FOUND IN https:\/\/shopjessicabuckley.com\/oauth\/devtoken\";\r\n      var query = \"query { user { username email } }\";\r\n\r\n      var xhr = new XMLHttpRequest();\r\n      xhr.open(\"POST\", apiUrl);\r\n      xhr.setRequestHeader(\"Content-Type\", \"application\/json\");\r\n      xhr.setRequestHeader(\"Authorization\", \"Bearer \" + token);\r\n      xhr.onreadystatechange = function() {\r\n        if (this.readyState == 4 && this.status == 200) {\r\n          var responseJSON = JSON.parse(this.responseText);\r\n\r\n          \/\/ So you can see in your browser console what got returned\r\n          console.log(responseJSON);\r\n\r\n          \/\/ Let's set the text of the H1 tag to your name\r\n          document.getElementById(\"target\").innerHTML =\r\n            \"The owner of this Marvel account is: \" + responseJSON.data.user.username;\r\n        }\r\n      };\r\n      xhr.send(JSON.stringify({ query: query }));\r\n    &lt;\/script&gt;\r\n  &lt;\/head&gt;\r\n  &lt;body&gt;\r\n    &lt;h1 id=\"target\"&gt;&lt;\/h1&gt;\r\n  &lt;\/body&gt;\r\n&lt;\/html&gt;<\/code><\/pre>\n<\/aside>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Woah that's a lot to digest in one go...<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/08\/MaxsBlog02.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15840\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/08\/MaxsBlog02.png\" alt=\"API Image\" width=\"750\" height=\"707\" \/><\/a><\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">GraphQL queries<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The first two lines are might be straightforward, but the third line is probably where things feel a bit new. When talking about the difference between REST API's and a GraphQL API, I explained that you only query what you need, to avoid fetching the data you don't need. To do this you need to write a GraphQL query.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">To make it easier for everyone to get started with this, we've added a few common query examples to our documentation. Check them out <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/shopjessicabuckley.com\/developers\/documentation\/tutorials\/\">here<\/a>.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Now you're more than likely wondering what other properties are available on the user, other than simply their username and email. For that you can use our reference documentation which can be found <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvelapp.github.io\/apidoc\/ref\/usernode.doc.html \">here<\/a>.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Or you could just use our GraphQL playground over <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/shopjessicabuckley.com\/graphql\">here<\/a>.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">This has auto completion and a docs sidebar, perfect for when you want to write and test your queries before using them in code.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Wrapping up<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">When you open your html file now you should be able to see who the owner is of your Marvel account. (Note: you might have to turn your cross origin setting off in your browser)<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">When you view the console of your browser you will also see what information the API returned after querying it with GraphQL query.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Questions<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">If whilst using our API and after reading our documentation, there are some questions remain unanswered, join our <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvelapp.typeform.com\/to\/eeZOMN\">Slack Community<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you&#8217;ve been following us a little these last few months, you probably noticed we&#8217;ve launched a series of small applications built on top of our Platform API. Including: BotBot: Automate Marvel tasks in Slack by using slash commands, such as creating and adding people to projects or pulling up a searchable list. Marvel for Keynote: A Mac app which&#8230; <a class=\"link link--blue fontWeight-4\" href=\"https:\/\/shopjessicabuckley.com\/blog\/building-a-marvel-integration-in-javascript-using-our-graphql-api\/\">Read More &#65515;<\/a><\/p>\n","protected":false},"author":91,"featured_media":15866,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[453],"tags":[],"class_list":["post-15806","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-integrations-api"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v15.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<meta name=\"description\" content=\"Creator of BotBot, Userflows and Dashboard runs through how to build a Marvel ntegration in Javascript, using our GraphQL API\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/shopjessicabuckley.com\/blog\/building-a-marvel-integration-in-javascript-using-our-graphql-api\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Building a Marvel Integration in Javascript, Using Our GraphQL API | Marvel Blog\" \/>\n<meta property=\"og:description\" content=\"Creator of BotBot, Userflows and Dashboard runs through how to build a Marvel ntegration in Javascript, using our GraphQL API\" \/>\n<meta property=\"og:url\" content=\"https:\/\/shopjessicabuckley.com\/blog\/building-a-marvel-integration-in-javascript-using-our-graphql-api\/\" \/>\n<meta property=\"og:site_name\" content=\"Marvel Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/marvelapp\" \/>\n<meta property=\"article:published_time\" content=\"2018-08-14T10:00:56+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-11-12T12:25:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/shopjessicabuckley.com\/wp-content\/uploads\/2018\/08\/Thumbnail_01.png\" \/>\n\t<meta property=\"og:image:width\" content=\"600\" \/>\n\t<meta property=\"og:image:height\" content=\"449\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:site\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data1\" content=\"3 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/#organization\",\"name\":\"Marvel\",\"url\":\"https:\/\/shopjessicabuckley.com\/blog\/\",\"sameAs\":[\"https:\/\/www.facebook.com\/marvelapp\",\"https:\/\/www.instagram.com\/marvelapp\/\",\"https:\/\/www.linkedin.com\/company\/marvel-app\/\",\"https:\/\/twitter.com\/marvelapp\"],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/#logo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/shopjessicabuckley.com\/wp-content\/uploads\/2018\/06\/Logo-Light.png\",\"width\":1605,\"height\":1130,\"caption\":\"Marvel\"},\"image\":{\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/#website\",\"url\":\"https:\/\/shopjessicabuckley.com\/blog\/\",\"name\":\"Marvel Blog\",\"description\":\"Ideas and words on user experience, design, collaboration and more\",\"publisher\":{\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/shopjessicabuckley.com\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/building-a-marvel-integration-in-javascript-using-our-graphql-api\/#primaryimage\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/shopjessicabuckley.com\/wp-content\/uploads\/2018\/08\/Thumbnail_01.png\",\"width\":\"600\",\"height\":\"449\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/building-a-marvel-integration-in-javascript-using-our-graphql-api\/#webpage\",\"url\":\"https:\/\/shopjessicabuckley.com\/blog\/building-a-marvel-integration-in-javascript-using-our-graphql-api\/\",\"name\":\"Building a Marvel Integration in Javascript, Using Our GraphQL API | Marvel Blog\",\"isPartOf\":{\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/building-a-marvel-integration-in-javascript-using-our-graphql-api\/#primaryimage\"},\"datePublished\":\"2018-08-14T10:00:56+00:00\",\"dateModified\":\"2020-11-12T12:25:09+00:00\",\"description\":\"Creator of BotBot, Userflows and Dashboard runs through how to build a Marvel ntegration in Javascript, using our GraphQL API\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/shopjessicabuckley.com\/blog\/building-a-marvel-integration-in-javascript-using-our-graphql-api\/\"]}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/building-a-marvel-integration-in-javascript-using-our-graphql-api\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/building-a-marvel-integration-in-javascript-using-our-graphql-api\/#webpage\"},\"author\":{\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/#\/schema\/person\/c15a12cd56e8c344978415a704279e44\"},\"headline\":\"Building a Marvel Integration in Javascript, Using Our GraphQL API\",\"datePublished\":\"2018-08-14T10:00:56+00:00\",\"dateModified\":\"2020-11-12T12:25:09+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/building-a-marvel-integration-in-javascript-using-our-graphql-api\/#webpage\"},\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/building-a-marvel-integration-in-javascript-using-our-graphql-api\/#primaryimage\"},\"articleSection\":\"Integrations &amp; API\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/shopjessicabuckley.com\/blog\/building-a-marvel-integration-in-javascript-using-our-graphql-api\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/#\/schema\/person\/c15a12cd56e8c344978415a704279e44\",\"name\":\"Maxime De Greve\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/#personlogo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/840c3a50faa4cfc7c6138fbb03bdfb24e590e8949a055d27e411d6067f9cc9e4?s=96&d=mm&r=g\",\"caption\":\"Maxime De Greve\"},\"description\":\"Designer and Developer @marvelapp. Belgian.\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","_links":{"self":[{"href":"https:\/\/shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/posts\/15806","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/users\/91"}],"replies":[{"embeddable":true,"href":"https:\/\/shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/comments?post=15806"}],"version-history":[{"count":0,"href":"https:\/\/shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/posts\/15806\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/media\/15866"}],"wp:attachment":[{"href":"https:\/\/shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/media?parent=15806"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/categories?post=15806"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/tags?post=15806"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}