Gatsby en Drupal GraphQL 3 vs 4

Out of the box

Een van de grootste verschillen tussen versie 3 en 4 is dat de GraphQL module niet meer standaard een schema levert. De module is dusdanig gebouwd dat je zelf in custom modules schemas, DataProducers, etc. moet definiëren. Dat is heel fijn als je zelf entities hebt gedefinieerd die mogelijk niet via de standaard schemas naar boven zouden komen. 

Wanneer je weinig tot geen maatwerk hebt is het onzin om voor alles nieuwe schemas te bedenken en te bouwen. Een nuttige vingeroefening, maar verder niet. Daarvoor kun je de graphql_core_schema module gebruiken, die heel veel verschillende schemas levert om te gebruiken. Denk hierbij aan breadcrumb, entity_query, menu, routing, users, views, etc.

Stappenplan

Na het upgraden van graphql en het installeren van graphql_core_schema moet je een instance aanmaken via Instellingen -> Webservices -> GraphQL. Hier kun je meerdere servers inrichten, elk met hun eigen schema definities en eigenschappen. Maak een nieuwe server en geef het een naam.

Daarna kies je als schema "Core Composable Schema" en kies je welke schema extensions je wilt gebruiken. Voor een gemiddelde website zijn de volgende extensions een must:

  • Entity Query
  • Menu
  • Views (niet per se nodig)
  • Language switch links (indien meertalig)

De overige instellingen zijn standaard goed. Voer het endpoint in en sla op. 

Daarna moet je de server opnieuw bewerken om een aantal instellingen van de schema extensions goed te zetten. "Enable value fields" zorgt er voor dat je gelijk de waarde terug krijgt i.p.v. een FieldItemList type.

Daarnaast moet je nog aangeven welke base fields je wilt kunnen opvragen, welke entity types toegestaan zijn en welke velden van die entity types teruggegeven moeten kunnen worden. Dit zijn instellingen die je af en toe nog opnieuw zult bezoeken om je queries te finetunen.

Query tijd

Nu is het tijd voor de queries en ook daar zit een aardig verschil tussen de verschillende versies. Dit heeft met name te maken door het verschil in schema definities. Ik noem hieronder een aantal:

nodeQuery vs. entityQuery

In versie 3 werd nodeQuery gebruikt, in het nieuwe schema is dat entityQuery. De werking is identiek en ook de filters, sortering, etc. zijn gelijk. Het enige verschil is dat bij entityQuery ook het entityType moet worden opgegeven (NODE, MENU_LINK_CONTENT, TAXONOMY_TERM, etc). In de GraphQL Explorer wijst dat zichzelf goed uit. 

Bij nodeQuery werd een entities lijst opgevraagd; bij entityQuery is dat "items". 

Verder zit er een verschil in veldnamen, maar dat is verwaarloosbaar. Wat wel een mooie wijziging is, is het body veld. Voorheen kon je de body opvragen via body { processed summary }. In versie 4 is dat gewijzigd in body(summary:true).

Lijst van gepubliceerde artikelen in GraphQL 3

{
  drupal {
    nodes: nodeQuery(
      filter: {
        conditions: [
          { operator: EQUAL, field: "status", value: "1" }
          { operator: EQUAL, field: "type", value: "article" }
        ]
      },
      limit: 100
    ) 
    {
      entities {
        body {
          summary
          processed
        }
        path {
          alias
        }
      }
    }
  }
}

Lijst van gepubliceerde artikelen in GraphQL 4

{
  drupal {
    nodes:entityQuery(
      entityType: NODE
      filter: {
        conditions: [
          {operator: EQUAL, field: "status", value: "1"}
          {operator: EQUAL, field: "type", value: "article"}
        ]
      },
      limit: 100
    ) 
    {
      items {
        body
        summary: body(summary:true)
        path {
          alias
        }
      }
    }
  }
}

 

Metatags

Metatags zitten niet meer in de node maar moeten apart gejoined worden op de url. 

GraphQL 3

query blog($id: String!, $language: Drupal_LanguageId!) {
  drupal {
    blogDetail: nodeById(id: $id, language: $language) {
      ... on Drupal_NodeArticle {
        nid
        title
        body {
          processed
          summary
        }
        metatagNormalized {
          tag
          attributes
        }
      }
    }
  }
}

GraphQL 4

query blog($id: ID!, $language: Drupal_Langcode!) {
  drupal {
    blogDetail: entityById(id: $id, langcode: $language, entityType: NODE) {
      ... on Drupal_NodeArticle {
        nid
        title
        body 
        summary: body(summary:true)
        url {
          ... on Drupal_EntityUrl {
            metatags {
              tag
              attributes {
                key
                value
              }
            }
          }
        }
      }
    }
  }
}

Meertaligheid

Meertaligheid is op twee manieren te realiseren. Enerzijds kun je in de query de vertaling per taal opvragen, anderzijds kun je alle vertalingen opvragen die dan als array worden terug gegeven.

Vertaling per taal (GraphQL 3)

  entities {
    nl: entityTranslation(language: NL) {
      ... on Drupal_NodePortfolio {
        ... PortfolioFields
      }
    }
    en: entityTranslation(language: EN) {
      ... on Drupal_NodePortfolio {
        ... PortfolioFields
      }
    }
  }

Vertaling per taal (GraphQL 4)

  items {
    ... on Drupal_EntityTranslatable {
      nl: translation(langcode: NL) {
        ... on Drupal_NodePortfolio {
          ... PortfolioFields
        }
      }
      en: translation(langcode: EN) {
        ... on Drupal_NodePortfolio {
          ... PortfolioFields
        }
      }
    }
  }

Alle vertalingen (GrapQL 3)

  entities {
    entityTranslations {
      entityId
      entityBundle
      entityLanguage {
        id
      }
      ... on Drupal_Node {
        path {
          alias
        }
      }
    }
  }

Alle vertalingen (GrapQL 4)

  items {
    ... on Drupal_EntityTranslatable {
      translations {
        ... on Drupal_Node {
          id
          bundle: __typename
          title
          langcode
          path {
            alias
          }
        }
      }
    }
  }

 

back_blog