T
TanStack•10mo ago
optimistic-gold

Clearing search params does not work on mount?

I have a search params validation when i get ids of some stuff, then in the component i get this ids from useSearch and check if this ids exist in API resposone. if yes i keep the search params and do other actions if no i wanna clear the params everything works fine but when i enter directly by the link the clearing function does not work for some reason route file: 
import { z } from 'zod';
import { projectEstimateQueryOptions } from '@services/estimates/estimates.query';
import { createFileRoute } from '@tanstack/react-router';
import { ProjectEstimate } from '@views/Authorized/ProjectEstimate/ProjectEstimate';

const projectEstimateSearchSchema = z
  .object({
    module: z.union([z.number(), z.string()]).optional(),
    role: z.union([z.number(), z.string()]).optional(),
    task: z.union([z.number(), z.string()]).optional(),
  })
  .catch({});

export const Route = createFileRoute(
  '/_authorized/app/_layout/projects/$projectId/',
)({
  loader: async ({
    context: { queryClient, transformEstimateData },
    params: { projectId },
  }) => {
    await queryClient.ensureQueryData(
      projectEstimateQueryOptions(+projectId, transformEstimateData),
    );
  },
  validateSearch: projectEstimateSearchSchema,
  component: ProjectEstimate,
  
});
import { z } from 'zod';
import { projectEstimateQueryOptions } from '@services/estimates/estimates.query';
import { createFileRoute } from '@tanstack/react-router';
import { ProjectEstimate } from '@views/Authorized/ProjectEstimate/ProjectEstimate';

const projectEstimateSearchSchema = z
  .object({
    module: z.union([z.number(), z.string()]).optional(),
    role: z.union([z.number(), z.string()]).optional(),
    task: z.union([z.number(), z.string()]).optional(),
  })
  .catch({});

export const Route = createFileRoute(
  '/_authorized/app/_layout/projects/$projectId/',
)({
  loader: async ({
    context: { queryClient, transformEstimateData },
    params: { projectId },
  }) => {
    await queryClient.ensureQueryData(
      projectEstimateQueryOptions(+projectId, transformEstimateData),
    );
  },
  validateSearch: projectEstimateSearchSchema,
  component: ProjectEstimate,
  
});
clearing function: 
  const clearParams = useCallback(() => {
    navigate({
      to: '/app/projects/$projectId',
      params: {
        projectId: String(projectId),
      },
    });
  }, [navigate, projectId]);
  const clearParams = useCallback(() => {
    navigate({
      to: '/app/projects/$projectId',
      params: {
        projectId: String(projectId),
      },
    });
  }, [navigate, projectId]);
But if i wrap this functuion inside timeout 0 it work. 
  const clearParams = useCallback(() => {
    setTimeout(() => {
      navigate({
        to: '/app/projects/$projectId',
        params: {
          projectId: String(projectId),
        },
      });
    }, 0);
  }, [navigate, projectId]);
  const clearParams = useCallback(() => {
    setTimeout(() => {
      navigate({
        to: '/app/projects/$projectId',
        params: {
          projectId: String(projectId),
        },
      });
    }, 0);
  }, [navigate, projectId]);
this clearParams fn fire inside a useeffect
1 Reply
eastern-cyan
eastern-cyan•10mo ago
can you please create a complete minimal example by forking one of the existing examples on stackblitz?

Did you find this page helpful?