T
TanStack•3mo ago
generous-apricot

Route types not working

Hi all, i've got this search route but none of the types are working properly 
const SearchSchema = z.object({
  q: z.string(),
})

export const Route = createFileRoute('/search')({
  component: SearchComponent,
  validateSearch: search =>
    SearchSchema.parse(search),
  loaderDeps: opts => ({ q: opts.search.q }),
  loader: async(ctx): Promise<Game[]> => {
    const res = await search({
      query: ctx.deps.q
    })
    return res.games.items
  },
})

function SearchComponent() {
  const query = Route.useLoaderDeps().q
  const results = Route.useLoaderData()
const SearchSchema = z.object({
  q: z.string(),
})

export const Route = createFileRoute('/search')({
  component: SearchComponent,
  validateSearch: search =>
    SearchSchema.parse(search),
  loaderDeps: opts => ({ q: opts.search.q }),
  loader: async(ctx): Promise<Game[]> => {
    const res = await search({
      query: ctx.deps.q
    })
    return res.games.items
  },
})

function SearchComponent() {
  const query = Route.useLoaderDeps().q
  const results = Route.useLoaderData()
everything seems to be getting typed to any - ie. q at pretty much each stage also the result of useLoaderData is any which is causing typescript errors further down in the component when i go to use the data
1 Reply
generous-apricot
generous-apricotOP•3mo ago
i swear this was working yesterday even this simple new route isn't being properly typed 
import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/new')({
  component: RouteComponent,
  loader(ctx) {
    return { foo: 123 }
  },
})

function RouteComponent() {
  const data = Route.useLoaderData()
  return <div>Hello "/new"!</div>
}
import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/new')({
  component: RouteComponent,
  loader(ctx) {
    return { foo: 123 }
  },
})

function RouteComponent() {
  const data = Route.useLoaderData()
  return <div>Hello "/new"!</div>
}
this was my tsconfig, had to change module nodnext -> preserve

Did you find this page helpful?