absent-sapphire

Type issue in the search params of the Link component

Hello, I have a question about the search param type. The search param keys are inferred in <Link /> props, but the values are always "unknown." Is there a reason for this? Or did I do something wrong?

4 Replies

automatic-azure•4mo ago

What does your /demo/tanstack-query route definition look like?

absent-sapphireOP•4mo ago

It's there in one of the images I uploaded

import { createFileRoute, stripSearchParams } from '@tanstack/react-router'
import { useQuery } from '@tanstack/react-query'
import { z } from 'zod'

const defaultValues = {
  page: 1,
  filter: '',
  sort: 'newest',
} as const

const searchSchema = z.object({
  page: z.number().catch(defaultValues.page),
  filter: z.string().catch(defaultValues.filter),
  sort: z.enum(['newest', 'oldest', 'price']).catch(defaultValues.sort),
})

export const Route = createFileRoute('/demo/tanstack-query')({
  component: TanStackQueryDemo,
  validateSearch: searchSchema,
  search: {
    middlewares: [stripSearchParams(defaultValues)],
  },
})

import { createFileRoute, stripSearchParams } from '@tanstack/react-router'
import { useQuery } from '@tanstack/react-query'
import { z } from 'zod'

const defaultValues = {
  page: 1,
  filter: '',
  sort: 'newest',
} as const

const searchSchema = z.object({
  page: z.number().catch(defaultValues.page),
  filter: z.string().catch(defaultValues.filter),
  sort: z.enum(['newest', 'oldest', 'price']).catch(defaultValues.sort),
})

export const Route = createFileRoute('/demo/tanstack-query')({
  component: TanStackQueryDemo,
  validateSearch: searchSchema,
  search: {
    middlewares: [stripSearchParams(defaultValues)],
  },
})

harsh-harlequin•4mo ago

see https://tanstack.com/router/v1/docs/framework/solid/guide/search-params#zod

Search Params | TanStack Router Solid Docs

Similar to how TanStack Query made handling server-state in your React and Solid applications a breeze, TanStack Router aims to unlock the power of URL search params in your applications. 🧠 If you ar...

absent-sapphireOP•4mo ago

Thank you so much; it actually helped

Gaming

Programming

Type issue in the search params of the Link component

Did you find this page helpful?