Use Craft CMS Query Builder in React
With the React SDK, you can easily integrate Craft CMS and leverage the Craft Query Builder in your React projects.
Features
- Query builder: Easily build and execute queries directly from Next.js, enabling flexible, real-time data retrieval from Craft CMS
- Data Driven Components: Connect your data directly with your Vue components, to speed up development.
- Get Only the Data You Need: Avoid overfetching by using a custom function in the query builder to select only the fields you require.
- Pretty JSON: JSON transformers are in place to format the response for better readability.
- Support for Main Element Types: Query addresses, assets, entries and users.
- Full TypeScript Support: A fully-typed query builder for Craft CMS. Pretty cool, huh? 😎
- Multisite Helpers: Built-in helpers to support Craft Multisites.
Examples
Want to see how it works?
App.tsx
const { data, loading, error } = useCraftEntry()
.section('news')
.fields(['title']) // add more field handles if you like
.limit(3)
.all()
It is as simple as that. 🚀 The response will contain three entries from the 'news' section.
Further Resources
- Craft Query API: A Craft CMS Plugin, that powers this great stuff.
- Next SDK: A package to use the query builder in Next.js.
- JS SDK: Foundation to build a query builder with your preferred JS framework.