Default search params

[todor-a]

Hey, all. I'm trying to figure out which of the many features that tanstack router offers is best for handling default search params - i.e., ensure that there always is an account query param, if not, redirect to login.

I looked into middleware (which is actually from tanstack start) and search params in the root component but none of these seem the right place. I have a route that wraps all authenticated routes and in it's beforeLoad I load the user's accounts and if there are none, I redirect to /login but not sure how to set the params from there.

Any clues?

[schiller-manuel]

can you please provide a complete example, ideally by forking one of the router examples on stackblitz?

[todor-a]

Sure, sorry for not doing that in the first place.

Here is the stackblitz project. And here is a derived example:

const searchSchema = z.object({
  account: z.string().optional(),
});

export const Route = createFileRoute('/')({
  validateSearch: zodValidator(searchSchema),
  search: {
    middlewares: [retainSearchParams(['account'])],
  },
  beforeLoad: async ({ context, search }) => {
    const accounts = await Promise.resolve([{ id: '1' }]);

    // if the user does not have an account, redirect him to register one
    if (!accounts.length) {
      throw redirect({
        to: '/register',
      });
    }
    
    // if there is no account selected, default to the first one
    if (!search.account) {
      search.account = accounts[0].id;
    }

    return { accounts };
  },
  component: HomeComponent,
});

function HomeComponent() {
  return (
    <div className="p-2">
      <h3>Welcome Home!</h3>
    </div>
  );
}

Actually, setting account on search appears to work. I did not expect it to and wonder if this is the right way to do it?