GraphQL autocompletion - Prisma

When using GraphQL with TypeScript, you get autocompletion for the Prisma Client instance in your GraphQL resolvers because the context object can be typed. In plain JavaScript, this needs a little more effort.

Problem

In a resolver like this:

filterPosts: (parent, args, ctx) => {
  return ctx.prisma.post.findMany({
    where: {
      OR: [
        { title: { contains: args.searchString } },
        { content: { contains: args.searchString } },
      ],
    },
  });
};

VS Code doesn't know the type of the context object so it can't provide any intellisense.

Solution

Add a JSDoc comment named typedef to "import" the correct type:

// Add this to the top of the file
/**
 * @typedef { import("../prisma/generated/client").PrismaClient } Prisma
 */

Then type your resolver arguments:

/**
 * @param {any} parent
 * @param {{ searchString: string }} args
 * @param {{ prisma: Prisma }} ctx
 */
filterPosts: (parent, args, ctx) => {
  return ctx.prisma.post.findMany({
    where: {
      OR: [
        { title: { contains: args.searchString } },
        { content: { contains: args.searchString } },
      ],
    },
  });
};

This tells VS Code that context has a property named prisma with type Prisma, enabling autocompletion.

Complete example

/**
 * @typedef { import("../prisma/generated/client").PrismaClient } Prisma
 * @typedef { import("../prisma/generated/client").UserCreateArgs } UserCreateArgs
 */

const { makeExecutableSchema } = require("graphql-tools");

const resolvers = {
  Query: {
    /**
     * @param {any} parent
     * @param {any} args
     * @param {{ prisma: Prisma }} ctx
     */
    feed: (parent, args, ctx) => {
      return ctx.prisma.post.findMany({
        where: { published: true },
      });
    },
    /**
     * @param {any} parent
     * @param {{ searchString: string }} args
     * @param {{ prisma: Prisma }} ctx
     */
    filterPosts: (parent, args, ctx) => {
      return ctx.prisma.post.findMany({
        where: {
          OR: [
            { title: { contains: args.searchString } },
            { content: { contains: args.searchString } },
          ],
        },
      });
    },
  },
};