Typescipt debugger in vscode

I have been trying to set up an apollo server (v3) on typescript and I have been able to get everything set up but I would like to get the debugger in vscode working so I can check values in my resolvers on the fly. I have been able to set this up with regular javascript but I have not been successful with typescript. Does anyone have a working solution to this or possibly even a different but better solution? Thanks!

Hey @jthompson, I use this pretty regularly for development on the server and federation libraries. Are you able to attach the debugger at all? Are you ending up in compiled JS land when your debugger hits?

My best guess is that’s probably the case, in which case I’d ask if you have sourceMap enabled in your tsconfig.json?

I do have sourceMap enabled on my tsconfig.json file. I have not been able to attach a debugger at all.

my tsconfig.json looks like:

{
  "compilerOptions": {
    "outDir": "dist",
    "lib": [
      "esnext"
    ],
    "target": "ES6",
    "module": "commonjs",
    "rootDir": "./src",
    "removeComments": true,
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "strictBindCallApply": true,
    "noImplicitThis": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "sourceMap": true
  },
  "include": [
    "src/**/*"
  ]
}

I think some of the settings are not needed but I’m not sure yet.

Here is my package.json:

{
  "name": "graphql",
  "version": "1.0.0",
  "main": "src/server.js",
  "license": "MIT",
  "scripts": {
    "dev": "ts-node-dev --no-notify --respawn --transpile-only src/server",
    "build": "yarn -s run clean && npm -s yarn generate && tsc",
    "start": "node dist/server",
    "clean": "rm -rf dist",
    "start:ts": "ts-node src/index.ts",
    "test": "echo \"Error: no test specified\" && exit 1",
    "migrate": "prisma migrate dev",
    "generate": "yarn -s run generate:prisma && yarn -s run generate:codegen",
    "generate:prisma": "prisma generate",
    "generate:codegen": "graphql-codegen --config codegen.yml"
  },
  "prettier": {
    "semi": false,
    "singleQuote": true,
    "trailingComma": "all"
  },
  "devDependencies": {
    "@graphql-codegen/cli": "2.3.0",
    "@graphql-codegen/introspection": "2.1.0",
    "@graphql-codegen/typescript": "2.4.1",
    "@graphql-codegen/typescript-resolvers": "2.4.2",
    "@types/uuid": "^8.3.3",
    "prisma": "^3.6.0",
    "ts-node": "^10.4.0",
    "ts-node-dev": "^1.1.8",
    "typescript": "^4.4.4"
  },
  "dependencies": {
    "@graphql-tools/schema": "^8.3.1",
    "@prisma/client": "^3.6.0",
    "apollo-server-core": "^3.5.0",
    "apollo-server-express": "^3.5.0",
    "express": "^4.17.1",
    "graphql": "^16.0.1",
    "graphql-subscriptions": "^2.0.0",
    "subscriptions-transport-ws": "^0.11.0",
    "uuid": "^8.3.2"
  }
}

I know I’m missing something simple but I’m not sure what? Thanks.

Ok, since it’s not the obvious thing…if you can provide a repo that I can clone with instructions on how to reproduce the issue that’s going to be a bare minimum for me to be helpful. Is this a project you can share? Feel free to add me as a collaborator on GH or DM me if you’d like to keep it private.

Got your invite and responded in an issue on the repo. You should be all set!