Activation de GraphQL dans les magasins

Ce tutoriel vous montrera comment configurer GraphQL dans votre magasin.

Procédure

Ajoutez un proxy pour GraphQL dans setupProxy.js.
1. Créez un hôte pour GraphQL dans setupproxy.js.
```
const GRAPHQL_HOST = http://localhost:3100
```
  Remarque : Si vous utilisez HTTPS, utilisez le port 3443.
```
= https://localhost:3443
```
2. Définissez le contexte GraphQL dans setupProxy.js.
```
const GraphQLContext = {
  target: GRAPHQL_HOST,
  ...options
             }
```
3. Définir le logiciel intermédiaire pour GraphQL dans setupProxy.js.
```
app.use ("/GraphQL”, createProxyMiddleware(graphQLContext))
```
Ajoutez une constante dans store-web\src\_foundation\common.ts.

Exportez la constante GRAPHQL = "graphQL".

Ajoutez des informations dans SiteInfoService.ts.

Définissez la variable de stockage locale dans SiteInfoService.ts.

const is GraphQL = storeviewURL.searchParams.get (GRAPHQL);
if (isGraphQL) {
      localStorageUtil.set (GRAPHQL, isGraphQL, 30);
   }

Créez un fichier de service GraphQL dans le magasin Emerald et ajoutez-le au dossier api/transaction.
Remarque :
- Reportez-vous au fichier GraphQL.Service_Sample pour obtenir un exemple de format du fichier GraplQl.Service.
- Ce fichier GraphQL_Service fourni n'est qu'à titre de référence et vous devez créer votre propre fichier de service GraphQL.
Importez le service GraphQL dans le composant souhaité.

Par exemple, si vous souhaitez utiliser GraphQL dans le composant de commande, vous devez y importer le service GraphQL.

Importez GraphQLService à partir de ../../../_foundation/apis/transaction/graphQL.service.
Ajoutez l'indicateur dans le composant souhaité où nous souhaitons utiliser la requête GraphQL.
1. Si vous souhaitez utiliser la requête GraphQL dans la page de commande pour extraire l'API de panier, vous devez ajouter une logique basée sur des conditions dans l'appel de ressource.
```
const responseCart = yield call (
        localStorageUtil.get (GRAPHQL)
          ? graphQLService.getCart
          : cartService.getCart,
        {...parameters}
);
```
2. Etant donné que la structure de réponse dans GraphQL est différente, vous devrez extraire les données et les affecter à la variable souhaitée.
  La réponse REST pour les données d'appel de ressource ci-dessus serait renvoyée en tant que responseCart = {data: {}}.
  Dans GraphQL, elle est renvoyée en tant que responseCart = {data: {data: {cartGetCart: {}}}}.
Exécutez une requête GraphQL à partir du magasin.
Par défaut, GraphQL est désactivé dans le magasin. Si vous souhaitez activer les requêtes GraphQL dans le magasin, vous devez fournir graphQL=true dans l'URL du navigateur.

Voici un exemple de magasin exemple appelé Emerald.

Si vous utilisez le magasin Emerald et que vous souhaitez activer GraphQL dans Emerald, vous pouvez ajouter graphQL=true.
```
http://localhost:3000/Emerald?graphQL=true
```