Handling useInfiniteQuery with filters and pagination

[fontanaen]

Handling useInfiniteQuery with filters and pagination

Problem Description

I'm implementing an infinite scroll list with filters using useInfiniteQuery. When filters change, I need to reset the pagination to start from page 1, but I'm having trouble managing the page state properly.

Current Implementation

const query = useInfiniteQuery({
  key: () => ["elements", { search: filters.search, tags: Array.from(filters.tags) }],
  query: async ({ pagination }) => {
    if (pagination.isLastPage) {
      return null;
    }

    return usersClient.getRelationElements<ElementResource, ElementPhotoResource[]>(authStore.user!.id, (builder) => {
      if (filters.search.length > 2) {
        builder.filter(new Filter("fullTitle", Operator.CONTAINS, filters.search));
      }

      if (filters.tags.size > 0) {
        builder.filter(new Filter("tags", Operator.IN, Array.from(filters.tags)));
      }

      return builder.include(["photos"]).page(nextPage.value, 24);
    });
  },
  // ... rest of the implementation
});

Current Behavior

• I have a nextPage ref that I try to reset when filters change
• I'm using watchDeep to detect filter changes and reset the page
• The infinite scroll works correctly for initial load and subsequent pages
• However, when filters change, the pagination doesn't properly reset

Expected Behavior

When filters change:

1. Reset pagination to page 1
2. Clear existing data
3. Load new data with the updated filters
4. Allow infinite scroll to continue from the new filtered results

Questions

1. What's the recommended way to handle filter changes with useInfiniteQuery?
2. Should I be using a different approach to manage the page state?
3. Is there a built-in way to reset the query when filters change?

Additional Context

• Using Vue 3 with Pinia Colada
• Implementing an infinite scroll list with search and tag filters
• Need to maintain smooth user experience when filters change

Any guidance on the best practices for this scenario would be greatly appreciated!