W
Wasp•12h ago
High

Query with multiple entities

Hey everyone! 👋 I'm trying to work with multiple entities in a Wasp query and running into some TypeScript issues. Here's my query definition: 
query getActiveGames {
  fn: import { getActiveGames } from "@src/server/queries/game",
  entities: [Game, User]
}
query getActiveGames {
  fn: import { getActiveGames } from "@src/server/queries/game",
  entities: [Game, User]
}
And the implementation: 
export const getActiveGames: GetActiveGames<void, Game[]> = async (
  _args,
  context,
) => {
  return context.entities.Game.findMany({
    where: { isActive: true },
    include: { players: true }
  })
}
export const getActiveGames: GetActiveGames<void, Game[]> = async (
  _args,
  context,
) => {
  return context.entities.Game.findMany({
    where: { isActive: true },
    include: { players: true }
  })
}
The query works at runtime, but I'm getting TypeScript errors and missing intellisense. I've specified both Game and User entities in the query definition, but something seems off with the types. Is there a proper way to type queries that work with multiple entities? Thanks in advance! 🙏
3 Replies
kapa.ai
kapa.ai•12h ago
Hi @High. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To answer your question about working with multiple entities in a Wasp query and resolving TypeScript issues, let's look at the relevant information from the knowledge sources. You're on the right track with specifying multiple entities in your query definition. However, the TypeScript issue you're encountering is related to how you're annotating the return type of your query function. Let's break it down: 1. Query Definition: Your query definition in main.wasp looks correct: 
query getActiveGames {
  fn: import { getActiveGames } from "@src/server/queries/game",
  entities: [Game, User]
}
query getActiveGames {
  fn: import { getActiveGames } from "@src/server/queries/game",
  entities: [Game, User]
}
2. Query Implementation: The issue lies in how you're typing the query implementation. When you include related entities (like players in this case), you need to reflect that in the return type. Here's how you can fix it: 
import { GetActiveGames } from 'wasp/server/operations'
import { Game, User } from 'wasp/entities'

export const getActiveGames: GetActiveGames<void, (Game & { players: User[] })[]> = async (
  _args,
  context
) => {
  return context.entities.Game.findMany({
    where: { isActive: true },
    include: { players: true }
  })
}
import { GetActiveGames } from 'wasp/server/operations'
import { Game, User } from 'wasp/entities'

export const getActiveGames: GetActiveGames<void, (Game & { players: User[] })[]> = async (
  _args,
  context
) => {
  return context.entities.Game.findMany({
    where: { isActive: true },
    include: { players: true }
  })
}
The key change here is in the return type annotation. Instead of just Game[], we're using (Game & { players: User[] })[]. This tells TypeScript that we're returning an array of Game objects, each of which includes a players property that is an array of User objects. This approach is described in the Wasp documentation on Queries and further elaborated in a Discord support thread. By specifying the return type more precisely, you should resolve the TypeScript errors and get proper intellisense for the included players property. It's worth noting that the Wasp team is aware that this can be cumbersome and is working on improvements. There's an open issue #1884 to automatically infer the correct type without requiring such complex type annotations. For now, this approach should solve your immediate problem and allow you to work with multiple entities in your query while maintaining type safety. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @High, 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?
High
HighOP•12h ago
@kapa.ai Yes that works. But i also has to type it again in the frontend before it works 
const GameCard = ({ game }: { game: (Game & { players: User[] })}) =>
const GameCard = ({ game }: { game: (Game & { players: User[] })}) =>
kapa.ai
kapa.ai•12h ago
Let me check the knowledge base for you again. One moment! :books: ---------------------- You're right, and I apologize for not addressing the frontend typing in my previous answer. Your observation is correct and highlights an important aspect of working with Wasp queries that involve multiple entities. Currently, Wasp doesn't automatically propagate the full type information from the backend to the frontend for queries involving multiple entities or complex relationships. This is a known limitation that the Wasp team is aware of and working to improve. As a workaround, you indeed need to manually specify the type on the frontend as well. Your approach is correct: 
const GameCard = ({ game }: { game: (Game & { players: User[] })}) => {
  // ...
}
const GameCard = ({ game }: { game: (Game & { players: User[] })}) => {
  // ...
}
This issue is related to the full-stack type safety feature that Wasp is aiming to provide. While Wasp does offer some level of automatic type inference, there are still cases where manual type annotations are necessary, especially for more complex data structures. The Wasp team is actively working on improving this situation. There's an ongoing effort to enhance full-stack type support, as mentioned in the GitHub issue #910. The goal is to have users define everything about a Query once, and then have Wasp automatically handle the typing everywhere else, including the frontend. In the meantime, the approach you're using is the recommended way to handle this situation. By explicitly typing the props in your frontend components, you ensure type safety and enable proper IntelliSense in your IDE. Thank you for bringing this up. It's a valuable point that highlights an area where Wasp is still evolving. The team is committed to improving this aspect of the framework to provide a more seamless full-stack TypeScript experience in the future. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @High, 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?

Did you find this page helpful?