Setting a test header in GraphQL Playground that I want to use causes "Server cannot be reached"

Question

So I've created a bunch of mutations and queries and stitched them together that works and wanted to introduce authentication into the mix. I added an HTTP Header "x-token" to hold my sign-in token to be able to delete things like their job or the user itself.

const getMe = async req => {
  const token = req.headers['x-token'];

  if (token) {
    try {
      return await jwt.verify(token, "notSoSecret");
    } catch (e) {
      throw new AuthenticationError(
        'Your session expired. Sign in again.',
      );
    }
    }
  };

  const server = new ApolloServer({
    typeDefs: schema,
    resolvers,
    formatError: error => {
      // remove the internal sequelize error message
      // leave only the important validation error
      const message = error.message
        .replace('SequelizeValidationError: ', '')
        .replace('Validation error: ', '');

      return {
        ...error,
        message,
      };
    },
    context: async ({ req }) => {
      const me = await getMe(req);

      return {
        models,
        me,
        secret: "notSoSecret",
      }
    },
    path: "/graphql"
  });

  server.applyMiddleware({ app });


  sequelize.sync().then(async () => {
     createUsersWithJob();
  });

  app.get("/playground", graphiql({ endpoint: "/graphql" }));
  const handler = serverless(app);
  export { handler };

  const createUsersWithJob = ... //creates seed data

So when I add the token and I look into my command line console, I actually see that I'm setting the header that I want, but it loops over and over again and doesn't stop. Also playground gets an error "Server cannot be reached"

{
  "error": "Response not successful: Received status code 400"
}

and running a deleteUser mutation does not work, or any other mutation and query for that matter until I remove the HTTP Header that I set on playground.

There is a secondary issue where everything in this root file runs twice, but that's not as big for me at the moment as the header issue outlined.

If anyone has any insight into this, I'd love to know more. Thanks in advance.

edit: just a quick edit to say that it works fine when I hardcode a pre-existing user.

Answer 1

I had quite a struggle to get the React version of GraphQL Playground working within a very simple html setup, but I figured something out that might help you as well (fingers crossed).

I added a headers section to the config in the GraphQLPlayground.init call, like so:

const root = document.getElementById('root');
GraphQLPlayground.init(root, {
  endpoint: "/graphql",
  headers: {
    "Authorization": "Bearer " + token
  }
})

I have an element with an id root since this is embedded in HTML.

Not sure this will help you though, as I just noticed from your code sample you're calling graphiql which is a different GraphQL client than GraphQL Playground..

GraphIQL: https://github.com/skevy/graphiql-app
GraphQL Playground: https://github.com/prisma/graphql-playground