GraphQL mutation "Cannot set headers after they are sent to the client"

Question

I'm implementing graphql login mutation to authenticate user login credential. Mutation verifies the password with bcrypt then sends a cookie to the client, which will render user profile based on whether the cookie is a buyer or owner user).

GraphQL Login Mutation Code:

const Mutation = new GraphQLObjectType({
    name: 'Mutation',
    fields: {
    loginUser: {
            type: UserType,
            args: {
                email: { type: GraphQLString },
                password: { type: GraphQLString }
            },
            resolve: function (parent, args, { req, res }) {
                User.findOne({ email: args.email }, (err, user) => {
                    if (user) {
                        bcrypt.compare(args.password, user.password).then(isMatch => {
                            if (isMatch) {
                                if (!user.owner) {
                                    res.cookie('cookie', "buyer", { maxAge: 900000, httpOnly: false, path: '/' });
                                } else {
                                    res.cookie('cookie', "owner", { maxAge: 900000, httpOnly: false, path: '/' });
                                }
                                return res.status(200).json('Successful login');
                            } else {
                                console.log('Incorrect password');
                            }
                        });
                    }
                });
            }
        }
     }
});

Server.js:

app.use("/graphql",
  (req, res) => {
    return graphqlHTTP({
      schema,
      graphiql: true,
      context: { req, res },
    })(req, res);
  });

Error message:

(node:10630) UnhandledPromiseRejectionWarning: Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client
[0]     at ServerResponse.setHeader (_http_outgoing.js:470:11)
[0]     at ServerResponse.header (/Users/xxx/xxx/server/node_modules/express/lib/response.js:771:10)
[0]     at ServerResponse.append (/Users/xxx/xxx/server/node_modules/express/lib/response.js:732:15)
[0]     at ServerResponse.res.cookie (/Users/xxx/xxx/server/node_modules/express/lib/response.js:857:8)
[0]     at bcrypt.compare.then.isMatch (/Users/xxx/xxx/server/schema/schema.js:89:41)

I've done some research on this error, but can't seem to find a relevant answer. The issue seems to lie within response body being executing more than once, thus "cannot set headers after they are sent to the client". Since I'm sending both res.cookie() and res.status(200), how could I fix this problem?

score 5 · Accepted Answer · answered Dec 07 '19 at 04:58

express-graphql already sets the status and sends a response for you -- there's no need to call either res.status or res.json inside your resolver.

GraphQL always returns a status of 200, unless the requested query was invalid, in which case it returns a status of 400. If errors occur while executing the request, they will be included the response (in an errors array separate from the returned data) but the status will still be 200. This is all by design -- see additional discussion here.

Instead of calling res.json, your resolver should return a value of the appropriate type (in this particular case UserType), or a Promise that will resolve to this value.

Additionally, you shouldn't utilize callbacks inside resolvers since they are not compatible with Promises. If the bcrypt library you're using supports using Promises, use the appropriate API. If it doesn't, switch to a library that does (like bcryptjs) or wrap your callback inside a Promise. Ditto for whatever ORM you're using.

In the end, your resolver should look something like this:

resolve: function (parent, args, { req, res }) {
  const user = await User.findOne({ email: args.email })
  if (user) {
    const isMatch = await bcrypt.compare(args.password, user.password)
    if (isMatch) {
      const cookieValue = user.owner ? 'owner' : 'buyer'
      res.cookie('cookie', cookieValue, { maxAge: 900000, httpOnly: false, path: '/' })
      return user
    }
  }
  // If you want an error returned in the response, just throw it
  throw new Error('Invalid credentials')
}

Great, I'm able to set the cookie now, which authenticated my login. Appreciate the code clean up as well. — jche, Dec 07 '19 at 06:00
@jche If it's the same error, you likely still got a callback in there or a Promise that's not correctly chained. If you've taken out all the callbacks and still can't figure it out, feel free to update your original post with the updated code and I can take a gander. — Daniel Rearden, Dec 07 '19 at 06:05
Yeah sorry about that, I forgot to take out res.status(200). It's working now, thanks. — jche, Dec 07 '19 at 06:06

GraphQL mutation "Cannot set headers after they are sent to the client"

1 Answers1