Improve Pagination

Hello!

I'll like to have a help with my pagination implementation; my backend doesn't provide any data to make pagination simpler. I have the option to paginate with offset and with a cursor. I'm using offset pagination and my code looks like this:

const getProducts = async (info: QueryFunctionContext<string[], any>) => {
  const page = info.queryKey[1];

  const products = await databases.listDocuments<ProductProps>(
    process.env.NEXT_PUBLIC_AW_DATABASE!,
    "product",
    [Query.limit(10), Query.offset(limit * +page)]
  );

  const nextQuery = await databases.listDocuments<ProductProps>(
    process.env.NEXT_PUBLIC_AW_DATABASE!,
    "product",
    [Query.limit(limit), Query.offset(limit * (+page + 1))]
  );

  return {
    result: products.documents,
    hasNext: nextQuery.documents.length > 0,
  };
};

export const useProducts = (page: string) => {
  return useQuery(["products", page], getProducts, { keepPreviousData: true });
};

const getProducts = async (info: QueryFunctionContext<string[], any>) => {
  const page = info.queryKey[1];

  const products = await databases.listDocuments<ProductProps>(
    process.env.NEXT_PUBLIC_AW_DATABASE!,
    "product",
    [Query.limit(10), Query.offset(limit * +page)]
  );

  const nextQuery = await databases.listDocuments<ProductProps>(
    process.env.NEXT_PUBLIC_AW_DATABASE!,
    "product",
    [Query.limit(limit), Query.offset(limit * (+page + 1))]
  );

  return {
    result: products.documents,
    hasNext: nextQuery.documents.length > 0,
  };
};

export const useProducts = (page: string) => {
  return useQuery(["products", page], getProducts, { keepPreviousData: true });
};

As you can see I'm making two request to the database, one to get the data and the second one to know if there is a next page. It works without problem but I'm thinking it's not the optimal way to implement this, as the

nextQuery

nextQuery

is never seen by react-query it's never added to the cache.
My question is, how can I handle this in a way that the

nextQuery

nextQuery

is cached?

TanStack•4y ago•

2 replies

popular-magenta

Improve Pagination

const getProducts = async (info: QueryFunctionContext<string[], any>) => {
  const page = info.queryKey[1];

  const products = await databases.listDocuments<ProductProps>(
    process.env.NEXT_PUBLIC_AW_DATABASE!,
    "product",
    [Query.limit(10), Query.offset(limit * +page)]
  );

  const nextQuery = await databases.listDocuments<ProductProps>(
    process.env.NEXT_PUBLIC_AW_DATABASE!,
    "product",
    [Query.limit(limit), Query.offset(limit * (+page + 1))]
  );

  return {
    result: products.documents,
    hasNext: nextQuery.documents.length > 0,
  };
};

export const useProducts = (page: string) => {
  return useQuery(["products", page], getProducts, { keepPreviousData: true });
};

const getProducts = async (info: QueryFunctionContext<string[], any>) => {
  const page = info.queryKey[1];

  const products = await databases.listDocuments<ProductProps>(
    process.env.NEXT_PUBLIC_AW_DATABASE!,
    "product",
    [Query.limit(10), Query.offset(limit * +page)]
  );

  const nextQuery = await databases.listDocuments<ProductProps>(
    process.env.NEXT_PUBLIC_AW_DATABASE!,
    "product",
    [Query.limit(limit), Query.offset(limit * (+page + 1))]
  );

  return {
    result: products.documents,
    hasNext: nextQuery.documents.length > 0,
  };
};

export const useProducts = (page: string) => {
  return useQuery(["products", page], getProducts, { keepPreviousData: true });
};

nextQuery

nextQuery

is never seen by react-query it's never added to the cache.
My question is, how can I handle this in a way that the

nextQuery

nextQuery

is cached?

Improve Pagination

Similar Threads

Improve Pagination

Similar Threads

Similar Threads

Similar Threads