TTC
Theo's Typesafe Cult•12mo ago
stanisław

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ławOP•12mo 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

Did you find this page helpful?