Infinite query with app router initial data

Hi, I am having a hard times implementing ininite query with initial data passed from server components. Does any1 have an example of e.g procedure and implementation using app router and initial data? Thanks in advance
1 Reply
stanisław
stanisław10mo ago
Thats my client usage
const { data, fetchNextPage, hasNextPage, isFetchingNextPage } =
api.bestItems.getAll.useInfiniteQuery(
{
query: searchParams.get('query') ?? undefined,
style: searchParams.get('style') ?? undefined
},
{
initialData: {
pageParams: [initialData.cursor],
pages: [initialData]
},
getNextPageParam: (lastPage) => lastPage.cursor
}
);
const { data, fetchNextPage, hasNextPage, isFetchingNextPage } =
api.bestItems.getAll.useInfiniteQuery(
{
query: searchParams.get('query') ?? undefined,
style: searchParams.get('style') ?? undefined
},
{
initialData: {
pageParams: [initialData.cursor],
pages: [initialData]
},
getNextPageParam: (lastPage) => lastPage.cursor
}
);
and thats my trpc return
const items = await ctx.db.items.findMany({
cursor: input.cursor ? { id: input.cursor } : undefined,
take: take,
skip: input.cursor ? 1 : 0,
where
});

let nextCursor: typeof input.cursor;

if (items.length === take) {
const nextItem = items.at(-1);

nextCursor = nextItem?.id;
}

return {
items,
cursor: nextCursor
};
const items = await ctx.db.items.findMany({
cursor: input.cursor ? { id: input.cursor } : undefined,
take: take,
skip: input.cursor ? 1 : 0,
where
});

let nextCursor: typeof input.cursor;

if (items.length === take) {
const nextItem = items.at(-1);

nextCursor = nextItem?.id;
}

return {
items,
cursor: nextCursor
};
And initially I am passing thata from the server component like that
const initialData = await api.items.getAll.query({
query: searchParams?.query,
style: searchParams?.style
});

<ClientComponent initialData={initialData} />
const initialData = await api.items.getAll.query({
query: searchParams?.query,
style: searchParams?.style
});

<ClientComponent initialData={initialData} />
On the first render items are in an order X then after a short time they swap And we are not loading all the data so the cursors must be mismatched or so Idk
Want results from more Discord servers?
Add your server