useQueryParams - Admin Components

The useQueryParams hook reads a set of query parameters from the current URL, with optional support for a prefix. The Medusa Admin uses it to build the list request of a data table from the table's pagination, search, sorting, and filter state.

Code
import { useQueryParams } from "@medusajs/dashboard/hooks"

Example#

Pass the query parameters that you want to read, then use them in a request to the Medusa backend:

Code
1import { useQueryParams } from "@medusajs/dashboard/hooks"2import { useQuery } from "@tanstack/react-query"3import { sdk } from "../lib/sdk"4
5const PAGE_SIZE = 206
7const ProductList = () => {8  const { offset, q, order } = useQueryParams([9    "offset",10    "q",11    "order",12  ])13
14  const searchParams = {15    limit: PAGE_SIZE,16    offset: offset ? Number(offset) : 0,17    q,18    order,19  }20
21  const { data } = useQuery({22    queryKey: ["products", searchParams],23    queryFn: () => sdk.admin.product.list(searchParams),24  })25
26  // ...27}

If two tables are on the same page, pass a prefix as a second parameter so that each table reads its own query parameters. For example, useQueryParams(["offset"], "sc") reads the sc_offset query parameter and returns it as offset.

Since every returned value is a string, convert the values that aren't strings. For example, use Number(offset) for numbers and JSON.parse(created_at) for filters whose values are objects.

Parameters#

Returns#

Returns a Record<string, string | undefined> whose keys are the passed keys. Each value is the query parameter's value in the current URL, or undefined if the URL doesn't have it.