"gatsby-source-graphql" doesn't link to Drupal 8

Question

  siteMetadata: {
    title: `Gatsby Default Starter`,
    description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
    author: `@gatsbyjs`,
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
      },
    },
    {
      resolve: "gatsby-source-graphql",
      options: {
        // Arbitrary name for the remote schema Query type
        typeName: "DRUPAL",
        // Field under which the remote schema will be accessible. You'll use this in your Gatsby query
        fieldName: "drupal",
        // Url to query from
        url: "https://intl-pgs-rsm-growth-platform.pantheonsite.io/graphql",
      },
    },
  ],
}

Here's my gatsby-config.js file When I run gatsby clean && gatsby develop or just gatsby build i get

success createSchemaCustomization - 0.005s

 ERROR #11321  PLUGIN

"gatsby-source-graphql" threw an error while running the sourceNodes lifecycle:

Unexpected token < in JSON at position 0



  ServerParseError: Unexpected token < in JSON at position 0

  - JSON.parse

  - index.js:35 
    [test-gatsby]/[apollo-link-http-common]/lib/index.js:35:25

  - next_tick.js:68 process._tickCallback
    internal/process/next_tick.js:68:7


not finished source and transform nodes - 0.506s

My Drupal 8 site is new with the graphql module installed. And the gatsby site is brand new too.

I started getting this issue on Monday after working fine for a while. There were no code changes to my gatsby but all of a sudden I'm no longer able to get drupal data.

There seems to be few examples of using the "gatsby-source-graphql" plugin so if anyone can help please do

Answer 1

In my case, it was a permissions issue in Drupal. I solved it by going to admin → people → permissions and setting all permissions related to GraphQL for the anonymous user.

Answer 2

The Drupal Graph QL Module requires authentication using tokens. You can use Simple Oauth or JWT. I used Simple Oauth and resolved my issue using the following steps:

1. Install the Simple Oauth module using composer so it installs it's dependancies $ composer require drupal/simple_oauth, then enable the module.

2. Create a user role for your third party app and assign content viewing permissions for that role

3. In admin/config/people/simple_oauth add a token expiration time, generate keys using the button provided (make sure they are generated outside of the drupal web root) and add the path to the public and private key files.

4. In admin/config/services/consumer add a new consumer (or use the default consumer)

5. Add a secret password in the Secret field and select the new role you created under Scopes, then save the config page.

6. Make a post request to your site https://intl-pgs-rsm-growth-platform.pantheonsite.io/oauth/token using curl or postman to generate a token using the following body fields:

grant_type: password
client_id: The client id generated `admin/config/services/consumer`
client_secret: The secret you entered in step 4
username: A user in your drupal site that has the role you created
password: The password assigned to that account

7. The post request should return the access token if successful. Add your token to your app's .env.development file and update your gatsby-config.js file with the Authorization header: (More info about setting up environment variables in your gatsby app can be found here)

{
    resolve: "gatsby-source-graphql",
    options: {
        typeName: "DRUPAL",
        fieldName: "drupal",
        url: "https://intl-pgs-rsm-growth-platform.pantheonsite.io/graphql",
        headers: {
            "Authorization": `Bearer ${process.env.GATSBY_API_TOKEN}`
        },
    },
},

Video Tutorials of the Simple Oauth set up steps can be found here

More information on this set up process can be found here