GraphQL pour HCL Commerce

Introduction à GraphQL

Les réponses REST contiennent souvent trop ou pas assez de données, ce qui exige une deuxième requête. GraphQL résout ce problème en récupérant uniquement les données dont vous avez besoin à l'aide d'une seule requête. GraphQL rend les API rapides, polyvalentes et conviviales pour les développeurs.

GraphQL est comparable à REST à de nombreux égards et utilise fréquemment les mêmes transports HTTP(s) que REST. Au lieu d'utiliser une variété d'URI de route et de verbes HTTP, il utilise un nœud final unique avec un schéma spécifié qui décrit comment extraire et modifier des données. Par conséquent, les coûts de réseau sont réduits et le temps d'attente est réduit, car vous n'avez plus besoin d'effectuer plusieurs demandes de serveur.

L'exemple suivant illustre les différences fondamentales entre l'API REST et GraphQL lorsqu'il s'agit d'extraire des données d'une API :

GET : https://@localhost/wcs/resources/store/1/cart/@self

Dans l'exemple ci-dessus, une API REST utiliserait une requête GET pour extraire un enregistrement. Elle collecte et renvoie une réponse complète. Avec une API REST, vous collectez généralement toutes les données en accédant à plusieurs ressources.

query {
  cartGetCart(storeId:”1”) {
    grandTotal
    grandTotalCurrency
    orderItem {
      partNumber
      quantity
      promotion {
        schedule {
          endDate
        }
      }
    }
  }
  eSpotFindByName(storeId:”1”,name:”TopBrowsed_CatEntries”){
    marketingSpotData {
      behavior
    }
  }  
}

Avantages de GraphQL

GraphQL est une syntaxe pour décrire les interactions et les exigences de données. Elle vous permet de demander exactement ce dont vous avez besoin et de recevoir des résultats prévisibles. En rationalisant la façon dont vous traitez vos données, vous pouvez développer rapidement des applications Web et mobiles avancées avec GraphQL. Dans une requête GraphQL, vous spécifiez comment les données doivent être structurées telles qu'elles sont renvoyées par le serveur. Cela vous permet d'interroger uniquement les données que vous souhaitez au format dont vous avez besoin. Dans une requête réseau unique, vous pouvez interroger et obtenir de nombreux blocs d'informations provenant de diverses sources, ce qui vous permet de réduire les temps de réponse. GraphQL dispose de toutes ces fonctionnalités, combinées à d'excellents outils de développement, ce qui la rend essentielle pour améliorer l'expérience HCL Commerce .

Pour créer des API, GraphQL est utilisée avec REST et non comme remplacement. La requête GraphQL elle-même n'est pas plus rapide que les requêtes REST, mais comme vous pouvez choisir les zones à interroger, la requête GraphQL est toujours meilleure. Contrairement à REST, qui renvoie fréquemment plus de données, même si elles ne sont pas critiques ou utiles. GraphQL permet également aux développeurs d'obtenir plusieurs éléments dans une requête unique, ce qui augmente l'efficacité de chaque requête.

La principale différence entre GraphQL et les API REST traditionnelles est que REST renvoie souvent un bloc de données complet dans une réponse JSON, qui doit être traitée et distribuée. Au lieu de cela, GraphQL est créée sur un schéma, des requêtes et des résolveurs, dans le but d'améliorer le concept REST en vous permettant de demander un type spécifique de données plutôt que le bloc complet. Vous n'avez pas besoin de parcourir un grand nombre d'informations, car vous obtenez uniquement les informations que vous avez demandées.

Toutefois, gardez à l'esprit que GraphQL et REST sont deux choses distinctes : GraphQL est une langue et une technologie, tandis que REST est un style d'architecture. Cela implique qu'à mesure que d'autres équipes utilisent GraphQL, REST continuera d'exister.

• Compétitivité des ventes

  Les applications sont désormais régulièrement développées pour plusieurs facteurs de forme, tels qu'iOS et Android. Il est donc important de simplifier le développement d'applications sur toutes ces plateformes. C'est là que GraphQL est utile. Avec GraphQL, vous pouvez personnaliser la forme de la réponse pour chaque requête. En outre, la gestion des nœuds finaux d'API est simplifiée, car elle expose un seul nœud final HTTP (/graphql) pour extraire les données requises.

