Habilitación de GraphQL en tiendas

Este tutorial le mostrará cómo configurar GraphQL en su tienda.

Procedimiento

Añada un proxy para GraphQL en setupProxy.js.
1. Cree un host para GraphQL en setupproxy.js.
```
const GRAPHQL_HOST = http://localhost:3100
```
  Nota: Si está utilizando HTTPS, utilice el puerto 3443.
```
= https://localhost:3443
```
2. Defina el contexto GraphQL en setupProxy.js.
```
const GraphQLContext = {
  target: GRAPHQL_HOST,
  ...options
             }
```
3. Defina el middleware para GraphQL en setupProxy.js.
```
app.use ("/GraphQL”, createProxyMiddleware(graphQLContext))
```
Añada la constante en store-web\src\_foundation\common.ts.

Exporte la constante GRAPHQL = "graphQL".

Añada información en SiteInfoService.ts.

Establezca la variable de almacenamiento local en SiteInfoService.ts.

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

Cree un archivo de servicio de GraphQL en la tienda Emerald y añádalo a la carpeta api/transaction.
Nota:
- Consulte el archivo GraphQL.Service_Sample para obtener un formato de ejemplo del archivo GraplQl.Service.
- Este archivo de GraphQL_Service proporcionado solo es de referencia y debe crear su propio archivo de servicio GraphQL.
Importe el servicio GraphQL en el componente deseado.

Por ejemplo, si desea utilizar GraphQL en el componente order, es necesario importar el servicio GraphQL en el componente order.

Importe GraphQLService desde ../../../_foundation/apis/transaction/graphQL.service.
Añada el distintivo en el componente deseado donde deseamos utilizar la consulta GraphQL.
1. Si desea utilizar la consulta GraphQL en la página de pedido para la API del carro de la compra, debe añadir lógica basada en condiciones en la llamada de recurso.
```
const responseCart = yield call (
        localStorageUtil.get (GRAPHQL)
          ? graphQLService.getCart
          : cartService.getCart,
        {...parameters}
);
```
2. Puesto que la estructura de respuesta en GraphQL es diferente, necesitará extraer los datos y asignarlos a la variable deseada.
  La respuesta de REST para los datos de llamada de recurso anteriores se devolverá como responseCart = {data: {}}
  En GraphQL se devolverá como responseCart = {data: {data: {cartGetCart: {}}}}
Ejecutar consulta GraphQL desde la tienda.
De forma predeterminada, GraphQL está inhabilitado en la tienda. Si desea habilitar consultas GraphQL en la tienda, debe proporcionar graphQL=true en la URL del navegador.

A continuación se muestra el ejemplo de una tienda llamada Emerald.

Si está utilizando la tienda Emerald y desea habilitar GraphQL en Emerald, puede añadir graphQL=true
```
http://localhost:3000/Emerald?graphQL=true
```