Documentation

Read and search through all the Sitecore JSS documentation

Walkthrough: Using Component-Level GraphQL in SSR/SSG

The Next.js sample app provides support for component-level data fetching, which enables executing GraphQL queries at the component level.

NOTE: If you follow the Code First developer workflow, you can execute GraphQL component-level queries only in Connected Mode. They are not supported in Disconnected Mode.

The Next.js sample app utilizes the apollo-client library to facilitate fetching, caching, and managing local and remote data with GraphQL. The GraphQLClientFactory is responsible for initializing a new ApolloClient instance.

In the code, we want to have strong types connected to GraphQL types defined in the Sitecore GraphQL Edge endpoint. To achieve this we are using GraphQL Introspection.

The sample app provides a GraphiQL interface for exploring the schema and testing queries. By default, the interface can be accessed using ${SITECORE_API_HOST}/sitecore/api/graph/edge/ui?sc_apikey=${SITECORE_API_KEY}. This interface is helpful if you need to determine what GraphQL types can be used by your components. Note that graphql-let provides the same information about types in corresponding .graphq.d.ts files.

This walkthrough utilizes the sample app's GraphQL-ConnectedDemo component.

To use component-level data fetching with GraphQL, complete the following steps:

  1. Define getStaticProps and/or getServerSideProps in your component. You should perform the following steps inside these functions.
  2. Create a new GraphQL client. GraphQLClientFactory is using the apollo-client library.
import GraphQLClientFactory from 'lib/GraphQLClientFactory';
...
const graphQLClient = GraphQLClientFactory();
  1. Import the needed GraphQL query. graphql-let provides ability to import queries.
import { GraphQlConnectedDemo as GrapQLConnectedDemoDatasource } from './GraphQL-ConnectedDemo.graphql';
  1. To execute the query, use graphQLClient.query and return the resulting data.
const result = await graphQLClient.query({
    query: ConnectedDemoQueryDocument,
    variables: {
        datasource: rendering.dataSource,
        contextItem: layoutData?.sitecore?.route?.itemId,
    },
});

return result.data;
  1. In the render function access this data using useComponentProps hook.
const data = props.rendering.uid
    ? useComponentProps<GraphQLConnectedDemoData>(props.rendering.uid)
    : undefined;

Found a problem? Have something to add? Edit this on GitHub