{"id":300343,"date":"2019-12-20T08:18:21","date_gmt":"2019-12-20T15:18:21","guid":{"rendered":"https:\/\/css-tricks.com\/?p=300343"},"modified":"2019-12-20T08:18:21","modified_gmt":"2019-12-20T15:18:21","slug":"raw-graphql-querying","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/raw-graphql-querying\/","title":{"rendered":"Raw GraphQL Querying"},"content":{"rendered":"<p>GraphQL has all kinds of awesome tooling built around it. But like everything on the web, it ultimately comes down to data shootin&#8217; across the ol&#8217; network and responses coming back. If you need to talk to a GraphQL <abbr>API<\/abbr> endpoint, you don&#8217;t absolutely have to use some kind of framework or library to make requests against it. As a matter of fact, you can do it pretty cleanly in vanilla JavaScript.<\/p>\n<p><!--more--><\/p>\n<p>Take the Pok\u00e9mon <abbr>API<\/abbr>, <a href=\"https:\/\/github.com\/lucasbento\/graphql-pokemon\" rel=\"noopener\">available in GraphQL<\/a>, which I found via <a href=\"https:\/\/github.com\/APIs-guru\/graphql-apis\" rel=\"noopener\">this list of APIs<\/a>. It has <a href=\"https:\/\/graphql-pokemon.now.sh\/\" rel=\"noopener\">a GraphiQL interface<\/a> for exploring. <\/p>\n<p>From that page, you can execute queries and see the results. You can also poke into the Network tab in DevTools and see the payload for requests it sends off, and see that it&#8217;s just a bit of JSON that is POSTed. <\/p>\n<figure id=\"post-300344\" class=\"align-none media-300344\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/graphiql.png?ssl=1\" alt=\"\" data-recalc-dims=\"1\" \/><\/figure>\n<p>We can make our own JSON in that format too! First, we&#8217;ll make it an object in the right format, utilizing <a href=\"https:\/\/css-tricks.com\/template-literals\/\">template literals<\/a> to make the GraphQL query look nice (which is actually required because the query syntax is dependent on white-space). Then we JSON-ify it with the native JavaScript <abbr>API<\/abbr> and POST it via the also-native <a href=\"https:\/\/css-tricks.com\/using-fetch\/\"><code>fetch<\/code> <abbr>API<\/abbr><\/a>. <\/p>\n<p class=\"codepen\" data-height=\"434\" style=\"height: 434px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"default\" data-default-tab=\"js,result\" data-user=\"chriscoyier\" data-slug-hash=\"LYERVgr\" style=\"height: 434px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"Raw GraphQL\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/chriscoyier\/pen\/LYERVgr\" rel=\"noopener\"><br \/>\n  Raw GraphQL<\/a> by Chris Coyier  (<a href=\"https:\/\/codepen.io\/chriscoyier\" rel=\"noopener\">@chriscoyier<\/a>)<br \/>\n  on <a href=\"https:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/span>\n<\/p>\n<p>Easy cheesy. And no fancy tooling to request exactly what you need, which is the core benefit of GraphQL.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>GraphQL has all kinds of awesome tooling built around it. But like everything on the web, it ultimately comes down to data shootin&#8217; across the ol&#8217; network and responses coming back. If you need to talk to a GraphQL API endpoint, you don&#8217;t absolutely have to use some kind of framework or library to make [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":278807,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[871],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/graphql-pattern.jpg?fit=1200%2C600&ssl=1","jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/300343"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=300343"}],"version-history":[{"count":4,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/300343\/revisions"}],"predecessor-version":[{"id":300539,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/300343\/revisions\/300539"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/278807"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=300343"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=300343"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=300343"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}