Skip to main content


Sitecore JSS Development Essentials: Graphql integration using Apollo


The Sitecore JavaScript Rendering SDK (JSS) offers GraphQL services and clients that streamline the process of querying and updating data with GraphQL.

Although we can create and choose different content item resolver, for complex queries and data we can opt for Graphql. JSS applications provide various choices for utilizing GraphQL.

If you’re working with a JSS Next.js app and wish to utilize GraphQL, you can easily initialize your application with all the necessary infrastructure to query Sitecore GraphQL endpoints.

When setting up your application using any of Sitecore’s tools for creating a JSS project, you have the option to choose GraphQL as your data query method.

If your JSS application was created using any of Sitecore’s provided tools for JSS projects and you specified the “–fetchWith GraphQL” parameter, the JSS services will use the Sitecore Edge Preview GraphQL endpoint.

This blog will provide step by step process to implement a GraphQL call using Apollo Client on Sitecore Next.js app

  • Install @apollo/client npm
  • Initialize Apollo Client instance


  • Create Graphql query

Sitecore has provided IDE to help you test GraphQL queries before you use them in your application.

You can access this playground IDE by URL: https://<Host>/sitecore/api/graph/edge/ui?sc_apikey=<API_KEY>&sc_lang=en

My previous posts has mentioned where to get API_KEY.


  • Save and call graphql query from frontend app
    • You can create query file and then make a call to graphql

Home Graphql File


Get the results and render result data in TSX file.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Mahima Patel

Mahima Patel is a Sitecore Architect, Working with Perficient for the last 9+ years. Sitecore 8, 9, 10 Professional Certified Developer.

More from this Author

Follow Us