Pagination with useQueries

[omniqlo]

What’s the best way to do pagination for dynamic parallel queries?

For example, let's say that you have an array of 100 post IDs. You want to fetch the first 10 posts in the array, then when you click on the "Next" button, the next 10 posts are fetched, and so on.

const postIds = [1, 2, ..., 100];
const [currentIndex, setCurrentIndex] = useState(0);

const postsQuery = useQueries(
	postIds.slice(currentIndex, currentIndex + 10).map((postId) => ({
		queryKey: ["post", postId],
		queryFn: () => fetchPostById(postId),
		keepPreviousData: true,
	})),
)

const handleNext = () => {
	setCurrentIndex((idx) => idx + 10);
};

With the setup above, I'm able to fetch the first 10 posts and then click on the "Next" button (which runs the handleNext function) to fetch the next 10 posts. However, this doesn't seem to show the old data (the first 10 posts) while the new data (the next 10 posts) are being fetched even though the keepPreviousData field is set to true.

How do I achieve fetching the next batch of posts while showing the previous data?

EDIT: Created a CodeSandbox of this use case: https://codesandbox.io/s/epic-shape-cgvjt?file=/src/App.tsx

[TkDodo]

keepPreviousData doesn't yet work with useQueries. There is an issue and an open PR to fix it

[omniqlo]

Ok, thank you for the details.