Wasp•2w ago

Dynamic URL parameters in wasp routes

How can I read dynamic URL route parameters in wasp operations (queries/mutations)

6 Replies

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

MEE6•2w ago

Wohooo @Julius_Java#00, you just became a Waspeteer level 1!

kapa.ai•2w ago

---------------------- Reading Dynamic URL Parameters in Wasp Operations In Wasp, you can define dynamic URL parameters in your routes and then access them in your operations (queries/actions). Here's how to do it: 1. Define a Route with Parameters First, define a route with dynamic parameters in your main.wasp file:

route TaskRoute { path: "/task/:id", to: TaskPage }
page TaskPage { ... }

route TaskRoute { path: "/task/:id", to: TaskPage }
page TaskPage { ... }

The :id part in the path indicates a dynamic parameter. 2. Accessing Parameters in Operations When you want to access these parameters in your operations, you need to pass them as arguments when calling the query or action. In Client Components When calling a query from a client component, you can pass the URL parameters:

import { useQuery } from 'wasp/client/operations'
import { getTask } from 'wasp/client/operations'

// Inside your component
const { data: task, isLoading } = useQuery(getTask, { id: props.match.params.id })

import { useQuery } from 'wasp/client/operations'
import { getTask } from 'wasp/client/operations'

// Inside your component
const { data: task, isLoading } = useQuery(getTask, { id: props.match.params.id })

In Server Operations On the server side, your query implementation will receive these parameters in the args object:

export const getTask: GetTask<{ id: string }, Task> = async (args, context) => {
  const { id } = args
  // Now you can use the id parameter to fetch the task
  return await context.entities.Task.findUnique({
    where: { id: parseInt(id) }
  })
}

export const getTask: GetTask<{ id: string }, Task> = async (args, context) => {
  const { id } = args
  // Now you can use the id parameter to fetch the task
  return await context.entities.Task.findUnique({
    where: { id: parseInt(id) }
  })
}

Type-Safe Links Wasp also provides a type-safe Link component that helps with dynamic parameters:

import { Link } from 'wasp/client/router'

<Link 
  to="/task/:id" 
  params={{ id: task.id }}
>
  {task.description}
</Link>

import { Link } from 'wasp/client/router'

<Link 
  to="/task/:id" 
  params={{ id: task.id }}
>
  {task.description}
</Link>

This ensures that all required parameters are correctly passed Type-Safe Links. You can also use the routes object for programmatic navigation:

import { routes } from 'wasp/client/router'
const linkToTask = routes.TaskRoute.build({ params: { id: 1 } })

import { routes } from 'wasp/client/router'
const linkToTask = routes.TaskRoute.build({ params: { id: 1 } })

This approach gives you type safety when working with route parameters Type-Safe Links - routes Object. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Julius_Java#00, 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?

Carlos•2w ago

@Julius_Java#00 is there any specific constraint that forces you to have a dynamic url param instead of just doing it through the regular wasp mechanism? for example, instead of /api/tasks/:id, you'd do:

// main.wasp
query getTask {
  fn: import {getTask} from "@src/tasks"
  entities: [Task]
}

// main.wasp
query getTask {
  fn: import {getTask} from "@src/tasks"
  entities: [Task]
}

// src/tasks.ts
import {type GetTask} from "wasp/server/operations"
export const getTask: GetTask<{ id: string }> = async ({id}) => {
  // ... get the tasks ...
}

// src/tasks.ts
import {type GetTask} from "wasp/server/operations"
export const getTask: GetTask<{ id: string }> = async ({id}) => {
  // ... get the tasks ...
}

this will have the same effective result, and you take advantage of our Wasp magic

Julius_Java#00OP•2w ago

@Carlos Noted, thanks so much for your help!

Carlos•2w ago

Happy to help! Btw I forgot to link to the docs, here's the info on Queries: https://wasp.sh/docs/data-model/operations/queries

Queries | Wasp

We'll explain what Queries are and how to use them. If you're looking for a detailed API specification, skip ahead to the API Reference.

Gaming

Programming

Dynamic URL parameters in wasp routes

Did you find this page helpful?