Source GraphQL API: HTTP error 400 Bad Request

Question

I've set up an apollo federation architecture accessible via a gateway. I want to access it via gatsby using the official plugin gatsby-source-graphql. I've followed their documentation and attempted to include the plugin with the "simple" example.

When I run yarn build on my gatsby project I get the following termanal output:

success onPreInit - 0.048s
success initialize cache - 0.033s
success copy gatsby files - 0.139s
success Compiling Gatsby Functions - 0.239s
success onPreBootstrap - 0.258s
success createSchemaCustomization - 0.003s

 ERROR #11321  PLUGIN

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

Source GraphQL API: HTTP error 400 Bad Request



  Error: Source GraphQL API: HTTP error 400 Bad Request

  - fetch.js:11 exports.fetchWrapper
    [yotee.co]/[gatsby-source-graphql]/fetch.js:11:11

  - task_queues:96 processTicksAndRejections
    node:internal/process/task_queues:96:5

My gatsby-config.js is this:

module.exports = {
  siteMetadata: {
    url: "https://www.XXXX.co",
    title: "XXXX",
    description: "",
    
  },
  plugins: [
    {
      resolve: 'gatsby-source-graphql',
      options: {
        typeName: 'Gateway',
        fieldName: 'gateway',
        url: 'https://XXXXXX'
      }
    },
    "gatsby-plugin-styled-components", 
    "gatsby-plugin-gatsby-cloud", 
    "@chakra-ui/gatsby-plugin",
    "gatsby-plugin-react-helmet"
  ],

};

The error "Source GraphQL API: HTTP error 400 Bad Request" is extremely vague, and I'm unable to get a more verbose message error.

What can I do to better understand this error and solve it?

Answer 1

The gatsby plugin will attempt to retreive the schema from your apollo-server. Ensure that introspection is enabled in production so this step does not fail.

{"extensions":{"code":"GRAPHQL_VALIDATION_FAILED"},"level":"warn","locations":[{"column":3,"line":2}],"message":"GraphQL introspection is not allowed by Apollo Server, but the query contained __schema or __type. To enable introspection, pass introspection: true to ApolloServer in production"} 

By:

  const server = new ApolloServer({
     // other properties
    introspection: true
  });