...
```
--------------------------------
### Three.js Globe Component NaN Error Handling (TypeScript)
Source: https://github.com/strapi/launchpad/blob/main/next/migration-log.md
Implements client-side only rendering and robust error handling for a Three.js Globe component to prevent BufferGeometry NaN errors. It includes coordinate validation, safe accessor functions, and try-catch blocks for animations, ensuring stability.
```typescript
import React, { useState, useEffect } from 'react';
const GlobeComponent = ({ data }) => {
const [isMounted, setIsMounted] = useState(false);
useEffect(() => {
setIsMounted(true);
}, []);
if (!isMounted) {
return null; // Render nothing on the server
}
// Function to safely access arc data, with NaN validation
const safeGetArcData = (arc) => {
if (!arc || typeof arc.startLat === 'undefined' || typeof arc.endLat === 'undefined') {
console.warn('Invalid arc data:', arc);
return null;
}
// Further validation for coordinates...
return arc;
};
// Function to handle animations with try-catch
const animateGlobe = () => {
try {
// Animation logic here...
} catch (error) {
console.error('Animation error:', error);
}
};
// ... rest of the component logic using safeGetArcData and animateGlobe
return (
{/* Globe rendering logic */}
);
};
export default GlobeComponent;
```
--------------------------------
### Fetch Individual Documents by ID
Source: https://context7.com/strapi/launchpad/llms.txt
Retrieves a single document from a collection using its unique documentId. Supports deep population of relations for detailed views.
```typescript
import { fetchDocument } from '@/lib/strapi';
const article = await fetchDocument
('articles', 'abc123xyz', {
populate: ['image', 'categories', 'dynamic_zone']
});
const product = await fetchDocument('products', 'prod456', {
locale: 'en',
populate: {
images: true,
plans: {
populate: ['features']
},
categories: true,
perks: true
}
});
```
--------------------------------
### Revalidate Cache with Strapi Webhooks
Source: https://context7.com/strapi/launchpad/llms.txt
Provides programmatic cache invalidation for frontend content. Typically used within webhook handlers to ensure the site reflects the latest updates from the CMS.
```typescript
import { revalidateContent } from '@/lib/strapi';
revalidateContent('collection', 'articles');
revalidateContent('document', 'articles', 'abc123xyz');
revalidateContent('single', 'global');
export async function POST(request: Request) {
const { model, entry } = await request.json();
if (model === 'article') {
revalidateContent('document', 'articles', entry.documentId);
revalidateContent('collection', 'articles');
}
return new Response('Revalidated', { status: 200 });
}
```
--------------------------------
### React Key Prop Fix (TypeScript)
Source: https://github.com/strapi/launchpad/blob/main/next/migration-log.md
Resolves React key prop warnings by replacing mapped fragments with keyed div elements. This ensures each element in a list has a unique and stable identifier for efficient updates.
```typescript
// Example usage within a mapped list:
//
// {/* Form input elements */}
//
```
--------------------------------
### Hydration Mismatch Fix with Deterministic IDs (TypeScript)
Source: https://github.com/strapi/launchpad/blob/main/next/migration-log.md
Replaces `useId()` and `Math.random()` with deterministic IDs to resolve hydration mismatches in React 19. This ensures consistent ID generation between server and client rendering.
```typescript
// Example usage within a loop or mapped component:
// const id = `circle-line-${index}`;
// ...
```
=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.