• Avantages réels disponibles pour la communication client-serveur

  GraphQL est un langage de communication entre les clients et les serveurs distants. Les résolveurs sont des fonctions arbitraires utilisées pour accéder aux données et les manipuler. Les données de ces fonctions de résolveur sont intégrées et consolidées par GraphQL, qui fournit ensuite la sortie au client. Dans la plupart des cas, ces fonctions de résolveur doivent être externalisées vers une pile métier chargée de se connecter aux différentes sources de données sous-jacentes. Les API distantes, les bases de données, le cache local et presque toutes les autres informations accessibles par votre langage de programmation peuvent être utilisées comme sources de données.

  • Adaptation des réponses pour n'inclure que les données souhaitées

    Les requêtes GraphQL offrent toujours des réponses attendues ou précises, sans qu'aucune information non pertinente ne soit incluse. En d'autres termes, GraphQL élimine le problème de l'extraction insuffisante et de l'extraction excessive qui se posait autrefois lors de l'utilisation d'API REST pour récupérer des données.

  • Emission de plusieurs opérations avec un seul échange client-serveur

    GraphQL est beaucoup plus rapide que les autres API de communication, car il vous permet de restreindre votre demande de requête en sélectionnant uniquement les zones que vous souhaitez interroger. Il vous permet d'extraire toutes les données dont vous avez besoin à partir d'une seule requête, plutôt que de diffuser différentes parties des données sur de nombreux nœuds finaux. Au lieu de contacter deux nœuds finaux distincts, vous pouvez recevoir des informations utilisateur et des informations de commande dans une requête unique.

  • Chaînage d'opérations entre services en une seule requête

    Les liens peuvent être utilisés pour décrire la manière dont une valeur renvoyée par une opération peut être entrée dans une autre opération. En établissant des liens, les processus sont connectés et parcourus comme s'ils étaient liés. Avec les API GraphQL, votre application peut accéder à toutes les données dont elle a besoin dans un seul appel API. Cela élimine le besoin de nombreux appels API pour une seule opération.

  • Définition de services de niveau supérieur générés en orchestrant des services de niveau inférieur ("Backend-for-Frontend")

    La couche Backend For Frontend (BFF) est composée de plusieurs backends qui ont été créés pour répondre aux demandes de différentes infrastructure frontend, telles que le bureau, le navigateur et les applications mobiles natives. Plusieurs sources de données peuvent être combinées dans une interface GraphQL unique avec GraphQL.

  • Introspection et découverte intégrées

    La capacité d'introspection de GraphQL vous permet de naviguer dans les types et d'apprendre le schéma, en vous assurant que vos applications ne demandent que ce qui est possible et de la bonne manière. Vous pouvez voir ce que le schéma peut interroger et comment les données sont organisées. Vous pouvez ensuite utiliser un IDE GraphQL pour ajouter sans effort des zones supplémentaires à des requêtes existantes. GraphQL valide le format de données pour vous, vous n'avez donc pas à le faire. Il suffit de développer des résolveurs, qui sont les méthodes de réception des données.

    Etant donné que l'ensemble de résultats ou les données livrées dans GraphQL sont très spécifiques à la requête du client, il est très simple de les généraliser pour le serveur. Les clients existants ne sont pas affectés lorsque nous ajoutons de nouvelles fonctionnalités de produit ou plus de zones au serveur. Etant donné que les zones serveur peuvent être obsolètes, mais fonctionnent toujours, vous pouvez utiliser sans crainte l'ancien serveur.

Exemple

Créer un panier :

mutation {
  cartCreateOrder(storeId: "1", description: "Test Order description") {
    outOrderId
  }
}

response:
{
  "data": {
    "cartCreateOrder": {
      "outOrderId": "1050717601"
    }
  }
}

mutation {
  cartAddOrderItem(storeId: "1", requestBody: {orderId: "1050717601", orderItem: {productId: "12687", quantity: "2"}}) {
    orderItem {
      orderItemId
    }
  }
}

response:
{
  "data": {
    "cartAddOrderItem": {
      "orderItem": [
        {
          "orderItemId": "15001"
        }
      ]
    }
  }
}

mutation {
  cartUpdateOrderItem(storeId: "1", requestBody: {orderId: "1050717601", orderItem: {quantity: "3", orderItemId: "15001", productId: "12687"}}) {
    orderId
  }
}

response:
{
  "data": {
    "cartUpdateOrderItem": {
      "orderId": "1050717601"
    }
  }
}

query {
  cartGetCart(storeId:"1"){
    orderId
    orderItem{
      quantity
    }
  }
}

response:
{
  "data": {
    "cartGetCart": {
      "orderId": "1050717601",
      "orderItem": [
        {
          "quantity": "3.0"
        }
      ]
    }
  }
}

mutation {
  cartCalculateOrder2(storeId: "1", orderId: "1050717601") {
    orderId
    viewTaskName
  }
}

response:
{
  "data": {
    "cartCalculateOrder2": {
      "orderId": [
        "1050717601"
      ],
      "viewTaskName": "RedirectView"
    }
  }
}

mutation {
  cartPreCheckout(storeId: "1", requestBody: {orderId: "1050717601"}) {
    orderId
  }
}

response:
{
  "data": {
    "cartPreCheckout": {
      "orderId": "1050717601"
    }
  }
}

mutation {
  paymentInstructionAddPaymentInstruction(storeId: "1", requestBody: {orderId: "1050717601", resourceId: "https://localhost:443/wcs/resources/store/1/cart/@self/payment_instruction", paymentInstruction: {email1: "a1@a1.com", email2: "a2@a2.com", fax1: "", fax2: "", phone1: "123", phone2: "234", mobilePhone1: "1", mobilePhone1Country: "23", nickName: "Hello", billingAddressId: "3074457359254738956", piAmount: "9.42", state: "MH", payMethodId: "COD", piDescription: "COD"}, xIsPurchaseOrderNumberRequired: "false", xIsPersonalAddressesAllowedForShipping: "true", resourceName: "cart"}) {
    orderId
  }
}

response:
{
  "data": {
    "paymentInstructionAddPaymentInstruction": {
      "orderId": "1050717601"
    }
  }
}

mutation {
  cartCheckOut(storeId: "1", requestBody: {orderId: "1050717601"}) {
    orderId
  }
}

response:
{
  "data": {
    "cartCheckOut": {
      "orderId": "1050717601"
    }
  }
}

mutation {
  cartCancelOrder(storeId: "1", orderId: "1050717601") {
    viewTaskName
  }
}