korz Posts - Convex Community

korz

•Created by korz on 11/22/2024 in #support-community

pagination and TanStack Start

In https://docs.convex.dev/client/react/tanstack-start

Using Convex React hooks Convex React hooks like usePaginatedQuery can be used alongside TanStack hooks. These hooks reference the same Convex Client so there's still just one set of consistent query results in your app when these are combined.

Is the code below the correct use of the usePaginatedQuery hook with TanStack Start?

import { convexQuery } from "@convex-dev/react-query";
import { useSuspenseQuery } from "@tanstack/react-query";
import { createFileRoute } from "@tanstack/react-router";
import { api } from "../../convex/_generated/api";
import { usePaginatedQuery } from "convex/react";

export const Route = createFileRoute("/")({
  component: Home,
  loader: async ({ context }) => {
    await context.queryClient.ensureQueryData(
      convexQuery(api.fonts.listFontsPaginated, {
        paginationOpts: {
          cursor: null,
          numItems: 12,
        },
      }),
    );
  },
});

function Home() {
  const {
    results: fontsPaginated,
    status,
    loadMore,
  } = usePaginatedQuery(
    api.fonts.listFontsPaginated,
    {},
    { initialNumItems: 12 },
  );

  const { data: firstPageFonts } = useSuspenseQuery(
    convexQuery(api.fonts.listFontsPaginated, {
      paginationOpts: {
        cursor: null,
        numItems: 12,
      },
    }),
  );

  const firstPageLoaded =
    status !== "LoadingFirstPage" && fontsPaginated.length >= 12;

  const fonts = firstPageLoaded ? fontsPaginated : firstPageFonts.page;

  return <div>{fonts.map((f) => f.family)}</div>;
}

import { convexQuery } from "@convex-dev/react-query";
import { useSuspenseQuery } from "@tanstack/react-query";
import { createFileRoute } from "@tanstack/react-router";
import { api } from "../../convex/_generated/api";
import { usePaginatedQuery } from "convex/react";

export const Route = createFileRoute("/")({
  component: Home,
  loader: async ({ context }) => {
    await context.queryClient.ensureQueryData(
      convexQuery(api.fonts.listFontsPaginated, {
        paginationOpts: {
          cursor: null,
          numItems: 12,
        },
      }),
    );
  },
});

function Home() {
  const {
    results: fontsPaginated,
    status,
    loadMore,
  } = usePaginatedQuery(
    api.fonts.listFontsPaginated,
    {},
    { initialNumItems: 12 },
  );

  const { data: firstPageFonts } = useSuspenseQuery(
    convexQuery(api.fonts.listFontsPaginated, {
      paginationOpts: {
        cursor: null,
        numItems: 12,
      },
    }),
  );

  const firstPageLoaded =
    status !== "LoadingFirstPage" && fontsPaginated.length >= 12;

  const fonts = firstPageLoaded ? fontsPaginated : firstPageFonts.page;

  return <div>{fonts.map((f) => f.family)}</div>;
}

63 replies