How to use Edge Context ID in front-end?

[ahiyalala]

Description

Currently, we are using a GraphQL Client:

const graphQLClient = new GraphQLRequestClient(endPoint, config);

export default graphQLClient;

where the endpoint is the Edge API, and the config contains an apiKey which uses SITECORE_API_KEY. As described in the documentation, solutions using JSS 21.6+ needs to use Context ID. However, When I tried adding SITECORE_EDGE_CONTEXT_ID as the environment variable to use in apiKey it threw a 401 saying edge.cdn.11: Unauthorized. Failed to find tenant

What's the correct approach to use SITECORE_EDGE_CONTEXT_ID while attempting to use GraphQL queries in the front-end?

Additional information

No response

[illiakovalenko]

@ahiyalala Hello! The sitecoreEdgeContextId should be passed as a query string parameter in the request to the Edge endpoint. The apiKey property should only be used when working with a local Sitecore instance or Sitecore XP.

Out of the box, the sitecore-jss package provides getEdgeProxyContentUrl, which you can use to construct an endpoint URL.

We'll consider adding this topic in our documentation

Here’s an example of how to use it with Next.js:

import { GraphQLRequestClient, getEdgeProxyContentUrl } from '@sitecore-jss/sitecore-jss-nextjs/graphql'; 

const client = new GraphQLRequestClient(getEdgeProxyContentUrl('<your-context-id>'));

client.request('<your-query>');