Use GraphQL to fetch component-level data in JSS Next.js apps

Abstract

Example of fetching data with GraphQL in components

The Next.js sample app provides support for component-level data fetching enabling querying GraphQL endpoints at the component level.

Note

If you follow the code-first developer workflow, you can run GraphQL component-level queries only in connected mode.

In the code, it is a good practice to have strong types connected to GraphQL types defined in the Sitecore GraphQL Edge endpoint. To achieve this the application uses the library graphql-let and GraphQL introspection data.

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

The graphql-let library provides the same information about types in corresponding .graphq.d.ts files.

To use component-level data fetching with GraphQL:

In a GraphQL-ConnectedDemo.graphql file, define a GraphQL query following the Connected Demo query example.
The library graphql-let generates a file GraphQL-ConnectedDemoQuery.graphql.d.ts.

In your component file, add the following import statement:

import {  GetServerSideComponentProps,  GetStaticComponentProps,  useComponentProps,  GraphQLRequestClient} from '@sitecore-jss/sitecore-jss-nextjs';

Import your GraphQL query. graphql-let provides the ability to import queries.

import {
  ConnectedDemoQueryDocument,
  AppRoute,
  Item,
  GraphQlConnectedDemo as GrapQLConnectedDemoDatasource,} from './ConnectedDemoQuery.graphql';

In your component, define getStaticProps or getServerSideProps functions. In this example we implement getStaticProps:
```
export const getStaticProps: GetStaticComponentProps = async (rendering, layoutData) => {

}
```

Because GraphQL does not work in disconnected mode, you must exit the function if the app is running in disconnected mode:

 export const getStaticProps: GetStaticComponentProps = async (rendering, layoutData) => {
    if (process.env.JSS_MODE === constants.JSS_MODE.DISCONNECTED) {    
        return null;  
    }
}

In your getStaticProps function, create a new GraphQL client using the GraphQLRequestClient:

 export const getStaticProps: GetStaticComponentProps = async (rendering, layoutData) => {
    if (process.env.JSS_MODE === constants.JSS_MODE.DISCONNECTED) {    
        return null;  
    }
    const graphQLClient = new GraphQLRequestClient(config.graphQLEndpoint, {    
        apiKey: config.sitecoreApiKey,  
      });
 }

Perform the request and return the result:

export const getStaticProps: GetStaticComponentProps = async (rendering, layoutData) => {
  if (process.env.JSS_MODE === constants.JSS_MODE.DISCONNECTED) {
    return null;  
  }
  const graphQLClient = new GraphQLRequestClient(config.graphQLEndpoint, {
    apiKey: config.sitecoreApiKey,
  });
  const result = await graphQLClient.request<GraphQLConnectedDemoData>(MyQuery, {
    datasource: rendering.dataSource,
    contextItem: layoutData?.sitecore?.route?.itemId,
    language: layoutData?.sitecore?.context?.language,
  });
  return result;
};

In your component function, you can access the resulting data using the useComponentProps hook:

const GraphQLConnectedDemo = (props: StyleguideComponentProps): JSX.Element => {
  const data = useComponentProps<GraphQLConnectedDemoData>(props.rendering.uid);
  // implement your component
}

For a more complex example of using GraphQL queries in components, see the demo component in the JSS Next.js sample app.