Skip to main content

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:

  1. 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.

  2. In your component file, add the following import statement:

    import {  GetServerSideComponentProps,  GetStaticComponentProps,  useComponentProps,  GraphQLRequestClient} from '@sitecore-jss/sitecore-jss-nextjs';
  3. Import your GraphQL query. graphql-let provides the ability to import queries.

    import {
      ConnectedDemoQueryDocument,
      AppRoute,
      Item,
      GraphQlConnectedDemo as GrapQLConnectedDemoDatasource,} from './ConnectedDemoQuery.graphql';
  4. In your component, define getStaticProps or getServerSideProps functions. In this example we implement getStaticProps:

    export const getStaticProps: GetStaticComponentProps = async (rendering, layoutData) => {
    
    }
  5. 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;  
        }
    }
  6. 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,  
          });
     } 
  7. 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;
    };
  8. 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.