I'm following a tutorial on howtographql, which creates a very basic GraphQL server with in-memory data and resolvers written in JavaScript. I keep having issues where I'd like to be able to just put a breakpoint in the resolver, but when I'm running the GraphQL playground GUI, I can't see anything in the DevTools' Sources panel, and putting a debugger line in the code doesn't stop it either.

How do I debug my resolver?

Schema

type Mutation {
  updateLink(id: ID!, url: String, description: String): Link
}

Resolver (I'm using immutable.js's Map; perhaps not correctly)

let links = [
  {
    id: "link-0",
    url: "www.howtographql",
    description: "Fullstack tutorial for GraphQL",
  },
]

const resolvers = {
  Mutation: {
    updateLink(root, args) {
      const linkIndex = links.findIndex(link => link.id === args.id);
      const state = links.map(link => {
        debugger;
        if (link.id === args.id) {
          const map = Map(link);
          return map
            .set("url", args.url || link.url)
            .set("description", args.description || link.description);
        }
        return link;
      });
      links = state;
      return state[linkIndex];
    },
}

I'm following a tutorial on howtographql., which creates a very basic GraphQL server with in-memory data and resolvers written in JavaScript. I keep having issues where I'd like to be able to just put a breakpoint in the resolver, but when I'm running the GraphQL playground GUI, I can't see anything in the DevTools' Sources panel, and putting a debugger line in the code doesn't stop it either.

How do I debug my resolver?

Schema

type Mutation {
  updateLink(id: ID!, url: String, description: String): Link
}

Resolver (I'm using immutable.js's Map; perhaps not correctly)

let links = [
  {
    id: "link-0",
    url: "www.howtographql.",
    description: "Fullstack tutorial for GraphQL",
  },
]

const resolvers = {
  Mutation: {
    updateLink(root, args) {
      const linkIndex = links.findIndex(link => link.id === args.id);
      const state = links.map(link => {
        debugger;
        if (link.id === args.id) {
          const map = Map(link);
          return map
            .set("url", args.url || link.url)
            .set("description", args.description || link.description);
        }
        return link;
      });
      links = state;
      return state[linkIndex];
    },
}

• javascript
• debugging
• graphql
• resolver

2 Answers 2

The resolvers run on the server. The servers' code will not appear in DevTools' Sources panel. You have to use a NodeJS debugger from your IDE to debug your resolvers

You can use the Auto Attach from VS Code:

1. Follow the official doc to setup: https://code.visualstudio./docs/nodejs/nodejs-debugging#_auto-attach
2. If you select "onlyWithFlag", you will need to launch with node --inspect index.js, the file index.js is where you start the server
3. Set a debug point in your resolver
4. Open local GraphQL explorer and run some queries, you will see the debugger is attached