optimistic-gold

Missing types when using _pathlessLayout

export const Route = createFileRoute({
  component: Component,
  validateSearch: zodValidator(searchSchema),
  loaderDeps: ({ search }) => search, //  here search is marked as any
});

export const Route = createFileRoute({
  component: Component,
  validateSearch: zodValidator(searchSchema),
  loaderDeps: ({ search }) => search, //  here search is marked as any
});

Quick one, shouldn't the addition of a validation, type the search params?

8 Replies

optimistic-goldOP•3mo ago

I'm actually struggling with a lot of any's in tanstack. Trying to add a context, and it's also untyped:

import { createRouter as createTanStackRouter } from "@tanstack/react-router";
import { routeTree } from "./routeTree.gen";
import { dehydrate, hydrate, QueryClient, QueryClientProvider } from "@tanstack/react-query";

export const createRouter = () => {
  const queryClient = new QueryClient()

  return createTanStackRouter({
    routeTree,
    scrollRestoration: true,
    context: {
      queryClient
    },
    dehydrate: () => ({
      queryClientState: dehydrate(queryClient)
    }),
    hydrate: (dehydrated) => {
      hydrate(queryClient, dehydrated.queryClientState)
    },
    Wrap: (props) => (
      <QueryClientProvider client={queryClient} {...props} />
    ),
  });
}

declare module "@tanstack/react-router" {
  interface Register {
    router: ReturnType<typeof createRouter>;
  }
}

import { createRouter as createTanStackRouter } from "@tanstack/react-router";
import { routeTree } from "./routeTree.gen";
import { dehydrate, hydrate, QueryClient, QueryClientProvider } from "@tanstack/react-query";

export const createRouter = () => {
  const queryClient = new QueryClient()

  return createTanStackRouter({
    routeTree,
    scrollRestoration: true,
    context: {
      queryClient
    },
    dehydrate: () => ({
      queryClientState: dehydrate(queryClient)
    }),
    hydrate: (dehydrated) => {
      hydrate(queryClient, dehydrated.queryClientState)
    },
    Wrap: (props) => (
      <QueryClientProvider client={queryClient} {...props} />
    ),
  });
}

declare module "@tanstack/react-router" {
  interface Register {
    router: ReturnType<typeof createRouter>;
  }
}

back in the route

export const Route = createFileRoute({

  loader: async ({ context: { queryClient } }) => {
     // ^^^ queryClient is `any`
  },
});

export const Route = createFileRoute({

  loader: async ({ context: { queryClient } }) => {
     // ^^^ queryClient is `any`
  },
});

vicious-gold•3mo ago

Hum , weird something wrong with your types, i just tried the query client type and it works ok for me:

vicious-gold•3mo ago

search also typed correctly:

optimistic-goldOP•3mo ago

for the search params, I can exclude zod being the issue. If i remove entirely i still have untyped search params:

  validateSearch: () => ({}) as { potato: string },
  loaderDeps: ({ search }) => search,

  validateSearch: () => ({}) as { potato: string },
  loaderDeps: ({ search }) => search,

optimistic-goldOP•3mo ago

Im realizing now at some point I lost all the types everywhere:

optimistic-goldOP•3mo ago

it seems to be because of this error:

optimistic-goldOP•3mo ago

'Route' implicitly has type 'any' because it does not have a type annotation and is referenced directly or indirectly in its own initializer.ts(7022) const Route: Route<any, "/question-bank/atpl", "/question-bank/atpl", "/(preview)/question-bank/atpl/_atpl", "/(preview)/question-bank/atpl/_atpl", undefined, ResolveParams<"/question-bank/atpl">, ... 6 more ..., unknown> I narrowed it down to my setup for pathless layouts: my structure is like this:

(public)
  -> _public.tsx
  -> _public.index.tsx
  -> _public.potato.tsx
  -> kiwi.tsx

(public)
  -> _public.tsx
  -> _public.index.tsx
  -> _public.potato.tsx
  -> kiwi.tsx

this setup seems to break all typing inside all the _public routes. kiwi still works fine. removing public pathless layout resolves the problem. Is this a bug?

optimistic-goldOP•3mo ago

Opened an issue: https://github.com/TanStack/router/issues/4383

GitHub

[Start] pathless layout inside (group) breaks type inference · Iss...

Which project does this relate to? Router Describe the bug When placing a pathless layout inside a group, types are broken for context, search, etc... Your Example Website or App https://github.com...

Gaming

Programming

Missing types when using _pathlessLayout

Did you find this page helpful?