Erreurs communes lors de l’utilisation de GraphQL avec Optimizely / Blogs / Perficient

Qu’est-ce que GraphQL?

GraphQL est un langage de requête puissant pour les API qui permet aux clients de demander uniquement les données dont ils ont besoin. Optimizely exploite GraphQL pour servir du contenu à votre couche de présentation agnostique de plate-forme. Cette approche de l’architecture sans tête avec une CMS optimiste gagne du terrain dans l’espace et les développeurs rencontrent souvent de nouveaux défis lors de la transition de l’approche MVC la plus courante.

Dans cet article de blog, nous explorerons certaines erreurs courantes que vous rencontrerez et comment les dépanner efficacement.

1 et 1 Décalage des schémas

Description

Certains des problèmes les plus fréquents découlent de décalages entre le schéma GraphQL et les modèles de contenu dans Optimizely. Cela peut se produire à partir de champs de mauvaise compréhension de vos requêtes, et non de synchroniser le contenu dans le CMS ou d’utiliser la mauvaise clé d’authentification.

Exemple d’erreur

{
"errors": [
    {
      "message": "Field \"Author\" is not defined by type \"BlogPage\".",
      "locations": [
        {
          "line": 2,
          "column": 28
        }
      ]
    }
  ]
}

Solution

• Vérifiez votre requête pour tout décalage entre les noms de champ et de type
  • La sensibilité de cas est appliquée sur les types / propriétés
• Valider que la clé API de votre requête GraphQL correspond à la clé API dans l’environnement CMS que vous avez mis à jour
• Assurez-vous que votre schéma GraphQL est à jour avec les derniers changements de modèle de données Optimizely.
  • Si vous exécutez le CMS avec les mêmes touches API graphiques, vérifiez l’onglet GraphQL Explorer et validez que votre type affiche dans la liste
• Exécutez le ‘
  • Après avoir vu l’état du travail passer de «Démarrer l’exécution de ContentTypeIndexingJob» à «Démarrer l’exécution de ContentIndexingJob», vous pouvez arrêter le travail et réécrire votre requête.
• Réinitialisez le compte
  • Si tout le reste échoue, vous voudrez peut-être essayer de réinitialiser votre compte GraphQL pour effacer les indices. (/ Épisserver / contentgraph / graphQladmin)
  • Si vous partagez la clé avec d’autres développeurs, le schéma peut devenir incompatible lorsque vous apportez des modifications locales et synchronisant vos modifications du même index.

2. Profondeur maximale

Description

Lorsque vous interrogez le contenu imbriqué, vous pouvez voir un objet de contenu vide dans la réponse plutôt que votre contenu dactylographié.

Exemple d’erreur

Dans ce scénario, nous essayons d’interroger un blocage d’accordéon qui a plusieurs niveaux de domaines de contenu imbriquées.

Requête

query MyQuery {
  Accordion {
    items {
      PanelArea{
        ContentLink {
          Expanded {
            ... on AccordionPanel{
              PanelContent{
                ContentLink {
                  Expanded {
                    ... on CardGrid{
                      CardArea {
                        ContentLink {
                          Expanded {
                            ... on Card{
                              CtaArea{                                
                                ContentLink{
                                  Expanded{
                                    __typename
                                    ...on Button {
                                      __typename
                                    }

Réponse

{
  "données": {
    "Accordéon": {
      "articles": [
        {
          "PanelArea": [
            {
              "ContentLink": {
                "Expanded": {
                  "PanelContent": [
                    {
                      "ContentLink": {
                        "Expanded": {
                          "CardGrid": [
                            {
                              "ContentLink": {
                                "Expanded": {
                                  "CtaArea": [
                                    {
                                      "ContentLink": {
                                        "Expanded": {
                                          "__typename": "Content"
                                        }
       ...
}

Solution

• Configure GraphQL to use higher maximum depth in appsettings
  • The default level of nesting content is 3, but that can be modified in Startup.CS
    services.AddContentGraph(options => { options.ExpandLevel.Default = 5 options.ExpandLevel.ContentArea = 5; });
  • Note that increasing this will increase the document size and make the synchronization job much slower depending on the amount of content and level of nesting in your site.
• Break-up requests into multiple queries.
  • Instead of expanding the inline fragment (… on Block) instead get the GuidValue of the ContentModelReference and use subsequent queries to get deeply nested content.
  • Consider making this extra request asynchronously on the client-side to minimize performance impact.

3. Authentication Errors

Description

There are a few different scenarios where you can get a 401 Authentication Error response on your GraphQL query.

{
  "code": "AUTHENTICATION_ERROR",
  "status": 401,
  "details": {
    "correlationId": "1234657890"
  }
}

Solution

• Check your authentication tokens and ensure they are valid.
• If you are querying draft content you need to configure and enable preview tokens Documentation

4. Unsynchronized Content

Description

When making updates to content in the CMS, you will occasionally run into issues where you don’t see the updated content on the page or in the graph response.

Solution

• Confirm that Content has been synchronized
  • In the CMS you can determine whether or not Content has been synchronized by the checkmark icon in the Publish Options ‘Synchronize with Optimizely Graph’ button
    
  • If the ‘Synchronize with Optimizely Graph’ button is not triggering the content to be synced check to see if either of the Optimizley Graph Synchronization Jobs are in progress.  When they are running, manually syncing content will be delayed until job completion.
• Validate that your CMS Graph API Key matches the API Key in your front-end/graph query