What it does
Refine provides headless building blocks for data fetching, routing, forms, authentication, and access control. Its providers connect those hooks to different backends and UI libraries.
Why it’s interesting
Separating data operations from presentation makes backend and design-system choices easier to change. Provider interfaces show how adapters hide API differences.
Real-world use case
Prototype a support dashboard with a paginated ticket list and edit form.
What I can learn
- 01
Headless component architecture
Separate data fetching, caching, forms, and access rules from presentation so the same business logic can power different design systems.
- 02
Provider adapters for list, read, create, and update operations
See how a shared provider contract adapts REST, GraphQL, or other backends to consistent list, read, create, and update operations.
- 03
Query caching and invalidation across mutations
Follow how query keys keep server data reusable and how mutations refresh affected views without stale results.
One thing to explore
Data and hook packages
Follow the packages implementation and connect it to the concepts above.
Explore the source (opens in a new tab)10-Minute Challenge
Inspect a Refine app scaffold
Before you start: Node.js and npm; generator options can change between releases.
- Run the official project generator and select a supported React setup.
- Start the generated development server.
- Trace one generated list view back to its data provider and identify the list operation.
npm create refine-app@latest my-refine-appcd my-refine-appnpm run dev