Cannot access GraphQL Playground

[bricemacias]

Describe the bug

When trying to access GraphQL playground with the address http://localhost:4000/graphql, it returns the following error :

[0] (node:2688) UnhandledPromiseRejectionWarning: JsonWebTokenError: jwt must be provided
[0] at Proxy.module.exports (/Users/[...]/node_modules/jsonwebtoken/verify.js:53:17)
[0] at /Users/[...]/api/utils/apollo-server.js:17:32

[...] (I will put the full error at the end)

System

Browser version: Chrome Version 79.0.3945.88
Node.js version: v12.4.0
NPM or Yarn version: yarn version v1.15.2
Operating system: Mac OS Mojave 10.14.6

Steps to reproduce

1. create application using npx
2. yarn start the application (or just the API, the error remains de the same)
3. access http://localhost:4000/graphql
4. the error appears in the console, either with demo MONGO_URL or personal one, ( the same with demo Cloudinary information and mail provider or personal on), and beeing loged with a user in the application before accessing the adress or not

Expected behavior

Access to GraphQL playground

Actual behavior

1. The browser lunches GraphQl playground, but the following message appears :
   {
   "error": "Failed to fetch schema. Please check your connection"
   }

with the following text next to the address :

"Server cannot be reached"

Additional context

Full console error :

[0] (node:2750) UnhandledPromiseRejectionWarning: JsonWebTokenError: jwt must be provided
[0] at Proxy.module.exports (/Users/[...]/node_modules/jsonwebtoken/verify.js:53:17)
[0] at /Users/[...]/api/utils/apollo-server.js:17:32
[0] at new Promise ()
[0] at checkAuthorization (/Users/[...]/api/utils/apollo-server.js:16:10)
[0] at ApolloServer.context (/Users/[...]/api/utils/apollo-server.js:45:28)
[0] at ApolloServer. (/Users/[...]/node_modules/apollo-server-core/dist/ApolloServer.js:442:38)
[0] at Generator.next ()
[0] at fulfilled (/Users/[...]/node_modules/apollo-server-core/dist/ApolloServer.js:5:58)
[0] at processTicksAndRejections (internal/process/task_queues.js:89:5)
[0] (node:2750) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 2)
[0] (node:2750) UnhandledPromiseRejectionWarning: JsonWebTokenError: jwt must be provided
[0] at Proxy.module.exports (/Users/[...]/node_modules/jsonwebtoken/verify.js:53:17)
[0] at /Users/[...]/pivotty/api/utils/apollo-server.js:17:32
[0] at new Promise ()
[0] at checkAuthorization (/Users/[...]/pivotty/api/utils/apollo-server.js:16:10)
[0] at ApolloServer.context (/Users/[...]/api/utils/apollo-server.js:45:28)
[0] at ApolloServer. (/Users/[...]/node_modules/apollo-server-core/dist/ApolloServer.js:442:38)
[0] at Generator.next ()
[0] at fulfilled (/Users/[...]/node_modules/apollo-server-core/dist/ApolloServer.js:5:58)
[0] at processTicksAndRejections (internal/process/task_queues.js:89:5)
[0] (node:2750) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 3)
[0] (node:2750) UnhandledPromiseRejectionWarning: JsonWebTokenError: jwt must be provided
[0] at Proxy.module.exports (/Users/[...]/node_modules/jsonwebtoken/verify.js:53:17)
[0] at /Users/[...]/api/utils/apollo-server.js:17:32
[0] at new Promise ()
[0] at checkAuthorization (/Users/[...]/api/utils/apollo-server.js:16:10)
[0] at ApolloServer.context (/Users/[...]/api/utils/apollo-server.js:45:28)
[0] at ApolloServer. (/Users/[...]/node_modules/apollo-server-core/dist/ApolloServer.js:442:38)
[0] at Generator.next ()
[0] at fulfilled (/Users/[...]/node_modules/apollo-server-core/dist/ApolloServer.js:5:58)
[0] at processTicksAndRejections (internal/process/task_queues.js:89:5)
[0] (node:2750) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 4)
[0] (node:2750) UnhandledPromiseRejectionWarning: JsonWebTokenError: jwt must be provided
[0] at Proxy.module.exports (/Users/[...]/node_modules/jsonwebtoken/verify.js:53:17)
[0] at /Users/[...]/api/utils/apollo-server.js:17:32
[0] at new Promise ()
[0] at checkAuthorization (/Users/[...]/api/utils/apollo-server.js:16:10)
[0] at ApolloServer.context (/Users/[...]/api/utils/apollo-server.js:45:28)
[0] at ApolloServer. (/Users/[...]/node_modules/apollo-server-core/dist/ApolloServer.js:442:38)
[0] at Generator.next ()
[0] at fulfilled (/Users/[...]/node_modules/apollo-server-core/dist/ApolloServer.js:5:58)
[0] at processTicksAndRejections (internal/process/task_queues.js:89:5)
[0] (node:2750) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 5)
[0] (node:2750) UnhandledPromiseRejectionWarning: JsonWebTokenError: jwt must be provided
[0] at Proxy.module.exports (/Users/[...]/node_modules/jsonwebtoken/verify.js:53:17)
[0] at /Users/[...]/api/utils/apollo-server.js:17:32
[0] at new Promise ()
[0] at checkAuthorization (/Users/[...]/api/utils/apollo-server.js:16:10)
[0] at ApolloServer.context (/Users/[...]/api/utils/apollo-server.js:45:28)
[0] at ApolloServer. (/Users/[...]/node_modules/apollo-server-core/dist/ApolloServer.js:442:38)
[0] at Generator.next ()
[0] at fulfilled (/Users/[...]/node_modules/apollo-server-core/dist/ApolloServer.js:5:58)
[0] at processTicksAndRejections (internal/process/task_queues.js:89:5)
[0] (node:2750) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 6)
[0] (node:2750) UnhandledPromiseRejectionWarning: JsonWebTokenError: jwt must be provided
[0] at Proxy.module.exports (/Users/[...]/node_modules/jsonwebtoken/verify.js:53:17)
[0] at /Users/[...]/api/utils/apollo-server.js:17:32
[0] at new Promise ()
[0] at checkAuthorization (/Users/[...]/api/utils/apollo-server.js:16:10)
[0] at ApolloServer.context (/Users/[...]/api/utils/apollo-server.js:45:28)
[0] at ApolloServer. (/Users/[...]/node_modules/apollo-server-core/dist/ApolloServer.js:442:38)
[0] at Generator.next ()
[0] at fulfilled (/Users/[...]/node_modules/apollo-server-core/dist/ApolloServer.js:5:58)
[0] at processTicksAndRejections (internal/process/task_queues.js:89:5)
[0] (node:2750) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 7)
[0] (node:2750) UnhandledPromiseRejectionWarning: JsonWebTokenError: jwt must be provided
[0] at Proxy.module.exports (/Users/[...]/node_modules/jsonwebtoken/verify.js:53:17)
[0] at /Users/[...]/api/utils/apollo-server.js:17:32
[0] at new Promise ()
[0] at checkAuthorization (/Users/[...]/api/utils/apollo-server.js:16:10)
[0] at ApolloServer.context (/Users/[...]/api/utils/apollo-server.js:45:28)
[0] at ApolloServer. (/Users/[...]/node_modules/apollo-server-core/dist/ApolloServer.js:442:38)
[0] at Generator.next ()
[0] at fulfilled (/Users/[...]/node_modules/apollo-server-core/dist/ApolloServer.js:5:58)
[0] at processTicksAndRejections (internal/process/task_queues.js:89:5)
[0] (node:2750) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 8)
[0] (node:2750) UnhandledPromiseRejectionWarning: JsonWebTokenError: jwt must be provided
[0] at Proxy.module.exports (/Users/[...]/node_modules/jsonwebtoken/verify.js:53:17)
[0] at /Users/[...]/api/utils/apollo-server.js:17:32
[0] at new Promise ()
[0] at checkAuthorization (/Users/[...]/api/utils/apollo-server.js:16:10)
[0] at ApolloServer.context (/Users/[...]/api/utils/apollo-server.js:45:28)
[0] at ApolloServer. (/Users/[...]/node_modules/apollo-server-core/dist/ApolloServer.js:442:38)
[0] at Generator.next ()
[0] at fulfilled (/Users/[...]/node_modules/apollo-server-core/dist/ApolloServer.js:5:58)
[0] at processTicksAndRejections (internal/process/task_queues.js:89:5)
[0] (node:2750) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 9)

