Ontwikkel een Sanity CMS Integratie met Headless CMS Frontends
description
Met deze prompt kan ik gericht een naadloze koppeling maken tussen Sanity CMS en mijn frontend framework. Het helpt me API’s effectief te ontwerpen, data consistent te synchroniseren en beveiligingsaspecten te integreren, wat mijn ontwikkeltijd verkort en de kwaliteit verbetert.
prompt
Help me bij het ontwerpen en implementeren van een integratie tussen mijn Sanity CMS project en een headless CMS frontend framework. Mijn frontend technologie: <voer je frontend technologie in zoals React, Vue, Next.js>
Gewenste content types om te ...
try_prompt
generate_helper
disclaimerOnPageApi
tags
ai_answers
provider: openai
model: gpt-4.1-nano
Natuurlijk! Hier is een stapsgewijze gids om een integratie tussen je Sanity CMS en een React frontend te ontwerpen en te implementeren, inclusief het synchroniseren van content typen, query's, authenticatie en beveiliging.
1. Sanity CMS setup:
- Definieer je content types:
- Producten
- Artikelen
- Maak gebruik van Sanity's schema-definities om deze content types te structureren.
- Publiceer je content zodat deze beschikbaar is via de Sanity API.
2. API configuratie:
- Sanity biedt een GraphQL en een REST API. Kies voor GraphQL voor meer flexibiliteit.
- Schakel GraphQL in via het Sanity dashboard.
- Maak een GraphQL schema dat filtering en paginering ondersteunt:
```graphql
query Products($category: String, $skip: Int, $first: Int) {
allProduct(filter: {category: {eq: $category}}, skip: $skip, first: $first) {
_id
naam
prijs
categorie
}
}
query Articles($category: String, $skip: Int, $first: Int) {
allArticle(filter: {category: {eq: $category}}, skip: $skip, first: $first) {
_id
titel
inhoud
categorie
}
}
```
3. Authenticatie en beveiliging:
- Gebruik JWT tokens voor beveiligde API-verzoeken.
- Maak een API token in Sanity met beperkte rechten.
- Implementeer in je React app een authenticatie flow die de JWT token opslaat (bijvoorbeeld in localStorage).
- Voeg de JWT token toe aan je API-verzoeken via de Authorization header:
```
Authorization: Bearer <jouw_token>
```
4. React frontend implementatie:
- Gebruik een GraphQL client zoals Apollo Client of URQL.
- Stel de client in met de juiste API endpoint en headers (voor JWT).
- Maak React hooks of componenten voor:
- Fetchen van producten en artikelen, inclusief filtering op categorie en paginering.
- Bijvoorbeeld:
```javascript
const { data, loading, error, fetchMore } = useQuery(GET_PRODUCTS, {
variables: { category: selectedCategory, skip: 0, first: 10 },
});
```
- Implementeer UI controls voor:
- Categorie selectie (filteren)
- Navigatie tussen pagina's (paginering)
5. Synchronisatie en updates:
- Content wordt automatisch gesynchroniseerd via Sanity's API.
- Gebruik webhooks in Sanity om je frontend te informeren over updates (optioneel, voor real-time updates).
6. Extra tips:
- Cache resultaten om performance te verbeteren.
- Behandel foutmeldingen en loading states.
- Zorg dat je API endpoint veilig is en dat alleen geauthenticeerde gebruikers toegang hebben indien nodig.
Mocht je specifieke codevoorbeelden nodig hebben of hulp bij het opzetten van bepaalde onderdelen, laat het gerust weten!
provider: deepseek
model: deepseek-chat
Ik help je graag met het ontwerpen en implementeren van een integratie tussen Sanity CMS en React. Hier is een stapsgewijze handleiding:
## 1. Sanity CMS Setup
Eerst installeer je de Sanity client:
```bash
npm install @sanity/client
```
## 2. Sanity Client Configuratie
Maak een `sanityClient.js` bestand:
```javascript
import { createClient } from '@sanity/client'
export const sanityClient = createClient({
projectId: 'jouw-project-id',
dataset: 'production',
useCdn: false,
token: process.env.REACT_APP_SANITY_TOKEN,
apiVersion: '2023-05-03'
})
```
## 3. Environment Variables
Voeg toe aan je `.env` bestand:
```
REACT_APP_SANITY_PROJECT_ID=jouw-project-id
REACT_APP_SANITY_TOKEN=jouw-jwt-token
```
## 4. Producten Schema (Sanity)
```javascript
// product.js schema
export default {
name: 'product',
title: 'Product',
type: 'document',
fields: [
{
name: 'title',
title: 'Titel',
type: 'string'
},
{
name: 'category',
title: 'Categorie',
type: 'string'
},
{
name: 'description',
title: 'Beschrijving',
type: 'text'
},
{
name: 'price',
title: 'Prijs',
type: 'number'
}
]
}
```
## 5. Artikelen Schema (Sanity)
```javascript
// article.js schema
export default {
name: 'article',
title: 'Artikel',
type: 'document',
fields: [
{
name: 'title',
title: 'Titel',
type: 'string'
},
{
name: 'category',
title: 'Categorie',
type: 'string'
},
{
name: 'content',
title: 'Inhoud',
type: 'array',
of: [{type: 'block'}]
},
{
name: 'publishedAt',
title: 'Publicatiedatum',
type: 'datetime'
}
]
}
```
## 6. API Service Laag
Maak een `sanityService.js`:
```javascript
import { sanityClient } from './sanityClient'
export const sanityService = {
// Producten ophalen met filtering en paginering
async getProducts({ category, page = 1, limit = 10 }) {
const start = (page - 1) * limit
const end = start + limit
let query = `*[_type == "product"`
if (category) {
query += ` && category == "${category}"`
}
query += `] | order(_createdAt desc) [${start}...${end}]`
return await sanityClient.fetch(query)
},
// Artikelen ophalen met filtering en paginering
async getArticles({ category, page = 1, limit = 10 }) {
const start = (page - 1) * limit
const end = start + limit
let query = `*[_type == "article"`
if (category) {
query += ` && category == "${category}"`
}
query += `] | order(publishedAt desc) [${start}...${end}]`
return await sanityClient.fetch(query)
},
// Totaal aantal items voor paginering
async getTotalCount(type, category = null) {
let query = `count(*[_type == "${type}"`
if (category) {
query += ` && category == "${category}"`
}
query += `])`
return await sanityClient.fetch(query)
}
}
```
## 7. React Custom Hook
Maak een `useSanityData.js` hook:
```javascript
import { useState, useEffect } from 'react'
import { sanityService } from './sanityService'
export const useSanityData = (type, options = {}) => {
const [data, setData] = useState([])
const [loading, setLoading] = useState(true)
const [error, setError] = useState(null)
const [totalCount, setTotalCount] = useState(0)
useEffect(() => {
const fetchData = async () => {
try {
setLoading(true)
const [items, count] = await Promise.all([
type === 'product'
? sanityService.getProducts(options)
: sanityService.getArticles(options),
sanityService.getTotalCount(type, options.category)
])
setData(items)
setTotalCount(count)
} catch (err) {
setError(err.message)
} finally {
setLoading(false)
}
}
fetchData()
}, [type, options.category, options.page])
return { data, loading, error, totalCount }
}
```
## 8. Voorbeeld Component
```javascript
import React, { useState } from 'react'
import { useSanityData } from './hooks/useSanityData'
const ProductList = () => {
const [currentPage, setCurrentPage] = useState(1)
const [selectedCategory, setSelectedCategory] = useState('')
const { data: products, loading, error, totalCount } = useSanityData('product', {
category: selectedCategory,
page: currentPage,
limit: 10
})
if (loading) return <div>Laden...</div>
if (error) return <div>Fout: {error}</div>
return (
<div>
<select
value={selectedCategory}
onChange={(e) => setSelectedCategory(e.target.value)}
>
<option value="">Alle categorieën</option>
{/* Voeg categorie opties toe */}
</select>
{products.map(product => (
<div key={product._id}>
<h3>{product.title}</h3>
<p>{product.description}</p>
</div>
))}
{/* Paginering */}
<div>
{Array.from({ length: Math.ceil(totalCount / 10) }, (_, i) => (
<button
key={i}
onClick={() => setCurrentPage(i + 1)}
disabled={currentPage === i + 1}
>
{i + 1}
</button>
))}
</div>
</div>
)
}
export default ProductList
```
## 9. JWT Authenticatie Setup
Voor JWT authenticatie, zorg dat je:
1. JWT token in environment variables zet
2. Sanity dashboard → Settings → API → Tokens beheert
3. CORS instellingen correct configureert
## 10. Beveiliging
Voeg error handling toe:
```javascript
// Enhanced error handling
try {
const data = await sanityClient.fetch(query)
return data
} catch (error) {
if (error.statusCode === 401) {
// Token refresh logica
console.error('Authenticatie fout')
}
throw error
}
```
## Extra Tips:
1. **Caching**: Gebruik Sanity's CDN voor betere performance
2. **Image Optimization**: Gebruik `@sanity/image-url` voor images
3. **Real-time updates**: Overweeg `sanityClient.listen()` voor live updates
4. **TypeScript**: Voeg types toe voor betere developer experience
Dit is een solide basis voor je integratie. Pas de code aan naar je specifieke behoeften en schema's!