W
Wasp•3mo ago
cooluke.

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 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.
2 Replies
kapa.ai
kapa.ai•3mo ago
Hi @cooluke.. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To address this issue with TypeScript types when using Prisma's include 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. 1. 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: 
export const getDecks: GetDeck<void, (Deck & { cards: Card[] })[]> = async (args, context) => {
  return context.entities.Deck.findMany({
    where: {
      userId: context.user.id
    },
    include: {
      cards: true
    },
  });
}
export const getDecks: GetDeck<void, (Deck & { cards: Card[] })[]> = async (args, context) => {
  return context.entities.Deck.findMany({
    where: {
      userId: context.user.id
    },
    include: {
      cards: true
    },
  });
}
This approach is mentioned in the Discord support thread where a similar issue was discussed. 2. Using the satisfies keyword: Another approach is to use the satisfies keyword to let TypeScript infer the correct type automatically: 
export const getDecks = (async (args, context) => {
  return context.entities.Deck.findMany({
    where: {
      userId: context.user.id
    },
    include: {
      cards: true
    },
  });
}) satisfies GetDeck<void>;
export const getDecks = (async (args, context) => {
  return context.entities.Deck.findMany({
    where: {
      userId: context.user.id
    },
    include: {
      cards: true
    },
  });
}) satisfies GetDeck<void>;
This solution was suggested in another Discord support thread. 3. 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: 
type DeckWithCards = Deck & { cards: Card[] };

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

export const getDecks: GetDeck<void, DeckWithCards[]> = async (args, context) => {
  return context.entities.Deck.findMany({
    where: {
      userId: context.user.id
    },
    include: {
      cards: true
    },
  });
}
This approach combines the entity type with the included relations. 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 :speech_balloon: ---------------------- 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
miho•3mo ago
Did the bot's answer work for you?

Did you find this page helpful?