search param not updating the loaderData on route change!

i'm using this

/c/$slug

/c/$slug

/c/$slug

/c/$slug route with search params. on the route change it changed the url but the actual page data is not getting updating. I'm using it in pagination component. I'm using useNavigate.

reloadDocument: true

reloadDocument: true

reloadDocument: true

reloadDocument: true does fix it but since it's doing hard reload it might cause issue with caching all. So is there anything i'm doing wrong here to get the data to actual page?
should i fetch the actual data on

beforeLoad

beforeLoad

and then just return it along side page & perPage!

export const Route = createFileRoute("/c/$slug")({
  component: RouteComponent,
  validateSearch: (search) => SearchQuerySchema.parse(search),
  beforeLoad: ({ search, params }) => {
    const slug = params.slug;

    if (!slug.includes(env.VITE_CATEGORY) || !slug.endsWith(endSlug)) {
      throw notFound();
    }

    return {
      page: search.page || 1,
      perPage: search.perPage || 24,
    };
  },
  loader: async ({ context, params }) => {
    const page = context.page;
    const perPage = context.perPage;
    const slug = params.slug;
    const category = slug.replace(endSlug, "").split("-").join(" ").trim();

    const imageData = await context.queryClient.fetchQuery(
      context.trpc.images.categoryImageList.queryOptions({
        page,
        perPage,
        category,
      })
    );

    const categorySpintex = getCategorySpintax(
      category.replaceAll("-", " ") ?? ""
    );

    const start = (Number(page) - 1) * Number(perPage); // 0, 5, 10 ...
    const end = start + Number(perPage); // 5, 10, 15 ...

    return {
      category: category || "",
      categorySpintex,
      images: imageData.images,
      page: imageData.page,
      perPage: imageData.pageSize,
      total: imageData.total,
      start,
      end,
    };
  }
});

export const Route = createFileRoute("/c/$slug")({
  component: RouteComponent,
  validateSearch: (search) => SearchQuerySchema.parse(search),
  beforeLoad: ({ search, params }) => {
    const slug = params.slug;

    if (!slug.includes(env.VITE_CATEGORY) || !slug.endsWith(endSlug)) {
      throw notFound();
    }

    return {
      page: search.page || 1,
      perPage: search.perPage || 24,
    };
  },
  loader: async ({ context, params }) => {
    const page = context.page;
    const perPage = context.perPage;
    const slug = params.slug;
    const category = slug.replace(endSlug, "").split("-").join(" ").trim();

    const imageData = await context.queryClient.fetchQuery(
      context.trpc.images.categoryImageList.queryOptions({
        page,
        perPage,
        category,
      })
    );

    const categorySpintex = getCategorySpintax(
      category.replaceAll("-", " ") ?? ""
    );

    const start = (Number(page) - 1) * Number(perPage); // 0, 5, 10 ...
    const end = start + Number(perPage); // 5, 10, 15 ...

    return {
      category: category || "",
      categorySpintex,
      images: imageData.images,
      page: imageData.page,
      perPage: imageData.pageSize,
      total: imageData.total,
      start,
      end,
    };
  }
});

export const Route = createFileRoute("/c/$slug")({
  component: RouteComponent,
  validateSearch: (search) => SearchQuerySchema.parse(search),
  beforeLoad: ({ search, params }) => {
    const slug = params.slug;

    if (!slug.includes(env.VITE_CATEGORY) || !slug.endsWith(endSlug)) {
      throw notFound();
    }

    return {
      page: search.page || 1,
      perPage: search.perPage || 24,
    };
  },
  loader: async ({ context, params }) => {
    const page = context.page;
    const perPage = context.perPage;
    const slug = params.slug;
    const category = slug.replace(endSlug, "").split("-").join(" ").trim();

    const imageData = await context.queryClient.fetchQuery(
      context.trpc.images.categoryImageList.queryOptions({
        page,
        perPage,
        category,
      })
    );

    const categorySpintex = getCategorySpintax(
      category.replaceAll("-", " ") ?? ""
    );

    const start = (Number(page) - 1) * Number(perPage); // 0, 5, 10 ...
    const end = start + Number(perPage); // 5, 10, 15 ...

    return {
      category: category || "",
      categorySpintex,
      images: imageData.images,
      page: imageData.page,
      perPage: imageData.pageSize,
      total: imageData.total,
      start,
      end,
    };
  }
});

export const Route = createFileRoute("/c/$slug")({
  component: RouteComponent,
  validateSearch: (search) => SearchQuerySchema.parse(search),
  beforeLoad: ({ search, params }) => {
    const slug = params.slug;

    if (!slug.includes(env.VITE_CATEGORY) || !slug.endsWith(endSlug)) {
      throw notFound();
    }

    return {
      page: search.page || 1,
      perPage: search.perPage || 24,
    };
  },
  loader: async ({ context, params }) => {
    const page = context.page;
    const perPage = context.perPage;
    const slug = params.slug;
    const category = slug.replace(endSlug, "").split("-").join(" ").trim();

    const imageData = await context.queryClient.fetchQuery(
      context.trpc.images.categoryImageList.queryOptions({
        page,
        perPage,
        category,
      })
    );

    const categorySpintex = getCategorySpintax(
      category.replaceAll("-", " ") ?? ""
    );

    const start = (Number(page) - 1) * Number(perPage); // 0, 5, 10 ...
    const end = start + Number(perPage); // 5, 10, 15 ...

    return {
      category: category || "",
      categorySpintex,
      images: imageData.images,
      page: imageData.page,
      perPage: imageData.pageSize,
      total: imageData.total,
      start,
      end,
    };
  }
});

also using this in RouteComponent to get the Loader data:

  const {
    category: categoryName,
    categorySpintex,
    images: categoryData,
    page,
    perPage,
    total,
    start,
    end,
  } = Route.useLoaderData();

  const {
    category: categoryName,
    categorySpintex,
    images: categoryData,
    page,
    perPage,
    total,
    start,
    end,
  } = Route.useLoaderData();

  const {
    category: categoryName,
    categorySpintex,
    images: categoryData,
    page,
    perPage,
    total,
    start,
    end,
  } = Route.useLoaderData();

  const {
    category: categoryName,
    categorySpintex,
    images: categoryData,
    page,
    perPage,
    total,
    start,
    end,
  } = Route.useLoaderData();

message.txt5.97KB

No replies yetBe the first to reply to this messageJoin

search param not updating the loaderData on route change!

Similar Threads

Similar Threads

Similar Threads