Move Bounty Filtering and Sorting to Server-Side (GraphQL)

[Benjtalkshow]

Refactor: Move Bounty Filtering & Sorting to Backend (GraphQL)

Overview

Currently, app/bounty/page.tsx performs filtering and sorting of bounties on the client using useMemo. While this works for small datasets, it will not scale efficiently as the number of bounties grows.

To improve performance and scalability, we should move filtering, sorting, and pagination logic to the backend by updating the GraphQL query to accept parameters.

---

Goals

• Eliminate client-side filtering and sorting
• Move filtering, sorting, and pagination to GraphQL
• Improve performance for large datasets
• Ensure consistent data handling across the app

---

Implementation Details

1. Update GraphQL Query

Modify: lib/graphql/operations/bounties.graphql

• Update the bounties query to accept:
  • Filter parameters (e.g., status, category, search)
  • Sorting options (e.g., date, reward, popularity)
  • Pagination arguments (e.g., limit, cursor/page)
• Ensure the backend resolver supports these parameters

---

2. Update Hook

Modify: hooks/use-bounties.ts

• Pass UI filter state into the GraphQL query variables
• Ensure query re-fetches when filters/sort/pagination change
• Use stable query keys for caching (if using TanStack Query or similar)

---

3. Refactor Page Logic

Modify: app/bounty/page.tsx

• Remove:
  • useMemo-based filtering and sorting logic
• Replace with:
  • Direct consumption of filtered/sorted data from the API
• Ensure UI controls (filters, sort options) update query parameters correctly

---

Files Affected

Modified

• lib/graphql/operations/bounties.graphql
• hooks/use-bounties.ts
• app/bounty/page.tsx

---

Acceptance Criteria

• No client-side filtering or sorting logic remains
• GraphQL query supports filter, sort, and pagination arguments
• UI interactions correctly update query variables
• Data returned from API reflects applied filters and sorting
• Performance improves with large datasets
• No regressions in bounty listing functionality

---

Testing Notes

• Test filtering (e.g., status, category, search)
• Test sorting (e.g., newest, highest reward)
• Validate pagination behavior (infinite scroll or page-based)
• Ensure correct data is fetched when filters change
• Confirm no UI lag with large datasets

---

Additional Notes

• Use debouncing for search inputs to avoid excessive queries
• Ensure backend indexing supports efficient filtering
• Consider cursor-based pagination for scalability
• Keep query variables structured and predictable for maintainability

[linear]

BOU-141

[coderabbitai]

🔗 Related PRs

#30 - feat: Implement React Query hooks for managing bounties [merged]
#34 - feat: Implement API-driven bounty fetching and display with dedicated loading, empty, and error UI components. [merged]
#115 - feat: replace hand-written bountyKeys with codegen-generated query keys [merged]
#116 - feat: Migrate useBounty detail hook to GraphQL [merged]
#123 - refactor: extract pagination utility and add hook documentation [merged]

---

📝 Issue Planner

_{Check the box below or use the @coderabbitai plan command to generate an implementation plan and prompts that you can use with your favorite coding assistant.}

• Create Plan

---

🧪 Issue enrichment is currently in open beta.

You can configure auto-planning by selecting labels in the issue_enrichment configuration.

To disable automatic issue enrichment, add the following to your .coderabbit.yaml:

issue_enrichment:
  auto_enrich:
    enabled: false

💬 Have feedback or questions? Drop into our discord!

[chiemezie1]

@chiemezie1 has applied to work on this issue as part of the Stellar Wave Program's 3rd wave.

Hi, I'd like to work on issue #126.

I'll update the bounties GraphQL query in bounties.graphql to accept filter (status, category, search), sort, and cursor-based pagination arguments, then refactor use-bounties.ts to pass UI state directly as query variables — with debouncing on search inputs to avoid excessive requests. In app/bounty/page.tsx I'll strip out all useMemo-based filtering and sorting logic and replace it with direct consumption of the server-filtered response, so UI controls update query variables instead of re-processing data client-side.

Can I be assigned?

ℹ️ Repo Maintainers: To accept this application, review their application or assign @chiemezie1 to this issue.

[zhaog100]

/attempt

[zhaog100]

/attempt

[zhaog100]

Hi! I'd like to work on this bounty.

My Plan:

• Analyze the requirements
• Implement the solution
• Submit PR within 24-48 hours

Payment Address:

• Platform: OKX
• Token: USDT (TRC20)
• Address: TGu4W5T6q4KvLAbmXmZSRpUBNRCxr2aFTP

Let's get this done! 🚀