Theo's Typesafe Cult•11mo ago

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

Gaming

Programming

Infinite query with app router initial data