T
TanStack•3mo ago
absent-sapphire

search param not updating the loaderData on route change!

i'm using this /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 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 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,
    };
  }
});
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();

message.txt

0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?