[DimiMikadze]

Hi, I've tried to create new app with npx and then navigate to http://localhost:4000/graphql and it worked for me. Usually the error you are receiving means that you have protected that route with authentication token and you need to use it to access it, maybe you've changed something in the codebase?

[bricemacias]

Hi, I just tested again, created a complete new application with npx and I still get the same error. Nothing was changed in the codebase.

The application works though, add user, add post, follow... just the GraphQL Playground that throws the same error

[DimiMikadze]

are you able to open GraphQL Playground in other projects?

[bricemacias]

Yes, I just created a simple server like this and it works :

And when using the project, even from scratch with npx and yarn start, I get this :

With still the same error in console : "jwt must be provided" :/

[DimiMikadze]

Found the solution, you will need to add authorization token in GraphQL Playground HTTP HEADERS like this.

{
  "authorization": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJmdWxsTmFtZSI6IkRpbWkgTWlrYWR6ZSIsImVtYWlsIjoiZGltaUBnbWFpbC5jb20iLCJpYXQiOjE1NzE1OTEwNjMsImV4cCI6MTYwMzE0ODY2M30.xPOeoV8-k0hzgNq9n_XPAdJxQTQy69imVnaQQER8S0Y"
}

1. Sign up in the app
2. Get the auth token by writing localStorage.getItem('token'); in Browsers console
3. Go to GraphQL Playground click HTTP HEADERS near to QUERY VARIABLES
4. Paste the above mentioned code by replacing token value with the one you get from console

[bricemacias]

Yes ! It's working, thank you :)))

[hadimsamir]

Yii! Thank you Mr: Mikadze

[letoribo]

i have the same error, but in production: