Basic code to execute GraphQL queries in XM Cloud NextJs

DevTips.tsx

import {
  GetStaticComponentProps,
  Image,
  ImageField,
  Text,
  TextField,
  useComponentProps,
} from '@sitecore-jss/sitecore-jss-nextjs';
import { ComponentProps } from 'lib/component-props';
import { GraphQLQueryResult } from 'lib/graphql-queries/GraphQLQuery';
import { getGraphQLQuery } from 'lib/graphql-utils';

interface ComponentFields {
  Title: TextField;
  Topic: TextField;
  Image: ImageField;
}

type TipsProps = ComponentProps & {
  fields: ComponentFields;
};

type GraphQlQueryProps = {
  items: GraphQLQueryResult;
};

export const Default = (props: TipsProps): JSX.Element => {
  const componentProps = useComponentProps<GraphQlQueryProps>(props.rendering.uid);
  return (
    <>
      <Text tag="h3" field={props.fields?.Title} />
      <br></br>
      <ul>
        {componentProps?.items?.items?.children?.results?.map((item, index) => (
          <li key={index}>{item.headline.jsonValue.value}</li>
        ))}
      </ul>
    </>
  );
};

export const getStaticProps: GetStaticComponentProps = async () => {
  return {
    items: await getGraphQLQuery('{7D3FDA0E-E896-433B-A8E7-7A2D8CAA0D4E}'),
  };
};

export const OnlyText = (props: TipsProps): JSX.Element => {
  return (
    <>
      <h2>Only text variant</h2>
      <h3>
        <Text field={props.fields.Title} />
      </h3>
      <h5>
        <Text field={props.fields.Topic} />
      </h5>
    </>
  );
};
export const OnlyImage = (props: TipsProps): JSX.Element => {
  return (
    <>
      <h2>Only image variant</h2>
      <div>
        <Image field={props.fields.Image} />
      </div>
    </>
  );
};

GraphQLQuery.ts

import gql from 'graphql-tag';

const GraphQLQuery = (dynamicGql: string) =>
  gql`
    ${dynamicGql}
  `;

type GraphQLQueryResult = {
  items: {
    name: string;
    children: {
      total: number;
      pageInfo: {
        hasNext: boolean;
        endCursor: string;
      };
      results: [
        {
          headline: {
            jsonValue: {
              value: string;
            };
          };
        }
      ];
    };
  };
};

export default GraphQLQuery;
export type { GraphQLQueryResult };

index.ts

import { sitecoreApiKey, graphQLEndpoint } from 'temp/config';

import { GraphQLClient } from 'graphql-request';
import GraphQLQuery, { GraphQLQueryResult } from 'lib/graphql-queries/GraphQLQuery';

function getGraphQLClient(): GraphQLClient {
  if (!sitecoreApiKey || !graphQLEndpoint) {
    console.error('No Sitecore API Key, Sitemap Root ID and/or public URL configured for the site');
    return {} as GraphQLClient;
  }

  const client = new GraphQLClient(graphQLEndpoint);
  client.setHeader('sc_apikey', sitecoreApiKey);
  return client;
}

const getGraphQLQuery = async (item: string): Promise<GraphQLQueryResult> => {
  let queryToExecute = `query{
    items: item( path: "${item}" language: "EN"){    
      name        
      children{
      total
      pageInfo{      
          hasNext
          endCursor        
      }
      results{
          headline: field(name: "headline") {
              jsonValue
              }        
      }
      }
    }
    }`;
  
  console.log('GraphQL Query', queryToExecute);
  const graphQLClient = getGraphQLClient();
  const result = await graphQLClient.request<GraphQLQueryResult>(GraphQLQuery(queryToExecute));
  return result;
};

export {
  getGraphQLClient,
  getGraphQLQuery,
};