'Using drupal' example not working

[imshuffling]

Description

Trying to run the "Using drupal" example here - https://github.com/gatsbyjs/gatsby/tree/master/examples/using-drupal

Environment

Gatsby version: 1.1.44 Node.js version: v9.2.0 Operating System: Sierra

Actual result

[KyleAMathews]

It seems like our example drupal site is returning 404s http://live-contentacms.pantheonsite.io/

[ajayns]

@KyleAMathews What can we do to get it up and running again?

[KyleAMathews]

@ajayns it's possible http://www.contentacms.org/ changed their default url for the API. Could you research if they've changed something?

[ajayns]

@KyleAMathews I've checked it out, seems like they've changed their default endpoint from /jsonapi to /api

[KyleAMathews]

Cool! You want to fix the using-drupal example to use that instead? The source plugin lets you set the baseurl (it just defaults to /jsonapi)

[ajayns]

@KyleAMathews I've tried changing the code that defaults it to /jsonapi to make it default to /api but then that seems to lead to few new errors. If you could check it out and tell if something else is causing the issue, then I'll make a PR

[KyleAMathews]

Could you post the errors here?

[ajayns]

After changing the endpoint, it looks like it's fetching data from contentacms fine:

success delete html files from previous builds — 0.056 s
success open and validate gatsby-config.js — 0.005 s
success copy gatsby files — 0.321 s
success onPreBootstrap — 0.009 s
⠁ Starting to fetch data from Drupal
success source and transform nodes — 32.844 s

But crashes right after that with:

error UNHANDLED REJECTION

  RangeError: Maximum call stack size exceeded

  - String.replace

  - lodash.js:14174 deburr
    [using-drupal]/[lodash]/lodash.js:14174:31

  - lodash.js:4982 Function.camelCase
    [using-drupal]/[lodash]/lodash.js:4982:34

  - create-type-name.js:8 createTypeName
    [using-drupal]/[gatsby]/dist/schema/create-type-name.js:8:23

  - infer-graphql-input-fields.js:142 inferGraphQLInputFields
    [using-drupal]/[gatsby]/dist/schema/infer-graphql-input-fields.js:142:19

  - infer-graphql-input-fields.js:245 
    [using-drupal]/[gatsby]/dist/schema/infer-graphql-input-fields.js:245:17

  - lodash.js:4917 
    [using-drupal]/[lodash]/lodash.js:4917:15

  - lodash.js:3002 baseForOwn
    [using-drupal]/[lodash]/lodash.js:3002:24

  - lodash.js:4886 
    [using-drupal]/[lodash]/lodash.js:4886:18

  - lodash.js:9334 Function.forEach
    [using-drupal]/[lodash]/lodash.js:9334:14

  - infer-graphql-input-fields.js:209 inferInputObjectStructureFromNodes
    [using-drupal]/[gatsby]/dist/schema/infer-graphql-input-fields.js:209:5

  - infer-graphql-input-fields.js:149 inferGraphQLInputFields
    [using-drupal]/[gatsby]/dist/schema/infer-graphql-input-fields.js:149:22

  - infer-graphql-input-fields.js:245 
    [using-drupal]/[gatsby]/dist/schema/infer-graphql-input-fields.js:245:17

  - lodash.js:4917 
    [using-drupal]/[lodash]/lodash.js:4917:15

  - lodash.js:3002 baseForOwn
    [using-drupal]/[lodash]/lodash.js:3002:24

  - lodash.js:4886 
    [using-drupal]/[lodash]/lodash.js:4886:18

  - lodash.js:9334 Function.forEach
    [using-drupal]/[lodash]/lodash.js:9334:14

  - infer-graphql-input-fields.js:209 inferInputObjectStructureFromNodes
    [using-drupal]/[gatsby]/dist/schema/infer-graphql-input-fields.js:209:5

  - infer-graphql-input-fields.js:149 inferGraphQLInputFields
    [using-drupal]/[gatsby]/dist/schema/infer-graphql-input-fields.js:149:22

  - infer-graphql-input-fields.js:245 
    [using-drupal]/[gatsby]/dist/schema/infer-graphql-input-fields.js:245:17

  - lodash.js:4917 
    [using-drupal]/[lodash]/lodash.js:4917:15

  - lodash.js:3002 baseForOwn
    [using-drupal]/[lodash]/lodash.js:3002:24

@KyleAMathews all that I've done is changed the code for gatsby-source-drupal to default to /api instead of /jsonapi

[ajayns]

Also I've noticed something else. In gatsby-node.js in gatsby-source-drupal there's this line:

const data = await axios.get(`${baseUrl}/${apiBase}`) 

And in gatsby-config.js in using-drupal example, there's this line:

{
      resolve: `gatsby-source-drupal`,
      options: { baseUrl: `https://live-contentacms.pantheonsite.io/` },
},

Isn't this gonna result in fetching https://live-contentacms.pantheonsite.io//jsonapi

[imshuffling]

I'm getting RangeError: Maximum call stack size exceeded error also.

Is there a way to increase this?

[ajayns]

