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

TanStack•16mo ago•

1 reply

worthy-azure

Clearing search params does not work on mount?

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

Clearing search params does not work on mount?

Similar Threads

Clearing search params does not work on mount?

Similar Threads

Similar Threads

Similar Threads