T
TanStack•14mo ago
exotic-emerald

Prefetch query status

Hello all. I got some problem with status of prefechQuery in Nextjs 14. First i will show some code. This SSR file "users/list/page.tsx" 
export default async function UsersList({
  searchParams: { page, sortBy, sortType, searchText },
}) {
  const queryClient = new QueryClient();
  await queryClient.prefetchQuery({
    queryKey: ["usersList", Number(page || 1), searchText, sortBy, sortType],
    queryFn: () =>
  wretchServerSide<TReplaceDateWithString<TUsersListResponse>>().addon(QueryStringAddon)
  .query({
  ...(searchText ? { searchText } : {}),
  ...(sortBy ? { sortBy } : {}),
  ...(sortType ? { sortType } : {}),
  ...(page ? { page } : {}),
})
.get(`/users/list`),
});

return (
    <HydrationBoundary state={dehydrate(queryClient)}>
      <NoSSRPageUsersList />
    </HydrationBoundary>
  );
}
export default async function UsersList({
  searchParams: { page, sortBy, sortType, searchText },
}) {
  const queryClient = new QueryClient();
  await queryClient.prefetchQuery({
    queryKey: ["usersList", Number(page || 1), searchText, sortBy, sortType],
    queryFn: () =>
  wretchServerSide<TReplaceDateWithString<TUsersListResponse>>().addon(QueryStringAddon)
  .query({
  ...(searchText ? { searchText } : {}),
  ...(sortBy ? { sortBy } : {}),
  ...(sortType ? { sortType } : {}),
  ...(page ? { page } : {}),
})
.get(`/users/list`),
});

return (
    <HydrationBoundary state={dehydrate(queryClient)}>
      <NoSSRPageUsersList />
    </HydrationBoundary>
  );
}
const NoSSRPageUsersList = () => {
const searchParams = useSearchParams();
const page = Number(searchParams.get("page")) || 1;
const searchText = searchParams.get("searchText");
const sortBy = searchParams.get("sortBy");
const sortType = searchParams.get("sortType");
const {
    data: usersAndCount,
    isPending,
    isRefetching,
    isLoading,
    isFetching,
  } = useQuery({
    queryKey: ["usersList", page, searchText, sortBy, sortType],
    queryFn: () =>
wretchClientSide<TReplaceDateWithString<TUsersListResponse>>()
        .addon(QueryStringAddon)
        .query({
          ...(searchText ? { searchText } : {}),
          ...(sortBy ? { sortBy } : {}),
          ...(sortType ? { sortType } : {}),
          ...(page ? { page } : {}),
        })
        .get(`/users/list`),
  });
// other logic
}
const NoSSRPageUsersList = () => {
const searchParams = useSearchParams();
const page = Number(searchParams.get("page")) || 1;
const searchText = searchParams.get("searchText");
const sortBy = searchParams.get("sortBy");
const sortType = searchParams.get("sortType");
const {
    data: usersAndCount,
    isPending,
    isRefetching,
    isLoading,
    isFetching,
  } = useQuery({
    queryKey: ["usersList", page, searchText, sortBy, sortType],
    queryFn: () =>
wretchClientSide<TReplaceDateWithString<TUsersListResponse>>()
        .addon(QueryStringAddon)
        .query({
          ...(searchText ? { searchText } : {}),
          ...(sortBy ? { sortBy } : {}),
          ...(sortType ? { sortType } : {}),
          ...(page ? { page } : {}),
        })
        .get(`/users/list`),
  });
// other logic
}
I got some input in "other logic" which on change set new searchText params. The problem is, when searchText change the isPending, isRefetching, isLoading, isFetching is always false, but i need this to show some loader when fetching data. Some idea?
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?