T
TanStack•16mo ago
defeated-apricot

Update from 1.48.4 to 1.51.2 broke typesafe route prop

Hey everyone! I have a context provider that takes some props for config, one of which I want to enforce to be a valid, existing route in my routeTree. Here's how I accomplished that before this upgrade: 
// WizardContext.ts
export interface WizardContextValue<TTo extends string = "."> {
  closeTo: LinkOptions<RegisteredRouter["routeTree"], "/", TTo>["to"];
  ...
}

export const WizardContext = createContext<WizardContextValue | null>(null);
// WizardContext.ts
export interface WizardContextValue<TTo extends string = "."> {
  closeTo: LinkOptions<RegisteredRouter["routeTree"], "/", TTo>["to"];
  ...
}

export const WizardContext = createContext<WizardContextValue | null>(null);
// WizardProvider.tsx
export default function WizardProvider<TTo extends string = ".">(props: {
  children: ReactNode,
  closeTo: LinkOptions<RegisteredRouter["routeTree"], "/", TTo>["to"];
  ...
}) {
  ...
  
  return (
    <WizardContext.Provider
      value={{
        closeTo: props.closeTo,
        ...
      }}
    >
      {props.children}
    </WizardContext.Provider>
  );
}
// WizardProvider.tsx
export default function WizardProvider<TTo extends string = ".">(props: {
  children: ReactNode,
  closeTo: LinkOptions<RegisteredRouter["routeTree"], "/", TTo>["to"];
  ...
}) {
  ...
  
  return (
    <WizardContext.Provider
      value={{
        closeTo: props.closeTo,
        ...
      }}
    >
      {props.children}
    </WizardContext.Provider>
  );
}
After upgrading to v1.51.2, value.closeTo in <WizardContext.Provider> has a type error which reads: 
Type '((ToPathOption<any, "/", TTo> & {}) | undefined) & SearchParamOptions<any, "/", TTo>["to"] & PathParamOptions<any, "/", TTo>["to"]' is not assignable to type '"." | undefined'.
  Type 'CheckPath<any, TTo, never, "/", TTo> & {} & SearchParamOptions<any, "/", TTo>["to"] & PathParamOptions<any, "/", TTo>["to"]' is not assignable to type '"." | undefined'.
Type '((ToPathOption<any, "/", TTo> & {}) | undefined) & SearchParamOptions<any, "/", TTo>["to"] & PathParamOptions<any, "/", TTo>["to"]' is not assignable to type '"." | undefined'.
  Type 'CheckPath<any, TTo, never, "/", TTo> & {} & SearchParamOptions<any, "/", TTo>["to"] & PathParamOptions<any, "/", TTo>["to"]' is not assignable to type '"." | undefined'.
If I change the type param passed into WizardProvider it's reflected in the error, i.e. export default function WizardProvider<TTo extends string = "/">(props: { shows the same errors with "not assignable to type '"/" | undefined'," but I'm not familiar enough with how the router is typed to understand how to fix this on my own! TLDR; I would like to be able to define a <WizardProvider closeTo="/success"> and enforce that /success is a route that exists in the routeTree Would love some guidance. Thank you for your help!
12 Replies
quickest-silver
quickest-silver•16mo ago
if it's just "enforce that /success is a route that exists in the routeTree" then you can use 
type ValidPaths = RoutePaths<RegisteredRouter['routeTree']>
type ValidPaths = RoutePaths<RegisteredRouter['routeTree']>
defeated-apricot
defeated-apricotOP•16mo ago
Oh shoot! And then my WizardContextValue could set closeTo: ValidPaths;?! Testing now, that's so much cleaner
quickest-silver
quickest-silver•16mo ago
yes but this ofcourse only works for routes that neither have search nor path params if you need that ... you are kinda creating a custom link component which you can using createLink
defeated-apricot
defeated-apricotOP•16mo ago
Okay I will look into that too
quickest-silver
quickest-silver•16mo ago
if you don't have params, don't bother the above solution will then be the simplest one
defeated-apricot
defeated-apricotOP•16mo ago
I think for current purposes we haven't run into an instance where we need to close one of our wizards to a path with params, but I wouldn't be surprised if we end up in that situation in the future
quickest-silver
quickest-silver•16mo ago
out of curiosity: what kind of app are you building?
defeated-apricot
defeated-apricotOP•16mo ago
I'm in the docs now and haven't been able to find a reference to createLink, where can I find more info about that?
quickest-silver
quickest-silver•16mo ago
i still need to document this it was experimental for a while thus undocumented you could have a look at this thread for now: https://discord.com/channels/719702312431386674/1267916028462235688 just so you get an idea how it is used createLink also misses some type safety when it comes to custom component props, also working on that so might not be ready for primetime
defeated-apricot
defeated-apricotOP•16mo ago
We're building a financial services app, one use case for this wizard model is KYC/KYB flows, where we use a route change to open a fullscreen dialog essentially to process ID verification; if a user abandons early I route them to a different place than if they finish the flow
quickest-silver
quickest-silver•16mo ago
cool! will this be publicly available?
defeated-apricot
defeated-apricotOP•16mo ago
Yes! We're the New Money Company of San Fancisco (newmoneycompany.com), we were in YC's W24 batch Mostly focused on platform partnerships at the moment for paying international contractors, but we did (and will again) have more individual-targeted services as well! I think I'm unblocked for now, but I'll read that other thread and keep an eye out for createLink docs in the future! Thanks so much for your help

Did you find this page helpful?