gatsby: Unable to retrieve Entity References with the drupal-source plugin

Description

I set up a Drupal 8 installation from the umami profile (demo content automatically added) and enabled the jsonapi and jsonapi_extra modules. I connected a gatsby installation through the drupal source plugin and am able to list all my nodes, create detail pages and so on… but I am unable to retrieve entity reference fields, like author, tags, category…

Steps to reproduce

• Install Drupal 8 with the Umami profile and content (Drupal 8.5 or 8.6): $ drupal site:install demo_umami --db-type="mysql" --db-host="127.0.0.1" --db-name="drupal8-gatsby"
• Create a new gatsby site with the drupal-source-plugin enabled and configured.

module.exports = {
  siteMetadata: {
    title: 'Gatsby Default Starter',
  },
  plugins: [
    'gatsby-plugin-react-helmet',
    'gatsby-plugin-styled-components',
    {
      resolve: 'gatsby-source-drupal',
      options: {
        baseUrl: 'http://dev.gatsby.d8/',
        apiBase: 'jsonapi',
      },
    }
  ],
}

• Navigate to the graphql browser and try to query for recipes along with their tags and category (entity reference fields - see screenshots below).

{
  allNodeRecipe {
    edges {
      node {
        id
        title
        field_preparation_time
        field_cooking_time
        field_difficulty
        field_ingredients
        field_summary {
          value
          format
          processed
        }
        field_recipe_instruction {
          value
          format
          processed
        }
        relationships {
          field_image {
            url
          }
        }
        path {
          alias
          pid
          langcode
        }
      }
    }
  }
}

Expected result

Either within the relationships or as a dedicated field, I would expect the field_recipe_category or the field_tags to appear.

Actual result

They don’t autocomplete, and when entered manually given an error “cannot query field on…”

Environment

  System:
    OS: macOS High Sierra 10.13.6
    CPU: x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 9.11.1 - /usr/local/bin/node
    npm: 5.6.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 67.0.3396.99
    Firefox: 60.0.2
    Safari: 11.1.2
  npmPackages:
    gatsby: ^1.9.277 => 1.9.277
    gatsby-link: ^1.6.46 => 1.6.46
    gatsby-plugin-react-helmet: ^2.0.11 => 2.0.11
    gatsby-plugin-styled-components: ^2.0.11 => 2.0.11
    gatsby-source-drupal: ^2.0.41 => 2.0.41
  npmGlobalPackages:
    gatsby-cli: 1.1.58

File contents (if changed)

gatsby-config.js:

module.exports = {
  siteMetadata: {
    apiUrl: 'http://dev.gatsby.d8',
    title: 'Gatsby Default Starter',
  },
  plugins: [
    'gatsby-plugin-react-helmet',
    'gatsby-plugin-styled-components',
    {
      resolve: 'gatsby-source-drupal',
      options: {
        baseUrl: 'http://dev.gatsby.d8/',
        apiBase: 'jsonapi',
      },
    }
  ],
}

package.json:

  "name": "gatsby-starter-default",
  "description": "Gatsby default starter",
  "version": "1.0.0",
  "author": "Kyle Mathews <mathews.kyle@gmail.com>",
  "dependencies": {
    "gatsby": "^1.9.277",
    "gatsby-link": "^1.6.46",
    "gatsby-plugin-react-helmet": "^2.0.11",
    "gatsby-plugin-styled-components": "^2.0.11",
    "gatsby-source-drupal": "^2.0.41",
    "react-helmet": "^5.2.0",
    "styled-components": "^3.3.3"
  },
  "keywords": [
    "gatsby"
  ],
  "license": "MIT",
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --write 'src/**/*.js'",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "devDependencies": {
    "prettier": "^1.13.7"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/gatsbyjs/gatsby-starter-default"
  }
}

gatsby-node.js:

/**
 * Implement Gatsby's Node APIs in this file.
 *
 * See: https://www.gatsbyjs.org/docs/node-apis/
 */

 // You can delete this file if you're not using it

const path = require(`path`)

exports.createPages = ({ graphql, boundActionCreators }) => {
  const { createPage } = boundActionCreators;

  const loadRecipes = new Promise((resolve, reject) => {
    graphql(`
      {
        allNodeRecipe {
          edges {
            node {
              path {
                alias
              }
            }
          }
        }
      }
    `
    ).then(result => {
        result.data.allNodeRecipe.edges.map(({ node }) => {
        createPage({
          path: `${node.path.alias}/`,
          component: path.resolve(`./src/templates/recipe.js`),
          context: {
            slug: node.path.alias,
          },
        })
      })
      resolve()
    })
  })

  return Promise.all([loadRecipes])
};

gatsby-browser.js: N/A gatsby-ssr.js: N/A