blog: add blog post about recently added graphiql-explorer (gatsbyjs#…

…14393) * first draft * add videos, spot one typo * add link to graphql-reference graphiql endpoint * add more graphql intro * fix typo * remove feature request CTA * update date * add link to GraphQL * use auto-generated excerpt * Apply suggestions from code review Co-Authored-By: Dustin Schau <[email protected]> * chore: format * Update index.md * Apply suggestions from code review Co-Authored-By: Jason Lengstorf <[email protected]> Co-Authored-By: Mike Allanson <[email protected]> * too much "for more details" * Update docs/blog/2019-05-29-intergrating-graphiql-explorer/index.md * Apply suggestions from code review Co-Authored-By: Marcy Sutton <[email protected]> * apply captions to videos, drop autoplay and loop * adjust date * update videos to use updated explorer * update future work * Update docs/blog/2019-06-03-intergrating-graphiql-explorer/index.md Co-Authored-By: Dustin Schau <[email protected]>
ajordanow · Jun 3, 2019 · f4bbbd6 · f4bbbd6
1 parent 7994d7c
commit f4bbbd6
Show file tree

Hide file tree

Showing 5 changed files with 81 additions and 0 deletions.
diff --git a/docs/blog/2019-06-03-intergrating-graphiql-explorer/graphiql-explorer-demo.mp4 b/docs/blog/2019-06-03-intergrating-graphiql-explorer/graphiql-explorer-demo.mp4
diff --git a/docs/blog/2019-06-03-intergrating-graphiql-explorer/graphiql-explorer-union-demo.mp4 b/docs/blog/2019-06-03-intergrating-graphiql-explorer/graphiql-explorer-union-demo.mp4
diff --git a/docs/blog/2019-06-03-intergrating-graphiql-explorer/index.md b/docs/blog/2019-06-03-intergrating-graphiql-explorer/index.md
@@ -0,0 +1,77 @@
+---
+title: Improvements to GraphiQL IDE - adding GraphiQL Explorer
+date: 2019-06-03
+author: Michal Piechowiak
+tags:
+  - graphql
+  - graphiql-explorer
+  - developer experience
+---
+
+Gatsby's data layer is powered by [GraphQL](https://graphql.org/). This means that if you are building a Gatsby site, you will almost certainly use GraphQL to take advantage of Gatsby's rich plugin ecosystem that extends this schema with data from _anywhere_. A popular tool for exploring your GraphQL schema is [GraphiQL](https://github.com/graphql/graphiql) — which is a graphical, interactive, in-browser GraphQL development environment. It serves as an interactive playground where you can compose, test, and see the live results of your queries. If you haven't seen or used GraphiQL, it looks something like this:
+
+<figure>
+  <video controls="controls" autoplay="false">
+    <source type="video/mp4" src="/graphiql-explore.mp4"></source>
+    <p>Your browser does not support the video element.</p>
+  </video>
+  <figcaption>GraphiQL demo</figcaption>
+</figure>
+
+## What is GraphiQL Explorer?
+
+[`graphiql-explorer`](https://github.com/OneGraph/graphiql-explorer) is a plugin for GraphiQL that adds a new technique to explore and build GraphQL queries. It adds a graphical representation of available fields and inputs that can be used in queries. It also allows constructing full queries by clicking through available fields and inputs without the repetitive process of typing these queries out by hand!
+
+GraphiQL Explorer was built by the team at [OneGraph](https://www.onegraph.com/) (OneGraph is a single GraphQL endpoint through which you can bring in data from dozens of services like Salesforce, Stripe, Spotify, GitHub, and more). Check out the ["Build a Podcast Mashup App Using OneGraph and Gatsby — Learn With Jason](https://www.youtube.com/watch?v=10jeoEWy-8g&list=PLz8Iz-Fnk_eTpvd49Sa77NiF8Uqq5Iykx&index=25&t=0s) recording to learn more about OneGraph and how to use it with Gatsby.
+
+## Why use GraphiQL Explorer?
+
+We often hear that many developers' first usage of GraphQL is through Gatsby. GraphQL, like any technology, has a learning curve. We can't eliminate this learning curve completely but we can try to make it smoother. As mentioned previously, GraphiQL Explorer allows users to build full GraphQL queries without typing a single line of code. This enables users that don't yet fully understand the GraphQL query syntax to _learn_ GraphQL much more easily:
+
+<figure>
+  <video controls="controls" autoplay="false">
+    <source type="video/mp4" src="./graphiql-explorer-demo.mp4"></source>
+    <p>Your browser does not support the video element.</p>
+  </video>
+  <figcaption>GraphiQL Explorer introduction demo</figcaption>
+</figure>
+
+Check out ["How OneGraph onboards users who are new to GraphQL"](https://www.onegraph.com/blog/2019/01/24/How_OneGraph_onboards_users_new_to_GraphQL.html) blog post for more details.
+
+## Advanced usecases
+
+Improvements to on-boarding users new to GraphQL isn't the only goal of integrating GraphiQL Explorer into Gatsby. There are other pain points that are getting addressed with this addition. Specifically [union types and inline fragments](https://graphql.org/learn/queries/#inline-fragments). If the user is not aware of this syntax to query this type of fields it can be a fairly frustrating experience! GraphiQL Explorer helps solve this problem by listing available union types:
+
+<figure>
+  <video controls="controls" autoplay="false">
+    <source type="video/mp4" src="./graphiql-explorer-union-demo.mp4"></source>
+    <p>Your browser does not support the video element.</p>
+  </video>
+  <figcaption>GraphiQL Explorer union types support</figcaption>
+</figure>
+
+## Try it now
+
+We recently [added](https://github.com/gatsbyjs/gatsby/pull/14280) GraphiQL Explorer to Gatsby. It's available starting with `[email protected]`.
+
+Create new Gatsby project:
+
+```shell
+gatsby new gatsby-with-explorer
+```
+
+or update Gatsby in your existing project:
+
+```shell
+npm install gatsby
+```
+
+or try it [live](https://gatsby-1774317511.gtsb.io/___graphql?explorerIsOpen=true).
+
+## Future work
+
+There are opportunities for further improvements for Gatsby users. Few things we will be working on are:
+
+- evaluating accessibility of GraphiQL interface and addressing found issues,
+- adding [support for using GraphQL fragments provided by Gatsby plugins](https://github.com/gatsbyjs/gatsby/issues/14371),
+- adding [code snippet generation for common workflows](https://github.com/gatsbyjs/gatsby/issues/14476) (using another awesome OneGraph's GraphiQL addon - [`graphiql-code-exporter`](https://github.com/OneGraph/graphiql-code-exporter)).
diff --git a/docs/blog/author.yaml b/docs/blog/author.yaml
@@ -292,3 +292,7 @@
   bio: Software developer @ GatsbyJS. Loves cats, design systems, CSS, and JavaScript.
   avatar: avatars/brent-jackson.jpg
   twitter: "@jxnblk"
+- id: Michal Piechowiak
+  bio: Software developer @ GatsbyJS. Likes solving weird problems, skiing and watching/reading sci-fi. In that order.
+  avatar: avatars/michal-piechowiak.jpeg
+  twitter: "@mipiechowiak"
diff --git a/docs/blog/avatars/michal-piechowiak.jpeg b/docs/blog/avatars/michal-piechowiak.jpeg