T
TanStack•12mo ago
correct-apricot

Search mask lagging behind by an update

the new search middleware sounds nice! Just wondering if you anyone has been able to look into search params lagging when using declarative masking? https://codesandbox.io/p/devbox/stoic-cerf-qj7jyh note how when you use the in-app navigation buttons, the search params in the URL lag behind by one navigation. Thanks!
4 Replies
extended-salmon
extended-salmon•12mo ago
no this has not been tackled unfortunately
correct-apricot
correct-apricotOP•4mo ago
@Manuel Schiller any idea if the devinxi stuff might fix this? if not, can you think of any workarounds we could do to help with this?
extended-salmon
extended-salmon•4mo ago
no devinxi should not have had an impact on this . we did rework the link building a bit but I don't think it fixes that. you might try out on the @alpha version
correct-apricot
correct-apricotOP•4mo ago
yeah ill give it a go later today if i have time. My current workaround is to just have my own wrappers on top of the navigate functions/components that handle custom masking rules e.g. 
export const Navigate = (props: Omit<Optional<LinkProps, 'params'>, 'search'>) => {
  const { params, to, search, mask, ...restOfProps } = props;

  return (
    <OriginalNavigate
      {...restOfProps}
      to={to}
      {...(params ? { params } : { params: (prev) => ({ ...prev }) })}
      {...(search ? { search } : { search: (prev) => ({ ...prev }) })}
      {...(mask
        ? { mask }
        : {
            mask: 
              {
                  to,
                  params: (prev) => prev,
                  state: (prev) => prev,
                  hash: (prev) => prev ?? '',
                  // We need to hide the search params from the URL when navigating to a new route.
                  // These are still preserved inside the Router's internal state so we can still access them
                  search: (prev) => ({ c: search?.c ?? prev.c }),
                }
              
          })}
    />
  );
};
export const Navigate = (props: Omit<Optional<LinkProps, 'params'>, 'search'>) => {
  const { params, to, search, mask, ...restOfProps } = props;

  return (
    <OriginalNavigate
      {...restOfProps}
      to={to}
      {...(params ? { params } : { params: (prev) => ({ ...prev }) })}
      {...(search ? { search } : { search: (prev) => ({ ...prev }) })}
      {...(mask
        ? { mask }
        : {
            mask: 
              {
                  to,
                  params: (prev) => prev,
                  state: (prev) => prev,
                  hash: (prev) => prev ?? '',
                  // We need to hide the search params from the URL when navigating to a new route.
                  // These are still preserved inside the Router's internal state so we can still access them
                  search: (prev) => ({ c: search?.c ?? prev.c }),
                }
              
          })}
    />
  );
};
not super ideal but works for now. just hoping this bug gets fixed so that i dont need it 🙂 happy to help contribute if pointed in the right direction too!

Did you find this page helpful?