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"
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?
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?
