Search code examples
apolloapollo-serverfastify

Is there any option to disable playground when in production mode?


Is there any option in apollo v3 to disable playground when inside production mode? in v2 you could disable it by passing playground: false to ApolloServer options but can't find any in v3.

Im using apollo-server-fastify.

Edit: I have disabled playground but I still can access localhost:4000/graphql and get this message:

GET query missing.

my code:

const app = fastify({ trustProxy: true });
const server = new ApolloServer({
  schema,
  context: ({ request }: { request: FastifyRequest }) => {
    const auth = request.headers.authorization || "";
    return {
      auth,
      session: request.session,
      sessionStore: request.sessionStore,
    };
  },
  plugins: [
    myPlugin,
    env === "production"
      ? ApolloServerPluginLandingPageDisabled()
      : ApolloServerPluginLandingPageGraphQLPlayground(),
  ],
});
const corsOptions = {
  origin: true,
  optionsSuccessStatus: 200,
  credentials: true,
};
app.register(fastifyCookie);
app.register(fastifySession, {
  secret:
    "secreet",
  saveUninitialized: false,
  cookieName: "GraphSSid",
  cookie: {
    maxAge: 60 * 60 * 24 * 1000 * 7,
    secure: false,
    sameSite: true,
  },
});
existsSync(path.join(__dirname, "../files")) ||
  mkdirSync(path.join(__dirname, "../files"));
existsSync(path.join(__dirname, "../templates")) ||
  mkdirSync(path.join(__dirname, "../templates"));
existsSync(path.join(__dirname, "../logs")) ||
  mkdirSync(path.join(__dirname, "../logs"));

app.register(fastifyStatic, {
  root: path.join(__dirname, "../files"),
  prefix: "/files",
});
app.register(fastifyStatic, {
  root: path.join(__dirname, "../templates"),
  prefix: "/templates",
  decorateReply: false, // the reply decorator has been added by the first plugin registration
});
app.addContentTypeParser("multipart", (request: any, payload, done) => {
  request.isMultipart = true;
  done(null);
});
app.addHook("preValidation", async function (request: any, reply) {
  if (!request.isMultipart) {
    return;
  }

  request.body = await processRequest(request.raw, reply.raw);
});
app.get("/api/update-product-available-inv", async (req, res) => {
  try {
    await saveAvailable();
    console.log("success");
  } catch (err) {
    console.log(err);
  }
  return "Success";
}); 
if (env === "production") {
  app.register(async (instance, opts, next) => {
    instance.register(fastifyStatic, {
      root: path.join(__dirname, "build"),
      prefix: "/",
    });
    instance.setNotFoundHandler((req, res) => {
      res.sendFile("index.html", path.join(__dirname, "build"));
    });
    next();
  });
}
server.start().then(() => {
  app.register(server.createHandler({ path: "/graphql", cors: corsOptions }));
  app.listen(PORT, "0.0.0.0", (err) => {
    if (err) {
      console.error(err);
    } else {
      console.log("Server is ready at port 4000");
    }
  });
});

Solution

  • In Apollo Server 3, Playground is disabled by default. In fact, they rolled their own "playground" because Playground has been retired. It instead has a "Landing Page".

    So to answer your question, turning it off in production isn't really a thing anymore.

    To answer what I assume will be your next question, here is the code to bring Playground back in "not-production":

    import { ApolloServerPluginLandingPageGraphQLPlayground,
             ApolloServerPluginLandingPageDisabled } from 'apollo-server-core';
    new ApolloServer({
      plugins: [
        process.env.NODE_ENV === 'production'
          ? ApolloServerPluginLandingPageDisabled()
          : ApolloServerPluginLandingPageGraphQLPlayground(),
      ],
    });