Fastify example - cannot set cookies

[gino]

Hi there,

I am trying out the Fastify example in combination with @fastify/session, basically the equivalent to express-session. This package sets a cookie on the browser whenever I set a session. However, the cookie does not get set through GraphiQL. Most likely because of the res.raw that is being used to send the actual result.

Whenever I create a normal endpoint and set a session, the cookie does get set. So it must be something to do with the /graphql endpoint.

I am not too sure if this is an issue with graphql-helix or with Fastify. I would assume that it has something to do with the sendResult(result, res.raw) which sends the result without any cookies or something.

Not quite sure, hope someone is able to help me out. Thanks!

Edit: I have also created an issue inside the Fastify repository to make sure that this is not an issue related to graphql-helix and could be expected behaviour when using res.raw.

[gino]

Apparently the fastify session plugin is not supported in this case as it bypasses fastify by using res.raw, as being said in this issue.

[n1ru4l]

We are planning to move away from using response.raw for helix, by exposing a Node.js compatible stream API that can be consumed by fastify. https://github.com/fastify/fastify/blob/main/lib/reply.js#L142-L147

Then you can use any fastify plugin with helix!

[gino]

@n1ru4l Oh that's great, would love to stick with Helix!

[n1ru4l]

@gino #228 Can you try this?

#228 (comment)

import fastify from "fastify";
import { getGraphQLParameters, processRequest, renderGraphiQL, shouldRenderGraphiQL } from "graphql-helix";
import { toResponsePayload } from "graphql-helix/to-response-payload";
import { toReadable } from "graphql-helix/node/to-readable";
import { schema } from "./schema";
const app = fastify();
app.route({
  method: ["GET", "POST"],
  url: "/graphql",
  async handler(req, reply) {
    const request = {
      body: req.body,
      headers: req.headers,
      method: req.method,
      query: req.query,
    };
    if (shouldRenderGraphiQL(request)) {
      reply.type("text/html");
      reply.send(renderGraphiQL({}));
    } else {
      const request = {
        body: req.body,
        headers: req.headers,
        method: req.method,
        query: req.query,
      };
      const { operationName, query, variables } = getGraphQLParameters(request);
      const result = await processRequest({
        operationName,
        query,
        variables,
        request,
        schema,
      });
      const responsePayload = toResponsePayload(result);
      reply.status(responsePayload.status);
      reply.headers(responsePayload.headers);
      reply.send(toReadable(responsePayload.source));
    }
  },
});
const port = process.env.PORT || 4000;
app.listen(port, () => {
  console.log(`GraphQL server is running on port ${port}.`);
});

It is working fine for me 😇

[gino]

@n1ru4l Thank you for the example! I have just tried it and according to this comment, I changed the example a little bit to make it use Readable.from(). It looked like a cookie was getting set. However, I immediately received an error in my console:
Cannot set headers after they are sent to the client, which makes my Fastify server unreachable.

I tried to chain the reply function, which didn't help with that error unfortunately:

res
  .headers(responsePayload.headers)
  .status(responsePayload.status)
  .send(Readable.from(responsePayload.source));

It looked like it worked until I refreshed the page again, which gave me the error again. Not quite sure why.

Edit: I figured out that the headers error has something to do with my custom session store which I used in combination with the fastify-session plugin. I just tried your example again without my session store and everything works fine!