In my previous post I talked a lot about the slide portion of my SUGCON 2019 presentation, if you haven't read that yet, you can check it out here. This post is going to talk about the demo portion of my presentation.

Item Query

The first demo I prepared was pretty simple. I wanted to provide an example of hooking up a GraphQL query to a React component. The query itself just queries the name of the home item. I added a little marquee CSS animation because I promised some fun in the presentation. Just looking at this demo makes me feel nostalgic.

You can check out the code for this demo here.

Multiple Queries

It's possible to wire up multiple queries to a single React component. Using the compose function from apollo-react. It's pretty neat. The queries themselves are just name queries from the Sitecore node and the Home node, nothing too exciting. I also demoed during this portion that on page load in connected mode, GraphQL queries are batched together so if you're leveraging queries on multiple components then you don't have to worry about a ton of different web requests getting dispatched when you load the page.

The code for this demo is available here.

Integrated Query

While we didn't talk about integrated queries during the slide portion of the talk I wanted to provide an example of what one would look like. Integrated queries are stored on Sitecore items and you can leverage them to change the route data that is made available to your React component. This demo includes two versions of the same component, one with an integrated query hooked up and one without to demonstrate some of the power of integrated queries.

The code for the demo is available here.

Activity Log

As a way to demonstrate subscriptions, I built an activity log component that subscribes to all of the built in subscription fields that come with Sitecore JSS. Subscriptions open a web socket and allow data to be pushed to you as it becomes available. In this case, we're subscribing to itemAdded, itemSaved, and itemDeleted. Subscriptions are not likely to scale and shouldn't be utilized on your CD servers but are a good candidate for your CM environment where you want to enhance the authoring experience. These same subscriptions can be tested in GraphiQL as well. Note: you must have web sockets enabled in IIS for this demo to work.

The code for this demo is available here.

Chat

I saved the most fun for last. This component leverages both a subscription and a mutation. First we're open a subscription for itemAdded. After that subscription is established we're allowing users to provide a user name and submit chat messages. When a user submits a chat message it executes a mutation against the GraphQL endpoint against a field that allows us to create items under a particular node. After that item gets created, we get an itemAdded event passed to us because we're already listening for it. This is just a proof of concept example of what you can do with GraphQL and this leverages only built in fields.

The code for this demo is available here.

Conclusion

I hope that some of these demos provide some insight into what's possible to do with GraphQL. There's a lot of built in functionality that you can take advantage of without too much effort. The linked repository will likely evolve so feel free to follow it and check back from time to time.