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

Get the results and render result data in TSX file.

__PRESENT

__PRESENT

__PRESENT

__PRESENT__PRESENT

__PRESENT

__PRESENT__PRESENT