"gatsby-source-graphql" threw an error while running the sourceNodes lifecycle: Response not successful: Received status code 400

[udemezue01]

Preliminary Checks

• This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
• This issue is not a question, feature request, RFC, or anything other than a bug report. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

I installed the latest version of gatsby-source-graphql to connect with a third-party GraphQL API developed by my company and I get 400 errors when trying to connect using the gatsby-source-graphql.

Actually, my company configured the headers differently, they used X-AUTH-TOKEN instead of authorization provided by the gatsby-source-graphql plugin.

For more clarification, here is how I set my gatsby-source-graphql in my source code.

  {
      resolve: "gatsby-source-graphql",
      options: {
        typeName: "Kl",
        fieldName: "kl",
        // Create Apollo Link manually. Can return a Promise.
        createLink: pluginOptions => {
          return createHttpLink({
            uri: `https://kaleidoscope-graph-ql.herokuapp.com/graphql`,
            headers: {
      

              authorization: `Bearer ${process.env.KL_TOKEN}`,
            },
            fetch,
        
          })
        },
      },
    },

My question is that, how can I customize the headers in such a way that it accepts X-AUTH-TOKEN instead of the authorization provided by the gatsby-source-graphql plugin.

Reproduction Link

https://github.com/udemezue01/KL-Issues

Steps to Reproduce

1. clone reproduction link
2. run gatsby develop
3. check check terminal for errors
   ...

Expected Result

I am supposed to get a 200 OK and be able to query the data of my companies API using the GraphiQL interface.company

Actual Result

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

Response not successful: Received status code 400



  ServerError: Response not successful: Received status code 400

  - index.ts:114 Object.exports.throwServerError
    [raganortho]/[apollo-link-http-common]/src/index.ts:114:17

  - index.ts:145 
    [raganortho]/[apollo-link-http-common]/src/index.ts:145:11

  - task_queues.js:95 processTicksAndRejections
    internal/process/task_queues.js:95:5

Environment

System:
    OS: Windows 10 10.0.19041
    CPU: (4) x64 Intel(R) Core(TM) i7-6600U CPU @ 2.60GHz
  Binaries:
    Node: 14.17.0 - C:\Program Files\nodejs\node.EXE
    npm: 6.14.13 - C:\Program Files\nodejs\npm.CMD
  Languages:
    Python: 3.9.5 - /c/Users/JS/AppData/Local/Microsoft/WindowsApps/python
  Browsers:
    Edge: Spartan (44.19041.423.0)
  npmPackages:
    gatsby: ^3.6.2 => 3.6.2
    gatsby-plugin-gatsby-cloud: ^2.6.1 => 2.6.1
    gatsby-plugin-image: ^1.6.0 => 1.6.0
    gatsby-plugin-manifest: ^3.6.0 => 3.6.0
    gatsby-plugin-offline: ^4.6.0 => 4.6.0
    gatsby-plugin-postcss: ^4.6.0 => 4.6.0
    gatsby-plugin-react-helmet: ^4.6.0 => 4.6.0
    gatsby-plugin-sharp: ^3.6.0 => 3.6.0
    gatsby-source-filesystem: ^3.6.0 => 3.6.0
    gatsby-source-google-reviews-en: ^1.0.2 => 1.0.2
    gatsby-source-graphql: ^3.8.0 => 3.8.0
    gatsby-transformer-sharp: ^3.6.0 => 3.6.0
  npmGlobalPackages:
    gatsby-cli: 3.8.0

Config Flags

module.exports = {
siteMetadata: {
title: "kl Issues",
},
plugins: [

{
  resolve: "gatsby-source-graphql",
  options: {
    typeName: "Kl",
    fieldName: "kl",
    // Create Apollo Link manually. Can return a Promise.
    createLink: pluginOptions => {
      return createHttpLink({
        uri: `https://kaleidoscope-graph-ql.herokuapp.com/graphql`,
        headers: {
          Authorization: `Bearer ${process.env.KL_TOKEN}`,
        },
        fetch,
    
      })
    },
  },
},

],
};

[udemezue01]

please make sure to pull changes before running code via the reproduction link

[udemezue01]

I have not gotten any help, someone please do something about this.

[lucashfreitas]

Hello @udemezue01,

It's a bit hard to understand what is wrong just by the 400 bad response code. You need to understand why your API response is returning 400. You can use Apollo Link to handle errors and console.log them to see the full message/reason. Refer to https://www.gatsbyjs.com/plugins/gatsby-source-graphql/

[udemezue01]

Thanks but after debugging I discovered that the backend API was designed to work with a different header and not authorization.

From the backend my company designed the API to work with

"X-AUTH-TOKEN":"token"

The issue I have now is trying to customize the plugin to work with this custom header.

Any help would be appreciated.

@

[KyleAMathews]

https://www.gatsbyjs.com/plugins/gatsby-source-graphql/#composing-apollo-links-for-production-network-setup

[udemezue01]

Thanks, can you help give out the exact code ??