T
TanStack•8mo ago
stormy-gold

Property 'isNewUser' does not exist on type '{}'** Route.useSearch

I'm using TanStack Router and have defined a search schema with isNewUser as an optional string parameter: 
const dashboardSearchSchema = z.object({
  isNewUser: z.string().optional().default(""),
});

export const Route = createFileRoute(PATHS.DASHBOARD)({
  validateSearch: zodValidator(dashboardSearchSchema),
  component: DashboardPage,
});
const dashboardSearchSchema = z.object({
  isNewUser: z.string().optional().default(""),
});

export const Route = createFileRoute(PATHS.DASHBOARD)({
  validateSearch: zodValidator(dashboardSearchSchema),
  component: DashboardPage,
});
However, when I try to access isNewUser from the search params: 
const { isNewUser } = Route.useSearch();
const { isNewUser } = Route.useSearch();
TypeScript gives me the error: "Property 'isNewUser' does not exist on type '{}'" It seems like the type inference isn't working correctly with the zod schema. How can I fix this type issue?
4 Replies
helpful-purple
helpful-purple•8mo ago
createFileRoute needs the string literal. don't supply a variable
stormy-gold
stormy-goldOP•8mo ago
Perfect! Thanks 😉 @Manuel Schiller do you also know how to unset the searchParam isNewUser? 
 // Check for "new" parameter in URL and fire confetti if present
  useEffect(() => {
    if (isNewUser) {
      fireConfetti();
      
      // Remove the isNewUser parameter from the URL without triggering a navigation
      navigate({
        isNewUser: undefined,
      });
    }
  }, [isNewUser, fireConfetti]);
 // Check for "new" parameter in URL and fire confetti if present
  useEffect(() => {
    if (isNewUser) {
      fireConfetti();
      
      // Remove the isNewUser parameter from the URL without triggering a navigation
      navigate({
        isNewUser: undefined,
      });
    }
  }, [isNewUser, fireConfetti]);
helpful-purple
helpful-purple•8mo ago
you need to navigate to remove it otherwise checkout search middlewares
stormy-gold
stormy-goldOP•8mo ago
ah i think like this 
 // Check for "new" parameter in URL and fire confetti if present
  useEffect(() => {
    if (isNewUser) {
      fireConfetti();

      // Remove the isNewUser parameter from the URL without triggering a navigation
      navigate({
        search: (prev) => {
          const { isNewUser, ...rest } = prev;
          return rest;
        },
      });
    }
  }, [isNewUser, fireConfetti, navigate]);
 // Check for "new" parameter in URL and fire confetti if present
  useEffect(() => {
    if (isNewUser) {
      fireConfetti();

      // Remove the isNewUser parameter from the URL without triggering a navigation
      navigate({
        search: (prev) => {
          const { isNewUser, ...rest } = prev;
          return rest;
        },
      });
    }
  }, [isNewUser, fireConfetti, navigate]);
Full solution to remove the isNewUser after firing confetti 
export const Route = createFileRoute("/dashboard/")({
  component: DashboardPage,
  validateSearch: dashboardSearchSchema,
  search: {
    middlewares: [
      ({ search, next }) => {
        if (search.isNewUser) {
          const { isNewUser, ...rest } = search;
          return rest;
        }

        // Otherwise, proceed normally
        return next(search);
      },
    ],
  },
});

function DashboardPage() {
  const { isNewUser } = Route.useSearch();

  // Check for "new" parameter in URL and fire confetti if present
  useEffect(() => {
    if (isNewUser) {
      fireConfetti();
    }
  }, [isNewUser, fireConfetti]);
export const Route = createFileRoute("/dashboard/")({
  component: DashboardPage,
  validateSearch: dashboardSearchSchema,
  search: {
    middlewares: [
      ({ search, next }) => {
        if (search.isNewUser) {
          const { isNewUser, ...rest } = search;
          return rest;
        }

        // Otherwise, proceed normally
        return next(search);
      },
    ],
  },
});

function DashboardPage() {
  const { isNewUser } = Route.useSearch();

  // Check for "new" parameter in URL and fire confetti if present
  useEffect(() => {
    if (isNewUser) {
      fireConfetti();
    }
  }, [isNewUser, fireConfetti]);
... its not fully removing the searchParam: "/dashboard?isNewUser="

Did you find this page helpful?