Troubleshooting
GraphQL autocompletion
Get autocompletion for Prisma Client queries in GraphQL resolvers with plain JavaScript
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 } },
],
},
});
},
},
};