July 19, 2019 8 min to read

SpotiTube: Using GraphQL in Sitecore JSS

Talk data to me!

Working with JSS is a growing thing and more and more sites are built with Sitecore’s headless technology. It allows you to build application based websites with an enormous speed something unknown in the world of “classic” ASP.NET MVC development. This post is about a sample application I build to show how GraphQL can be used in Sitecore Javascript Services.

For this demo I created a Spotify Web front end and attached a GraphQL backend to it. This app will not use any Sitecore items but it rather consumes the GraphQL service which fetches data from the Spotify API. And this is the soul purpous of this post.

Back to the amount of time creating the app and backend services: 20 hours!

SpotiTube in action

Why GraphQL and not REST

Let’s say we want to make a news site. The front page will be an overview page and the pages after that one will be detail pages. This means the overview page shows a list of items where the detail page will show the context of a route. Let’s focus on the detail page. The data for this page can be retrieved by parsing the data from the JSS route call. But what if we want related articles to show up on the detail page? Then we need an extra call for this list. We can do this in several ways, extend the layout service, do some magic in code or use services. We’re going with option two. What flavour? The existing REST services? Or GraphQL? Did you know that all data from Sitecore can be queried using the Sitecore JSS GraphQL endpoint?

Fake news!!!

If you start searching on Google using keywords like REST and GraphQL you find many statements that GraphQL is the new REST. This is actually not true and people are comparing apples to oranges. I am not going to give you the explanation bause the only good on has been given by Zdenek “Z” Nemec who did a keynote on this topic at Nordic APIs Platform Summit 2018. Also check out his video, it’s brilliant!

REST vs. GraphQL

So back to our choice, with REST we have to make separate calls and do some magic regarding child-parent constraints of our data where GraphQL does that for us as shown in the model below.

REST output vs GraphQL output

Implementing the GraphQL client in JSS

Now that we know that with GraphQL we have one endpoint which we can use as a query mechanism we now should look in how the service has to be created. For the demo I used the mechanism of a GraphQL services which does not run in context of Sitecore. But if you want to know how to do that within the Sitecore context then take a look at the repo of the Sitecore Hackathon 2019 project we did.

Using GraphQL.NET it’s very easy to implement your own schema. First Create a Repository that exposes your models. Then create GraphTypes. They will handle property mapping for your service. In the startup of your service all is registered so it will be available through dependency injection.

The controller exposes the GraphQL schema and this exposes the Query and Mutation logic. Hitting F5 from Visual Studio will start the service and will popup GraphiQL, the tool where you can create and test your queries.

Creating components

Now it’s time to create the components. And we are going to do that the normal JSS way using jss scaffold **<componentName>**and give them the markup and styling.

Componetizing

Global state management with Redux & Placeholders

Now we can start doing the fun stuff: connecting our components to the GraphQL API and let them communicate with eachother. We accomplish this by using React Redux. This allows the components to subscribe to changes in the global state, which are triggered by actions. So follow the link to the Redux website if you want to know how Redux works.

First we create a Query:

    //"3RGLhK1IP9jnYFH4BRFJBS"
    export const GET_ARTIST_QUERY = gql`
        query artist($id: String!){
        artist(id: $id) {
                id
                name
                followers
                popularity
                images {
                height
                url
                width
                }
                relatedArtists {
                    id
                    name
                    images {
                        url
                    }
                }
                albums(limit: 50) {
                    id
                    name
                    images {
                        height
                        width
                        url
                    }
                }
            }
        }
    `;

Then use this in the action:

    const getArtistData = (id: string) => {
        return function (dispatch, getState) {
            var variables = {id: id};
            return client.query({ query: GET_ARTIST_QUERY, variables: variables }).then(function (response) {
                dispatch(clearAlbum())
                dispatch(clearTracks())
                dispatch(success(response))
            }).catch(function (error) {
                //console.log(error)
            })
        }
    }

    const success = (ArtistData: any) => {
        return {
            type: TypeKeys.GET_Artist,
            payload: ArtistData,
            ArtistData
        }
    }

Commit the changes:

    export const ArtistReducer = (state = initState, action: ActionTypes) => {

        switch (action.type) {

            case TypeKeys.GET_Artist:
                return {...state, ...action.payload.data.artist};

            default:
                return state;
        }
    }

And now we can connect the components to the global store:

    // global state mapped to the component's properties
    const mapStateToProps = (state) => {
      return {
        artist: {}
      }
    }

    // global actions mapped to the component's properties
    const mapDispatchToProps = (dispatch) => {
      return {
        getArtist: (id: string) => dispatch(getArtistData(id)),
        getsearchSingleArtist: (query: string) => dispatch(getsearchSingleArtist(query))
      }
    }

    // connect them all
    export default connect(mapStateToProps, mapDispatchToProps)(UIHeader);

For the actual sources check the GitHub Repos.

Finally we want our components to have placeholders. This is not necessary fore my demo but I think it hives a nice touch using custom components and having the ability to use them or exchange them in the Experience Editor.

    const mapStateToProps = (state) => {
      return {
        artist: state.artist,
        tracks: state.tracks,
        album: state.album,
        currentTrack: state.tracks.currentTrack,
      }
    }
    const mapDispatchToProps = (dispatch) => {
      return {

      }
    }

    const withPlaceholderInjected = withPlaceholder([
      {
        placeholder: 'jss-hero',
        prop: 'hero',
      },
      {
        placeholder: 'jss-albums',
        prop: 'albums',
      },
      {
        placeholder: 'jss-related-artists',
        prop: 'relatedArtists',
      },
      {
        placeholder: 'jss-tracklist',
        prop: 'tracklist',
      },
      {
        placeholder: 'jss-playlist',
        prop: 'playlist',
      }
    ])(UIContent);

    const withPlaceholderAndSitecoreContext = withSitecoreContext()(
      withPlaceholderInjected
    );

    export default connect(mapStateToProps, mapDispatchToProps)(withPlaceholderAndSitecoreContext);

The withPlaceholderInjected function creates properties on your component which holds the placeholders. These can now be added like { this.props._PropName_ }.