Use GraphQL to fetch component-level data in JSS Next.js apps
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 fileGraphQL-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
orgetServerSideProps
functions. In this example we implementgetStaticProps
: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 theGraphQLRequestClient
: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.