T
TanStack•14mo ago
other-emerald

Prefetching, client side hydration and updating parameters

In my page.tsx I am using prefetchQuery to grab some data from an API. I am then wrapping a client side component within a hydration boundary as per the documentation. Within the client side component, I have a useQuery call to hydrate the pre-fetched data. This works fine. Data is loaded instantly when the page renders. Great. The problem I have is that when I update paramers, such as pageIndex or pageSize from Tanstack Table, the fetch of new data is performed from page.tsx. I expected it would perform subsequent calls from the client component. Is this understanding correct? If so, how would one approach this? Below is some excerpts of code. I have only included the relevant parts for brevity. Thank you for your time and guidance.
2 Replies
other-emerald
other-emeraldOP•14mo ago
Page.tsx 
export default async function Page(props: LocationsProps) {
  const queryClient = new QueryClient();

  await queryClient.prefetchQuery({
    queryKey: ["memberships"],
    queryFn: async () => {
      return await getMemberships();
    },
  });

  return (
    <Protect
      permission="org:config:ecommerce"
      fallback={
        <ErrorLayout title={""}>
          <Unauthorized />
        </ErrorLayout>
      }
    >
      <ContentLayout title="Memberships">
        <Breadcrumb className="mb-6">
          <BreadcrumbList>
            <BreadcrumbItem>
              <BreadcrumbLink href="/">Dashboard</BreadcrumbLink>
            </BreadcrumbItem>
            <BreadcrumbSeparator />
            <BreadcrumbItem>
              <BreadcrumbPage>Memberships</BreadcrumbPage>
            </BreadcrumbItem>
          </BreadcrumbList>
        </Breadcrumb>
        <HydrationBoundary state={dehydrate(queryClient)}>
          <ListMemberships />
        </HydrationBoundary>
      </ContentLayout>
    </Protect>
  );
}
export default async function Page(props: LocationsProps) {
  const queryClient = new QueryClient();

  await queryClient.prefetchQuery({
    queryKey: ["memberships"],
    queryFn: async () => {
      return await getMemberships();
    },
  });

  return (
    <Protect
      permission="org:config:ecommerce"
      fallback={
        <ErrorLayout title={""}>
          <Unauthorized />
        </ErrorLayout>
      }
    >
      <ContentLayout title="Memberships">
        <Breadcrumb className="mb-6">
          <BreadcrumbList>
            <BreadcrumbItem>
              <BreadcrumbLink href="/">Dashboard</BreadcrumbLink>
            </BreadcrumbItem>
            <BreadcrumbSeparator />
            <BreadcrumbItem>
              <BreadcrumbPage>Memberships</BreadcrumbPage>
            </BreadcrumbItem>
          </BreadcrumbList>
        </Breadcrumb>
        <HydrationBoundary state={dehydrate(queryClient)}>
          <ListMemberships />
        </HydrationBoundary>
      </ContentLayout>
    </Protect>
  );
}
Client component 
const { data, isLoading } = useQuery({
    queryKey: ["memberships"],
    queryFn: async () => {
      console.log("Query Params in getMemberships call:", {
        pageIndex,
        pageSize,
        searchValue: inputValue,
      });
      return await getMemberships({
        searchParams: {
          pageIndex: pageIndex, //pageIndex,
          pageSize: pageSize,
          searchValue: inputValue, //inputValue,
        },
      });
    },
  });

if (isLoading) {
    return <TableLoading />;
  }

  return (
    <DataTable
      columns={columns}
      data={data}
      isLoading={isLoading}
      onPaginationChange={handlePaginationChange}
      pageCount={data?.meta.totalPages ?? 0}
      pagination={pagination}
    >
    </DataTable>
  );
const { data, isLoading } = useQuery({
    queryKey: ["memberships"],
    queryFn: async () => {
      console.log("Query Params in getMemberships call:", {
        pageIndex,
        pageSize,
        searchValue: inputValue,
      });
      return await getMemberships({
        searchParams: {
          pageIndex: pageIndex, //pageIndex,
          pageSize: pageSize,
          searchValue: inputValue, //inputValue,
        },
      });
    },
  });

if (isLoading) {
    return <TableLoading />;
  }

  return (
    <DataTable
      columns={columns}
      data={data}
      isLoading={isLoading}
      onPaginationChange={handlePaginationChange}
      pageCount={data?.meta.totalPages ?? 0}
      pagination={pagination}
    >
    </DataTable>
  );
Is anyone able to assist with this?
fascinating-indigo
fascinating-indigo•14mo ago
you aren't showing where pageIndex and pageSize are coming from; that's exactly why snippets / screnshots aren't a good idea. Please show a full, minimal runnable reproduction (stackbiltz, codesandbox)

Did you find this page helpful?