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

any

- ie.

at pretty much each stage

also the result of

useLoaderData

useLoaderData

any

any

which is causing typescript errors further down in the component when i go to use the data

TanStack•6mo ago•

3 replies

brilliant-lime

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

any

- ie.

at pretty much each stage

also the result of

useLoaderData

useLoaderData

any

any

which is causing typescript errors further down in the component when i go to use the data

Route types not working

Similar Threads

Route types not working

Similar Threads

Similar Threads

Similar Threads