Wasp•11mo ago

What typescript type for queries that use "include"?

Normal behavior: When my query just returns an object from the database, Wasp automatically includes the proper Typescript type for me, like this:

export const getDecks: GetDeck<any, Deck[]> = async (args, context) => {
  return context.entities.Deck.findMany({
    where: {
      userId: context.user.id
    },
  });
}

// in frontend:
const { data: decks, isLoading, error } = useQuery(getDecks);
// decks already has type Deck[]! Amazing!

export const getDecks: GetDeck<any, Deck[]> = async (args, context) => {
  return context.entities.Deck.findMany({
    where: {
      userId: context.user.id
    },
  });
}

// in frontend:
const { data: decks, isLoading, error } = useQuery(getDecks);
// decks already has type Deck[]! Amazing!

But if I want to use Prisma's

_include

_include

to include related objects, those won't be included in the automatic typescript type.

export const getDecks: GetDeck<any, Deck[]> = async (args, context) => {
  return context.entities.Deck.findMany({
    where: {
      userId: context.user.id
    },
    include: {
      cards: true
    },
  });
}

// in frontend:
const { data: decks, isLoading, error } = useQuery(getDecks);
const firstCard = decks[0].cards[0];
// ^ typescript error
// type Deck does not have a `cards` member

export const getDecks: GetDeck<any, Deck[]> = async (args, context) => {
  return context.entities.Deck.findMany({
    where: {
      userId: context.user.id
    },
    include: {
      cards: true
    },
  });
}

// in frontend:
const { data: decks, isLoading, error } = useQuery(getDecks);
const firstCard = decks[0].cards[0];
// ^ typescript error
// type Deck does not have a `cards` member

What to do in this case? I can't for the life of me figure out a good solution.

kapa.ai•1/28/25, 11:59 PM

Hi @cooluke.. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base.

kapa.ai•1/28/25, 11:59 PM

----------------------
To address this issue with TypeScript types when using Prisma's in Wasp queries, there are a couple of approaches you can take. Let's explore the solutions based on the information from our knowledge sources.

Explicit Type Annotation:

You can explicitly annotate the return type of your query to include the related objects. Here's how you can do it:

This approach is mentioned in the 🙋questionsObject relation doesn't compile to TypeScript where a similar issue was discussed.

Using the keyword:

Another approach is to use the keyword to let TypeScript infer the correct type automatically:

This solution was suggested in another 🙋questionsNeed help with joined tables.

Creating a custom type:

If the above solutions don't work for your specific case, you can create a custom type that includes the related objects:

This approach combines the entity type with the included relations.

kapa.ai•1/28/25, 11:59 PM

It's worth noting that the Wasp team is aware of this issue and is working on improving full-stack type safety. There's an open GitHub issue Fix Full-stack type safety type names that addresses some related concerns.

For the most up-to-date and detailed information on working with queries and entities in Wasp, you can refer to the official Wasp documentation on using entities in queries.

Remember, the TypeScript support in Wasp is continuously evolving, so keep an eye on the latest documentation and updates for potential improvements in this area.
----------------------
Note: you can ask me a follow up question by @ mentioning me again

----------------------

kapa.ai•1/28/25, 11:59 PM

Sorry @cooluke., I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist:

Perhaps try again in 15mins?

miho•1/30/25, 9:07 AM

Did the bot's answer work for you?