@imshuffling I'm thinking it's a project error rather than a system specific error. I think there should be some tweak we should be able to make to the project.

[KyleAMathews]

@mprihoda any chance this was related to your PR https://github.com/gatsbyjs/gatsby/pull/4210? I assume you tested your PR against the using-drupal site?

[mprihoda]

@KyleAMathews I've seen this problem as well, not related to my PR though. It seems there is an infinite recursion in the inference code for self-referencing Drupal media bundles, tm. the Media Image's JSON Api response references itself as thumbnail in "relations".

Did not find time to fix this one, sorry.

[mprihoda]

Does not seem to be the media bundles in this case. The inference code seems to cycle forever on these three nodes, though I don't see any obvious connection:

{ id: '02aa48a0-1c7b-4e00-b257-30d44296e027',
  parent: null,
  children: null,
  status: true,
  dependencies: { module: [ 'recipes_magazin' ], enforced: { module: [Array] } },
  _core: '37aX3MVNj-O3E6hykfwx5Q3gm2Od8WyFqFfB7STQOfk',
  name: 'Tutorial',
  type: 'tutorial',
  description: 'A brief wrapper on external documentation for a particular piece in Contenta CMS.',
  help: '',
  new_revision: false,
  preview_mode: 0,
  display_submitted: false,
  internal: 
   { type: 'contentTypes',
     contentDigest: '71e3203aafb7a4642ddc3fc15214be06',
     owner: 'gatsby-source-drupal' },
  third_party_settings: { available_menus: [ 'main' ], parent: '' } }
{ id: '12bb3fb4-5ef4-48c6-b71f-730a576b84f6',
  parent: null,
  children: null,
  internalId: 4,
  name: 'Snack',
  description: null,
  weight: 0,
  updatedAt: '2017-12-31T12:57:13+0100',
  path: { alias: null, pid: null, langcode: 'en' },
  internal: 
   { type: 'categories',
     contentDigest: '71e892da2d9b7c2cef188bd6afc86186',
     owner: 'gatsby-source-drupal' },
  relationships: { recipes___NODE: '430d7091-0f88-42e3-b115-51fe649dbf4c' } }
{ id: '9ef3b10e-9cf5-42a8-84bc-7850304a2855',
  parent: null,
  children: null,
  internalId: 34,
  isPublished: true,
  title: 'Pork fillet with cream and cider',
  createdAt: '2017-12-31T12:57:13+0100',
  updatedAt: '2017-12-31T12:57:13+0100',
  isPromoted: true,
  path: { alias: null, pid: null, langcode: 'en' },
  difficulty: 'easy',
  ingredients: 
   [ '675 g (1.5 lb) small new salad potatoes such as Pink Fir Apple' ],
  numberOfServices: null,
  preparationTime: 10,
  instructions: 'Fill a small pan with enough boiling water to properly cover the garlic,Drop the garlic into the pan and simmer  on a medium heat the garlic for 12 minutes to blanche it.,Remove with a slotted spoon reserve and allow to cool,In a pan with a lid, heat the oil, add the butter, white pepper and combine,Add the pork fillet and brown for 3 minutes each side.  Reduce the heat in the pan to as low as it will go.,Squeeze all of the softened garlic out of it\'s paper skin into the pan, add the sliced apple, a bay leaf, cover and very gently cook for 20 minutes. Don\'t let it burn.,Remove the pork fillet and keep warm,Turn up the heat , add the cider and bring to the boil, mashing the garlic and apple with a wooden spoon or the end of a rolling pin,Add the cream and half of the spring onions and season to taste with salt and pepper, return the pork fillet and heat the sauce for another few minutes and serve.',
  totalTime: 50,
  internal: 
   { type: 'recipes',
     contentDigest: '4a9fb9fbe9bd973904319ea65bb6cd99',
     owner: 'gatsby-source-drupal',
     fieldOwners: { slug: 'default-site-plugin' } },
  relationships: 
   { contentType___NODE: 'ff85086b-db11-4ba6-8eaf-5197d6ad026c',
     category___NODE: 'fa40ad89-e749-44ed-8a96-e0bac344dc76',
     image___NODE: '60539553-8e4e-4ecb-9762-710f03162b55' },
  fields: { slug: '/recipes/34/' } }

[ajayns]

@pieh @KyleAMathews The issue is fixed and the example is working fine now but I still couldn't fully understand the working. It uses a drupal json api for getting data and creating nodes yeah?

But when making a GET request to https://live-contentacms.pantheonsite.io/jsonapi seems to give response as HTML only even with headers set to Accept: application/json:

How does source-drupal then get the data and create nodes? I'd like to know where the data is fetched from.

[KyleAMathews]

The API returns HTML unless you request with the header Accept: application/json.

[pieh]

@ajayns I had to change endpoint from /jsonapi (default endpoint option in plugin) to api ( https://github.com/gatsbyjs/gatsby/pull/4391/files#diff-2368fbba3f5dea22b07966f0faa16f88R8 ).

[ajayns]

@pieh @KyleAMathews Thanks a bunch! I got it!