Using GraphQL in JSS Next.js apps

Abstract

Overview of using GraphQL in JSS Next.js apps

If you want to use GraphQL in your JSS Next.js app, you can initialize your application with all the infrastructure prepared for querying Sitecore GraphQL endpoints.

To create a Next.js application that uses the JSS GraphQL API for fetching data, you can provide the --fetchWith parameter to the JSS CLI command jss create.

For example, if you create a code-first JSS app based on the Next.js sample application, run the command:

jss create my-next-app nextjs --fetchWith GraphQL [--prerender SSG|SSR]

To provide the --fetchWith parameter when creating a project with the Sitecore Containers template for Next.js, use the command:

dotnet new sitecore.nextjs.gettingstarted -n MyProject --JSSCreateParams "--fetchWith GraphQL [--prerender SSG|SSR]"

If you created your Next.js JSS app with the default parameters, you can use the sample JSS Next.js app to switch to GraphQL.

If you do not have access to a Sitecore instance, and your JSS Next.js application uses GraphQL to get data from Sitecore, you can not mock Sitecore data using the JSS GraphQL infrastructure, but you can modify the application to use REST services in development and use disconnected data.

To write type-protected code with rich IDE assists using GraphQL types and TypeScript static data typing, you can introspect the GraphQL schema.

In addition to getting Sitecore data with the JSS GraphQL API, you can also query GraphQL endpoints in a similar manner to what you do when developing regular JavaScript applications using connected GraphQL. You can use connected GraphQL to run GraphQL queries at the component level.