W
Wasp•7d ago
hadanator

How to pass parameters to useQuery properly?

I have this query implementation: 
const getAllGoalsByClientSchema = z.object({
  selectedClientId: z.string().uuid(),
})

type GetAllGoalsByClientInput = z.infer<typeof getAllGoalsByClientSchema>
export const getAllGoalsByClient: GetAllGoalsByClient<GetAllGoalsByClientInput, Goal[]> = async (rawArgs, context) => {
  if (!context.user) {
    throw new HttpError(401, 'Only authenticated users are allowed to perform this operation')
  }

  const { selectedClientId } = ensureArgsSchemaOrThrowHttpError(getAllGoalsByClientSchema, rawArgs)

  return context.entities.Goal.findMany({
    where: { clientId: selectedClientId },
  })
}
const getAllGoalsByClientSchema = z.object({
  selectedClientId: z.string().uuid(),
})

type GetAllGoalsByClientInput = z.infer<typeof getAllGoalsByClientSchema>
export const getAllGoalsByClient: GetAllGoalsByClient<GetAllGoalsByClientInput, Goal[]> = async (rawArgs, context) => {
  if (!context.user) {
    throw new HttpError(401, 'Only authenticated users are allowed to perform this operation')
  }

  const { selectedClientId } = ensureArgsSchemaOrThrowHttpError(getAllGoalsByClientSchema, rawArgs)

  return context.entities.Goal.findMany({
    where: { clientId: selectedClientId },
  })
}
And I'm trying to use it like this: 
  const { data: goals } = useQuery(getAllGoalsByClient, { selectedClientId })
  const { data: goals } = useQuery(getAllGoalsByClient, { selectedClientId })
But I'm getting an error like this: 
Argument of type '(args: { selectedClientId: string; }, context: { user: AuthUser; }) => Promise<{ id: string; title: string; description: string | null; createdAt: Date; updatedAt: Date; clientId: string; }[]>' is not assignable to parameter of type 'Query<{ selectedClientId: string; }, { id: string; title: string; description: string | null; createdAt: Date; updatedAt: Date; clientId: string; }[]>'.
  Type '(args: { selectedClientId: string; }, context: { user: AuthUser; }) => Promise<{ id: string; title: string; description: string | null; createdAt: Date; updatedAt: Date; clientId: string; }[]>' is not assignable to type '(args: { selectedClientId: string; }) => Promise<{ id: string; title: string; description: string | null; createdAt: Date; updatedAt: Date; clientId: string; }[]>'.
    Target signature provides too few arguments. Expected 2 or more, but got 1. [2345]
Argument of type '(args: { selectedClientId: string; }, context: { user: AuthUser; }) => Promise<{ id: string; title: string; description: string | null; createdAt: Date; updatedAt: Date; clientId: string; }[]>' is not assignable to parameter of type 'Query<{ selectedClientId: string; }, { id: string; title: string; description: string | null; createdAt: Date; updatedAt: Date; clientId: string; }[]>'.
  Type '(args: { selectedClientId: string; }, context: { user: AuthUser; }) => Promise<{ id: string; title: string; description: string | null; createdAt: Date; updatedAt: Date; clientId: string; }[]>' is not assignable to type '(args: { selectedClientId: string; }) => Promise<{ id: string; title: string; description: string | null; createdAt: Date; updatedAt: Date; clientId: string; }[]>'.
    Target signature provides too few arguments. Expected 2 or more, but got 1. [2345]
How do I need to pass selectedClientId correctly?
3 Replies
kapa.ai
kapa.ai•7d ago
Hi @hadanator. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- You are using the correct approach for passing parameters to useQuery in Wasp: 
const { data: goals } = useQuery(getAllGoalsByClient, { selectedClientId })
const { data: goals } = useQuery(getAllGoalsByClient, { selectedClientId })
This is the standard way to pass arguments to a query in Wasp. The second argument to useQuery is the payload object, which will be received as the first argument (args) in your query implementation on the server. Wasp automatically handles the context and type inference for you, so you do not need to (and should not) pass the context yourself. This is shown in the official docs and examples: 
const { data: doneTasks } = useQuery(getFilteredTasks, { isDone: true })
const { data: doneTasks } = useQuery(getFilteredTasks, { isDone: true })
The useQuery hook Why the TypeScript Error? The error you are seeing is likely due to a mismatch in how the query is being imported or typed. Make sure you are importing getAllGoalsByClient from wasp/client/operations, not directly from your server implementation. Wasp generates a client-side function for each query, and you should use that generated function with useQuery. Correct usage: 
import { useQuery, getAllGoalsByClient } from 'wasp/client/operations'

const { data: goals } = useQuery(getAllGoalsByClient, { selectedClientId })
import { useQuery, getAllGoalsByClient } from 'wasp/client/operations'

const { data: goals } = useQuery(getAllGoalsByClient, { selectedClientId })
Do not import the server implementation directly. If you do, you will get a function that expects (args, context), which is not compatible with useQuery, which expects a client-side function that only takes (args). This is confirmed in the docs:
Wasp generates a client-side JavaScript function that shares its name with the Query (e.g., getFilteredTasks). This function takes a single optional argument - an object containing any serializable data you wish to use inside the Query. Wasp will send this object over the network and pass it into the Query's implementation as its first positional argument.
Declaring Queries Summary - Import the query from wasp/client/operations. - Pass your parameters as the second argument to useQuery. - Do not pass or construct the context yourself; Wasp handles it. If you follow this pattern and still get a type error, double-check your imports and ensure you are not mixing up the server and client implementations of your query. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @hadanator, 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?
hadanator
hadanatorOP•7d ago
Yup, I was importing from server. Solved!
miho
miho•7d ago
Ok, cool, I'm glad the bot helped you out! Let us know if you can help you in any other way 🙂

Did you find this page helpful?