Gatsby: [gatsby-source-drupal] Multiple JSON API endpoints, for translated content i18n

[dcorb]

Description

When using gatsby-source-drupal, there is only one JSON API endpoint configuration.
How to provide multiple endpoints, for each language?

Based on some old answers from gatsby team I found in the Discourse chat, I would expect this config to work:

Steps to reproduce

{
      resolve: `gatsby-source-drupal`,
      options: {
        baseUrl: `https://drupalsite.com`,
        apiBase: `jsonapi`
      },
    },
{
      resolve: `gatsby-source-drupal`,
      options: {
        baseUrl: `https://drupalsite.com/fi`,
        apiBase: `jsonapi`
      },
    },

Expected result

I would expect all the content can be accessed via GraphQL (inside the createPages function),

Actual result

If I place a console.log inside onCreateNode, I can see Gatsby parses both JSON API endpoints, (original content + translated content). So the gatsby-config.js seems correct.

BUT ONLY the content of the 2nd site can be queried via GraphQL. Not the first.

Environment

System:
    OS: macOS 10.14
    CPU: x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
    Shell: 2.7.1 - /usr/local/bin/fish
  Binaries:
    Node: 10.9.0 - /usr/local/bin/node
    Yarn: 1.9.4 - /usr/local/bin/yarn
    npm: 6.4.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 70.0.3538.102
    Firefox: 63.0.1
    Safari: 12.0
  npmPackages:
    gatsby: ^2.0.37 => 2.0.37
    gatsby-image: ^2.0.19 => 2.0.19
    gatsby-plugin-favicon: ^3.1.4 => 3.1.4
    gatsby-plugin-manifest: ^2.0.7 => 2.0.7
    gatsby-plugin-offline: ^2.0.11 => 2.0.11
    gatsby-plugin-react-helmet: ^3.0.1 => 3.0.1
    gatsby-plugin-sharp: ^2.0.12 => 2.0.12
    gatsby-plugin-styled-components: ^3.0.1 => 3.0.1
    gatsby-plugin-typography: ^2.2.1 => 2.2.1
    gatsby-source-drupal: ^3.0.7 => 3.0.7
    gatsby-source-filesystem: ^2.0.7 => 2.0.7
    gatsby-transformer-sharp: ^2.1.7 => 2.1.7
  npmGlobalPackages:
    gatsby-cli: 2.4.4

[pieh]

It is possible to create multiple instances of drupal (or whatever else source plugin). It might be that data from second instance overwrites data from first one - if they have same ids.

We have 2 options to try to figure this out:

• we either ask you to some digging into /jsonapi api output of both - check end point for same node type for both and see if entries have same ids
• or you share with us your endpoint that we can try to debug it (either here or private - you can DM me on twitter - @mipiechowiak )

[dcorb]

Hi pieh, thanks for helping. It's a single instance of Drupal, so their internal ids are not the same.
There must be something overwriting the results from the first data collection.

You were correct!, they share the same id. Any work-around this issue?

[pieh]

You were correct!, they share the same id. Any work-around this issue?

We need updates for gatsby-source-drupal to be able handle this case. I initially thought we would want to use langcode as extra arg in generating node.id, but it seems like there are separate root and detail endpoints, so maybe it would be easier to just use baseUrl here to create more specified createNodeId function:
https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-source-drupal/src/gatsby-node.js#L15-L22
here create something like:

const namespacedCreateNodeId = id => createNodeId(`${baseUrl_${id}`)

and replace every usage of createNodeId with that namespaced version - it should fix overwriting data.

Separate issue is proper support for i18n in Drupal - so it's easier to be able to get list of translations

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

Thanks for being a part of the Gatsby community! 💪💜

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

Thanks for being a part of the Gatsby community! 💪💜

[gatsbot[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

Thanks again for being part of the Gatsby community!

[violabg]

Any update on this?
I need to create localized content from drupal source and can’t find a way to do it.

[back-2-95]

@dcorb Hi, you mention you hacked something to get this working? Can you share an example on how?

And do I understand correctly: if all are translated, all goes good?

• edit: I tried to make all translated, but no luck. Only the last language gets to GraphQL and Gatsby

[kundukundu]

Hello, any update on this?
Thanks¡¡

[vermario]

I have noticed this plugin: gatsby-source-drupal-multilanguage https://www.gatsbyjs.org/packages/gatsby-source-drupal-multilanguage/?=gatsby-source-drupal-multilanguage but it looks like maybe it's just a placeholder?

[anandtoshniwal]

Hi @pieh ,
I was able to fetch multilingual data. Have mentioned the steps I followed below. Let me know if it is the right approach.

1. Passing languages parameter (array) through gatsby-config.js
2. Iterated over current logic of node creation, and added a Languagecode prefix to drupal_id while generating a nodeID.
   This will take care of generating different ids for the translated nodes.
3. Applied this change in multiple places to maintain relationships.
4. How translation works in Drupal - When we create a translation for a particular node in Drupal, it fetches the content of that node from the default language node.
   However, when these steps were applied to GraphQL data, it did not work as expected. Only the translated data appeared in GraphQL.
   E.g - Drupal provides an option to choose which entities to be translated. In case we enable the translation for the content entity and not for the user.
   When a node is generated in the default language (English), the author is assigned to it. When this node is translated to Spanish, Drupal automatically associates the author.
   When data is fetched in GraphQL the related author was displayed for the English language, but not for the Spanish language.
   To achieve Drupal like behaviour while creating translated nodes. I fetched the default language node’s relationships and merged them into the current object node. This ensured that the updates made to the Spanish node and the data of the fetched default language node (relationships), both will be reflected.
   This eliminates the drawbacks encountered with GraphQL translations.
   I just wanted to know if this approach is feasible and appropriate. please take a look and let me know your thoughts around it.
   If it is, I will clean up the code and upload the patch.
   Thank you for your time.
   Looking forward to your response.

[askibinski]

@anandtoshniwal I was thinking about doing something similar, so if you can share anything that would be great.

edit: FYI, after some research I found many are using GraphQL instead of JSONAPI for multilingual content, since you can actually filter in Gatsby on langcodes in graphql (using just one endpoint). Here is a basic example.

[rcaracaus]

@anandtoshniwal would love to see the patch if you have time.