Path Variables

So far, we have outlined the possibility of mapping paths and methods to functions, and using request parameters as a part of an application, exploring the functionality that the Hono context provides. In addition to the previous, web applications often utilize information from the path itself.

As an example, consider the three following paths of the Fake Store API:

• https://fakestoreapi.com/products/1
• https://fakestoreapi.com/products/2
• https://fakestoreapi.com/products/3

Each path returns JSON-formatted information about a product. The number at the end of the path is the identifier of the product, and the Fake Store API uses the identifier to display a specific product to the user.

To implement such an application, one possibility would be to hard-code the paths and the identifiers in the application, as shown below.

import { Hono } from "https://deno.land/x/hono@v3.12.11/mod.ts";

const app = new Hono();

app.get("/products/1", (c) => c.text("Information on product 1"));
app.get("/products/2", (c) => c.text("Information on product 2"));
app.get("/products/3", (c) => c.text("Information on product 3"));

Deno.serve(app.fetch);

However, this would require the application to be updated every time a new product is added to the store. This is where path variables come in. Path variables are a way to define parts of a path as variables, where values from the parts can then be used in the application.

Path variables are used to define parts of a path as variables, where values from the parts can then be used in the application.

In Hono, path variables are defined by prefixing a part of a path with a colon (:). The part of the path that is prefixed with the colon is then available in the Hono context through the param method of the req property. As an example, if a path would be /products/:id, the value of the id variable would be available through the c.req.param("id") method.

The following outlines an example of how to use path variables in a Hono application. The application generalizes the earlier example to work for any product identifier.

import { Hono } from "https://deno.land/x/hono@v3.12.11/mod.ts";

const app = new Hono();

app.get(
  "/products/:id",
  (c) => c.text(`Information on product ${c.req.param("id")}`),
);

Deno.serve(app.fetch);

When we run the above program, and query it, we see that the path is reflected in the response.

curl localhost:8000/products/1
Information on product 1%
curl localhost:8000/products/42
Information on product 42%
curl localhost:8000/products/123
Information on product 123%

Paths can also hold multiple variables. The following example outlines two variables. The first variable is named listId, and the second variable is named itemId.

import { Hono } from "https://deno.land/x/hono@v3.12.11/mod.ts";

const app = new Hono();

app.get(
  "/lists/:listId/items/:itemId",
  (c) => {
    const listId = c.req.param("listId");
    const itemId = c.req.param("itemId");

    return c.text(`List ${listId}, item ${itemId}`);
  },
);

Deno.serve(app.fetch);

curl localhost:8000/lists/1/items/3
List 1, item 3%
curl localhost:8000/lists/42/items/8
List 42, item 8%