how to get a nested object from the request query in a get request

[ALFmachine]

greetings all! loving hono and grateful for this awesome api.

question

asked here on S.O

how can i get a nested key pair object from a url's query string parameters?

for example i would like to extract the following from a url's query params:

cursor[pk]=PK_NAME&cursor[sk]=SK_NAME#1728586654826-c2c67760-d28c-4abe-99f8-2286da2fc5b5

i DO have the ability to target specific objects with keys (shown directly below) but i want to be able to pull dynamic key pairs

console.log('QUERY', c.req.query('cursor[pk]'))

example

api handler

app.get(
  '/',
  zValidator(
    'query',
    z.object({
      cursor: z.record(z.string(), z.string()).default({}),
      limit: z.coerce.number().int().positive().default(50),
      order: z.enum(['asc', 'desc']).default('desc'),
    })
  ),
  async (c) => {
    const { cursor, limit, order } = c.req.valid('query')

    console.log('valid cursor', cursor) // undefined
    console.log('QUERY', c.req.query('cursor')) // undefined
    console.log('QUERIES', c.req.queries('cursor')) //undefined

    const data = await queryRecords({ cursor, limit, order })

    return c.json({ cursor: data.cursor, records: data.records })
  }
)

request

const cursor = 'cursor[pk]=PAGE&cursor[sk]=PAGE#1728586654826-c2c67760-d28c-4abe-99f8-2286da2fc5b5'
const response = await app.request(`http://localhost:3000/items?${cursor}&limit=1`)
const data = await response.json()

[maou-shonen]

You can use hono/validator to handle the validation process yourself. The query is expected to be Record<string, string | string[]>

import { Hono } from "hono"
import { validator } from "hono/validator"
import { z } from "zod"

// This function was generated by ChatGPT. Please modify it as needed.
function parseQuery(query: Record<string, string | string[]>) {
  const result = {}

  for (const [key, value] of Object.entries(query)) {
    const keys = key.split(/[\[\]]+/).filter(Boolean)
    let current = result

    keys.forEach((nestedKey, index) => {
      if (index === keys.length - 1) {
        current[nestedKey] = Array.isArray(value) ? value[0] : value
      } else {
        current[nestedKey] = current[nestedKey] || {}
        current = current[nestedKey]
      }
    })
  }

  return result
}

const app = new Hono().get(
  "/",
  validator("query", (value) => {
    const schema = z.object({
      cursor: z.object({
        pk: z.string().optional(),
        sk: z.string().optional(),
      }),
      limit: z.string().optional(),
    })

    return schema.parse(parseQuery(value))
  }),
  async (c) => {
    const q = c.req.valid("query")
    return c.json(q)
  },
)

const cursor =
  "cursor[pk]=PAGE&cursor[sk]=PAGE#1728586654826-c2c67760-d28c-4abe-99f8-2286da2fc5b5"
const response = await app.request(`http://localhost:3000/?${cursor}&limit=1`)
const data = await response.json()

// data =
// {
//   cursor: {
//     pk: "PAGE",
//     sk: "PAGE#1728586654826-c2c67760-d28c-4abe-99f8-2286da2fc5b5",
//   },
//   limit: "1",
// }

If you want to use z.validator, you can use z.preprocess."

[ALFmachine]

thanks for that work around @maou-shonen 🙇

[prpanto]

I was late to the party but I find a good solution for parsing the query to beautiful object. I use qs lib to convert this kind of queries and I use the decoder for extra changes, See my example above.

import { z } from "zod";
import qs from "qs";

const query = "?filter[color]=red&filter[size]=large&user[post][id]=385&sort=-createdAt&include=author,comments&active=true";

const queryObject = qs.parse(query, {
  ignoreQueryPrefix: true,
  decoder: (str: string, defaultDecoder: qs.defaultDecoder, charset: string, type: "key" | "value") => {    
    if (type === "value" && !!Number(str)) {
      return Number(str);
    }

    if (type === "value" && str === "true") {
      return true;
    }
    
    if (type === "value" && str === "false") {
      return false;
    }

    if (type === "value" && str.includes(",")) {
      return str.split(",").map((s: string) => s.trim());
    }

    return defaultDecoder(str);
  }
});

console.log(queryObject);

const querySchema = z.object({
  filter: z.object({
    color: z.string().optional(),
    size: z.string().optional(),
  }).optional(),
  user: z.object({
    post: z.object({
      id: z.int().optional(),
    }).optional(),
  }).optional(),
  sort: z.string().optional(),
  include: z.array(z.string()).optional(),
  active: z.boolean().optional(),
});

const result = querySchema.parse(queryObject);