Apollo Server v3

[inkiltie]

1. Because by default when you type http://localhost:5001/api/graphql new AS3 playground opens a new window https://studio.apollographql.com/sandbox/explorer, this new url needs to be added to CORS urls in settings-*

"api": "http://localhost:5001",
"app": "http://localhost:5000",
"gql": "https://studio.apollographql.com"

2. In the AS3 migration guide https://www.apollographql.com/docs/apollo-server/migration/#graphql-playground there is a way to use old playground at localhost:

import { ApolloServerPluginLandingPageGraphQLPlayground,
         ApolloServerPluginLandingPageDisabled } from 'apollo-server-core';

new ApolloServer({
  plugins: [
    process.env.NODE_ENV === 'production'
      ? ApolloServerPluginLandingPageDisabled()
      : ApolloServerPluginLandingPageGraphQLPlayground(),
  ],
});

But even though I can try both ways I always receive either null or error while trying to execute something, for example:

query Query {
  user {
    name {
      last
      first
    }
    emailAddress
    _id
  }
}
_______________
{
  "data": {
    "user": null
  }
}

or

query Query {
  documents {
    _id
    userId
    title
    status
    createdAt
    updatedAt
    content
  }
}
_______________
{
  "errors": [
    {
      "message": "Cannot read property '_id' of null",
      "locations": [
        {
          "line": 2,
          "column": 3
        }
      ],
      "path": [
        "documents"
      ],
      "extensions": {
        "code": "INTERNAL_SERVER_ERROR",
        "exception": {
          "stacktrace": [
            "TypeError: Cannot read property '_id' of null",
            "    at _callee$ (webpack://nodejs-server/./api/documents/graphql/queries.js?:26:38)",
            "    at tryCatch (/Users/vancoder/Git/node2/node_modules/regenerator-runtime/runtime.js:63:40)",
            "    at Generator.invoke [as _invoke] (/Users/vancoder/Git/node2/node_modules/regenerator-runtime/runtime.js:294:22)",
            "    at Generator.next (/Users/vancoder/Git/node2/node_modules/regenerator-runtime/runtime.js:119:21)",
            "    at asyncGeneratorStep (/Users/vancoder/Git/node2/node_modules/@babel/runtime/helpers/asyncToGenerator.js:3:24)",
            "    at _next (/Users/vancoder/Git/node2/node_modules/@babel/runtime/helpers/asyncToGenerator.js:25:9)",
            "    at /Users/vancoder/Git/node2/node_modules/@babel/runtime/helpers/asyncToGenerator.js:32:7",
            "    at new Promise (<anonymous>)",
            "    at /Users/vancoder/Git/node2/node_modules/@babel/runtime/helpers/asyncToGenerator.js:21:12",
            "    at documents (webpack://nodejs-server/./api/documents/graphql/queries.js?:38:25)"
          ]
        }
      }
    }
  ],
  "data": {
    "documents": null
  }
}

Is it related to cookies or am I just missing something here?

[rglover]

This appears to be an issue in your query resolver function based on the error message.

[inkiltie]

@rglover, from what I see in api/graphql/server.js a token variable has a proper value in it only after some action happens in the frontend http://localhost:5000 (when you login, go to documents, create a document, etc), but when I try to execute some queries at http://localhost:5001/api/graphql playground, this token value is always become undefined and refreshes each second await loginWithToken({ token }). This happens even if 2 cookies are in place at both frontend at http://localhost:5000 and server http://localhost:5001.

I think this is why I receive null in my playground query output, it comes from here const user = token ? await loginWithToken({ token }) : null;, where token is undefined.

I added all possible urls to settings file to make CORS happy. And also I don't think it is a problem with resolvers, because I'm just playing with settings and deployment. Source code is untouched.

Can it be because playground is not even intended to be used to execute queries and mutations in this boilerplate, and I just assumed it does and roaming around? :) Thank you.

[rglover]

Hi @inkiltie, yes, the playground doesn't pass cookies by default so no user available. But, you should be able to copy the req.headers.cookie string passed to the server when accessing via a browser and pass that as a header in the playground.

Steps would be:

1. Start up the server/front-end.
2. Add a console.log for the req.headers.cookie inside of /api/graphql/server.js.
3. Load the app in the browser and log in.
4. Copy the cookie field in the console.log output.
5. Go to the playground and in the "Headers" tab, add a cookie header, setting the value to what you copied from the server console.

Should work, but keep me updated.

[inkiltie]

Hi @rglover, I did everything you mentioned but no change, still the same null output.

5. Go to the playground and in the "Headers" tab, add a cookie header, setting the value to what you copied from the server console.

I added a HTTP Header like this:

{
  "cookie": "app_login_token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOiJoRXc5VEkyYXdCR0dNTlZ1IiwiZW1haWxBZGRyZXNzIjoiaW5raWx0aWVAZ21haWwuY29tIiwicGFzc3dvcmQiOiIkMmIkMTAkUkhneXZRWUdFT0QwR0hyLzlTSG1ZZURZUlBKZTM0VmI2dEE4RzRRWDdBOFVud1BjYlFENmkiLCJpYXQiOjE2MjkxNTM0MTEsImV4cCI6MTYzMTc0NTQxMX0.cigRrM49xckGbwGdX7Iu_sF4aQc11JtYG5lc5erQonc; app_login_tokenExpiresAt=2021-09-15T15%3A36%3A51-07%3A00"
}

https://imgur.com/R2Kpt3x

[rglover]

@inkiltie they may have credentials include turned off in there. I'll have to play a bit and follow up.