prefetchinfinite not working when inputs are different
Ive been trying to figure out why prefetching doesnt work when the inputs are different between prefetchinfinite and infinitequery. Its works great when the inputs are the same. Hoping someone can shed some light on this.
export const getStaticProps: GetStaticProps<
PageProps,
Query,
PreviewData
> = async (ctx) => {
const { preview = false, previewData = {} } = ctx;
const token = previewData.token;
const [settings, page = fallbackPage] = await Promise.all([
getSettings({ token }),
getHomePage({ token })
]);
const ssg = createServerSideHelpers({
router: appRouter,
ctx: await createContextInner(),
transformer: superjson
});
await ssg.domain.getAll.prefetchInfinite({
recordsPerPage: 40,
query: null,
sorting: [
{
id: "godaddyDomainData.auctionEndTime",
desc: true
}
],
activeAuctions: true,
attributes: attributes,
filters: {
query: {
items: [{ type: "cond", data: {} }]
}
}
});
return {
props: {
trpcState: ssg.dehydrate(),
page,
settings,
preview,
token: previewData.token ?? null
},
revalidate: 3600
};
};
export const getStaticProps: GetStaticProps<
PageProps,
Query,
PreviewData
> = async (ctx) => {
const { preview = false, previewData = {} } = ctx;
const token = previewData.token;
const [settings, page = fallbackPage] = await Promise.all([
getSettings({ token }),
getHomePage({ token })
]);
const ssg = createServerSideHelpers({
router: appRouter,
ctx: await createContextInner(),
transformer: superjson
});
await ssg.domain.getAll.prefetchInfinite({
recordsPerPage: 40,
query: null,
sorting: [
{
id: "godaddyDomainData.auctionEndTime",
desc: true
}
],
activeAuctions: true,
attributes: attributes,
filters: {
query: {
items: [{ type: "cond", data: {} }]
}
}
});
return {
props: {
trpcState: ssg.dehydrate(),
page,
settings,
preview,
token: previewData.token ?? null
},
revalidate: 3600
};
};
const {
data,
hasNextPage,
fetchNextPage,
isError,
isFetching,
isLoading
} = trpc.domain.getAll.useInfiniteQuery(
{
recordsPerPage: 40,
query: debounced,
sorting,
activeAuctions,
attributes: undefined,
filters
},
{
getNextPageParam: (lastPage) => {
// @ts-ignore
const totalPages = Math.floor(
lastPage.estimatedTotalHits / lastPage.limit
);
// @ts-ignore
const actualPage = lastPage.offset / lastPage.limit;
return actualPage < totalPages ? actualPage + 1 : undefined; // By returning undefined if there are no more pages, hasNextPage boolean will be set to false
}
}
);
const {
data,
hasNextPage,
fetchNextPage,
isError,
isFetching,
isLoading
} = trpc.domain.getAll.useInfiniteQuery(
{
recordsPerPage: 40,
query: debounced,
sorting,
activeAuctions,
attributes: undefined,
filters
},
{
getNextPageParam: (lastPage) => {
// @ts-ignore
const totalPages = Math.floor(
lastPage.estimatedTotalHits / lastPage.limit
);
// @ts-ignore
const actualPage = lastPage.offset / lastPage.limit;
return actualPage < totalPages ? actualPage + 1 : undefined; // By returning undefined if there are no more pages, hasNextPage boolean will be set to false
}
}
);
1 Reply
The main difference is the attributes input, I want to get minimal amount of attributes on initial load then load everything after.