2

I am trying to follow this tutorial https://www.youtube.com/watch?v=I6ypD7qv3Z8&t=48972s but I am stuck on trying to make the playground work.

I get to the playground on "http://localhost:4000/graphql" but somehow I get the "Server cannot be reached" error. In the network inspector I see "Cannot POST /" 404s.

Here's my code (app.ts):

import { ApolloServer } from "apollo-server-express";
import { ApolloServerPluginLandingPageGraphQLPlayground } from "apollo-server-core";
import { buildSchema } from "type-graphql";
import { PORT } from "./constants";
import { HelloResolver } from "./graphql/resolvers";

export const main = async () => {
  const app = express();

  const apolloServer = new ApolloServer({
    schema: await buildSchema({ resolvers: [HelloResolver], validate: false }),
    plugins: [ApolloServerPluginLandingPageGraphQLPlayground],
  });
  await apolloServer.start();

  apolloServer.applyMiddleware({ app });

  app.listen(PORT, () => {
    console.log(
      `Server started on http://localhost:${PORT}${apolloServer.graphqlPath}`
    );
  });
};

Things I did extra from the tut:

  • Made PORT a variable with value 4000
  • Added the "ApolloServerPluginLandingPageGraphQLPlayground" for the old school playground (newest doesn't work either)
  • Added the "await apolloServer.start();" line as specified on the doc, I get an error if I don't

Things I tried:

Any idea on where could be the issue? Seems like express didn't create the POST endpoint for the /graphql route.

EDIT: It works if I change this: apolloServer.applyMiddleware({ app }); to this: apolloServer.applyMiddleware({ app, path: "/" });

Raigato
  • 171
  • 2
  • 11

3 Answers3

2

I found the answer here! helpful. Do check it out!

MOHAMMED AWAL
  • 49
  • 3
  • 4
    While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - [From Review](/review/late-answers/30556917) – pitamer Dec 13 '21 at 08:15
0

Try using 127.0.0.1 instead of localhost. It worked for me. Also If you have cached queries and mutations that you still want to use, switching back to localhost from 127.0.0.1 will have the localhost working again.

BaharaJr
  • 55
  • 2
  • 6
0

I recently had this issue too. This was the case where the

Server cannot be reached/no visible schema but still able to execute a query

To fix this you should have this as in your ApolloServer initializer:

const server = new ApolloServer({
  csrfPrevention: true,
  plugins: [
     ApolloServerPluginLandingPageGraphQLPlayground(),
  ],
  instrospection: true,
})

Read more about instrospection here and this github issue.

Shah Aayush
  • 1