Frontend Performance45-70 min
API Overfetching and Request Deduplication
Use query keys, caching, pagination, and selective fields so frontend pages request only the data they need.
React QuerySWRRESTGraphQL
Prerequisites
- A page with repeated API requests or slow data loading.
- Access to the frontend data-fetching layer.
- Backend support for pagination or field selection when needed.
1
Plan the implementation
Start by choosing the exact page, route, API, or deployment surface you want to improve. A narrow target makes the implementation measurable and easier to verify.
- Write down the current behavior and the user-facing problem it creates.
- Pick one measurable success signal such as bundle size, latency, error rate, security coverage, or UI responsiveness.
- Identify the files, routes, providers, and environment variables involved.
- Create a rollback note before changing production-sensitive configuration.
2
Set up the required tools
Install or configure only the tools needed for this implementation. Keep config close to the feature so future developers can find the moving parts quickly.
Implementation snippet
npm install @tanstack/react-queryChecklist
- Dependencies are added to the correct workspace package.
- Environment variables are documented in `.env.example` when needed.
- Local development still starts without production-only secrets.
- The change is small enough to review in one pull request.
3
Implement the core pattern
- Open the Network tab and count duplicate requests during first render.
- Move repeated fetch logic into one query hook with a stable query key.
- Add pagination, filtering, or field selection to avoid oversized responses.
- Set a sensible `staleTime` for data that does not change every second.
- Invalidate or refetch only the affected query after mutations.
Implementation snippet
const usersQuery = useQuery({
queryKey: ["users", page, search],
queryFn: () => api.getUsers({ page, search, limit: 25 }),
staleTime: 60_000,
});4
Handle edge cases
Checklist
- The same component tree does not fire duplicate identical requests.
- Pagination is used for large tables and feeds.
- Mutations update or invalidate the correct cached data.
- Empty, loading, success, and error states all render correctly.
5
Verify before production
- Run the app locally and test the normal success path.
- Test one failure path, one empty state, and one slow-network or retry path.
- Run the project build and any related unit or integration tests.
- Check browser console, server logs, and network responses for hidden warnings.
- Document the final behavior, commands used, and any follow-up work.