> ## Documentation Index > Fetch the complete documentation index at: https://clickhouse.com/docs/llms.txt > Use this file to discover all available pages before exploring further. # Intégrations > Intégrations avec ClickHouse export const IntegrationGrid = () => { function useDarkMode() { const [isDark, setIsDark] = useState(false); useEffect(() => { const checkDarkMode = () => { const theme = document.documentElement.getAttribute("data-theme") || document.body.getAttribute("data-theme"); if (theme === "dark") { setIsDark(true); return; } if (theme === "light") { setIsDark(false); return; } if (document.documentElement.classList.contains("dark") || document.body.classList.contains("dark")) { setIsDark(true); return; } setIsDark(window.matchMedia("(prefers-color-scheme: dark)").matches); }; checkDarkMode(); const observer = new MutationObserver(checkDarkMode); observer.observe(document.documentElement, { attributes: true, attributeFilter: ["data-theme", "class"] }); observer.observe(document.body, { attributes: true, attributeFilter: ["data-theme", "class"] }); const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)"); const handleChange = () => checkDarkMode(); mediaQuery.addEventListener("change", handleChange); return () => { observer.disconnect(); mediaQuery.removeEventListener("change", handleChange); }; }, []); return isDark; } function getTierIcon(tier, withMargin = false) { const style = withMargin ? { marginRight: "6px" } : {}; switch (tier) { case "core": return ; case "partner": return ; case "community": return ; default: return null; } } function getProperCapitalization(text) { const specialCases = { "ai/ml": "AI/ML", clickpipes: "ClickPipes", "data ingestion": "Data ingestion", "data integration": "Data integration", "data management": "Data management", "data visualization": "Data visualization", "deployment method": "Deployment method", "language client": "Language client", "security governance": "Security governance", "sql client": "SQL client" }; const lowerText = text.toLowerCase(); if (specialCases[lowerText]) { return specialCases[lowerText]; } return text.split(" ").map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(" "); } function getSectionDescription(type) { const descriptions = { ClickPipes: "ClickPipes is an integration engine that makes ingesting massive volumes of data from a diverse set of sources as simple as clicking a few buttons.", "Data ingestion": "Streamline your data pipelines with ClickHouse! Seamless integrations ensure efficient ingestion, optimizing real-time analytics.", "Data visualization": "Illuminate your data stories! ClickHouse integrations enhance visualization, making insights more vivid & actionable.", "SQL client": "Access and query ClickHouse databases using familiar SQL client tools and interfaces.", "Language client": "Code in your comfort zone! ClickHouse's language client integrations make data access fluent across multiple programming languages.", "AI/ML": "Leverage ClickHouse for machine learning and AI workloads with integrated ML tools and frameworks.", "Data management": "Manage, monitor, and optimize your ClickHouse data with specialized management tools.", "Data integration": "Integrate ClickHouse with your existing data infrastructure and workflows.", "Security governance": "Implement security and governance frameworks for your ClickHouse environment." }; return descriptions[type] || "Integrate ClickHouse with specialized tools and services."; } function renderIntegrationCard(integration, isDark, key) { const getNavigationLink = (docsLink, slug) => { if (!docsLink) { return slug; } const clickhouseDocsMatch = docsLink.match(/https:\/\/clickhouse\.com\/docs\/(.+)/); if (clickhouseDocsMatch) { return `/${clickhouseDocsMatch[1]}`; } return docsLink; }; const getLogoSrc = () => { if (!isDark && integration.integration_logo_dark) { return integration.integration_logo_dark; } return integration.integration_logo; }; const linkTo = getNavigationLink(integration.docsLink, integration.slug); const isExternalLink = linkTo.startsWith("http") && !linkTo.includes("clickhouse.com/docs"); return

; } function renderIntegrationCards(integrations, isDark) { return

{integrations.map((integration, index) => renderIntegrationCard(integration, isDark, `${integration.slug}-${integration.integration_title || index}`))}

; } function transformCMSData(cmsData) { const categoryMapping = { AI_ML: "AI/ML", CLICKPIPES: "ClickPipes", DATA_INGESTION: "Data ingestion", DATA_INTEGRATION: "Data integration", DATA_MANAGEMENT: "Data management", DATA_VISUALIZATION: "Data visualization", LANGUAGE_CLIENT: "Language client", SECURITY_GOVERNANCE: "Security governance", SQL_CLIENT: "SQL client" }; return cmsData.map(item => { const integrationTypes = item.category ? [categoryMapping[item.category] || item.category] : []; const integrationTier = item.supportLevel?.toLowerCase() || ""; return { slug: item.slug.startsWith("/") ? item.slug : `/${item.slug}`, docsLink: item.docsLink, integration_logo: item.logo?.url ? `https://clickhouse.com${item.logo.url}` : "", integration_logo_dark: item.logo_dark?.url ? `https://clickhouse.com${item.logo_dark.url}` : undefined, integration_type: integrationTypes, integration_title: item.name, integration_tier: integrationTier }; }); } function useCMSIntegrations() { const cached = typeof window !== "undefined" && window.__chIntegrationsCache || null; const [integrations, setIntegrations] = useState(cached || []); const [loading, setLoading] = useState(!cached); const [error, setError] = useState(null); useEffect(() => { const cacheIntegrations = data => { if (typeof window !== "undefined") window.__chIntegrationsCache = data; }; const fetchIntegrations = async () => { try { const controller = new AbortController(); const timeoutId = setTimeout(() => { controller.abort(); console.log("CMS request timed out after 8 seconds"); }, 8000); const response = await fetch("https://staging-cms.clickhouse.com/api/integrations?fields[0]=name&fields[1]=slug&fields[2]=category&fields[3]=supportLevel&fields[4]=docsLink&populate[logo][fields][0]=url&populate[logo_dark][fields][0]=url&pagination[pageSize]=500", { signal: controller.signal, headers: { Accept: "application/json" } }); clearTimeout(timeoutId); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const data = await response.json(); const transformedData = transformCMSData(data.data || []); setIntegrations(transformedData); cacheIntegrations(transformedData); setError(null); console.log("Successfully updated with fresh CMS data"); } catch (cmsErr) { if (cmsErr instanceof Error) { if (cmsErr.name === "AbortError") { console.log("La requête CMS a été annulée en raison d'un délai d'attente dépassé"); } else { console.error("Error loading integrations from CMS:", cmsErr.message); } } if (integrations.length === 0) { setError("Impossible de charger les intégrations. Veuillez actualiser la page."); } } finally { setLoading(false); } }; fetchIntegrations(); }, []); return { integrations, loading, error }; } const {integrations, loading, error} = useCMSIntegrations(); const isDark = useDarkMode(); const [searchTerm, setSearchTerm] = useState(() => { if (typeof window !== "undefined") { return localStorage.getItem("integrations-search") || ""; } return ""; }); const [selectedFilter, setSelectedFilter] = useState(() => { if (typeof window !== "undefined") { return localStorage.getItem("integrations-filter") || "All"; } return "All"; }); const [selectedTier, setSelectedTier] = useState(() => { if (typeof window !== "undefined") { return localStorage.getItem("integrations-tier") || "All"; } return "All"; }); useEffect(() => { if (typeof window !== "undefined") { localStorage.setItem("integrations-search", searchTerm); } }, [searchTerm]); useEffect(() => { if (typeof window !== "undefined") { localStorage.setItem("integrations-filter", selectedFilter); } }, [selectedFilter]); useEffect(() => { if (typeof window !== "undefined") { localStorage.setItem("integrations-tier", selectedTier); } }, [selectedTier]); const integrationTypes = useMemo(() => { const types = new Set(); integrations.forEach(integration => { integration.integration_type.forEach(type => { types.add(type); }); }); const sortOrder = ["Language client", "ClickPipes", "Data ingestion", "Data visualization", "AI/ML", "Data integration", "Data management", "Security governance", "SQL client"]; return Array.from(types).sort((a, b) => { const indexA = sortOrder.indexOf(a); const indexB = sortOrder.indexOf(b); if (indexA !== -1 && indexB !== -1) { return indexA - indexB; } if (indexA !== -1) return -1; if (indexB !== -1) return 1; return a.localeCompare(b); }); }, [integrations]); const integrationTiers = useMemo(() => { const tiers = new Set(); integrations.forEach(integration => { if (integration.integration_tier) { tiers.add(integration.integration_tier); } }); const tierSortOrder = ["core", "partner", "community"]; return Array.from(tiers).sort((a, b) => { const indexA = tierSortOrder.indexOf(a); const indexB = tierSortOrder.indexOf(b); if (indexA !== -1 && indexB !== -1) { return indexA - indexB; } if (indexA !== -1) return -1; if (indexB !== -1) return 1; return a.localeCompare(b); }); }, [integrations]); const filteredIntegrations = useMemo(() => { const filtered = integrations.filter(integration => { const matchesSearch = integration.integration_title?.toLowerCase().includes(searchTerm.toLowerCase()) || integration.slug.toLowerCase().includes(searchTerm.toLowerCase()); const matchesFilter = selectedFilter === "All" || integration.integration_type.some(type => type === selectedFilter); const matchesTier = selectedTier === "All" || integration.integration_tier === selectedTier; return matchesSearch && matchesFilter && matchesTier; }); return filtered.sort((a, b) => { const tierOrder = ["core", "partner", "community", ""]; const tierA = a.integration_tier || ""; const tierB = b.integration_tier || ""; const tierIndexA = tierOrder.indexOf(tierA); const tierIndexB = tierOrder.indexOf(tierB); if (tierIndexA !== tierIndexB) { return tierIndexA - tierIndexB; } return (a.integration_title || "").localeCompare(b.integration_title || ""); }); }, [integrations, searchTerm, selectedFilter, selectedTier]); const groupedIntegrations = useMemo(() => { const grouped = new Map(); filteredIntegrations.forEach(integration => { integration.integration_type.forEach(type => { if (!grouped.has(type)) { grouped.set(type, []); } if (!grouped.get(type)?.find(item => item.slug === integration.slug && item.integration_title === integration.integration_title)) { grouped.get(type)?.push(integration); } }); }); grouped.forEach(integrationsArray => { integrationsArray.sort((a, b) => { const tierOrder = ["core", "partner", "community", ""]; const tierA = a.integration_tier || ""; const tierB = b.integration_tier || ""; const tierIndexA = tierOrder.indexOf(tierA); const tierIndexB = tierOrder.indexOf(tierB); if (tierIndexA !== tierIndexB) { return tierIndexA - tierIndexB; } return (a.integration_title || "").localeCompare(b.integration_title || ""); }); }); return grouped; }, [filteredIntegrations]); if (loading) { return

Chargement des intégrations...

; } if (error) { return

Échec du chargement des intégrations : {error}

Veuillez actualiser la page.

; } if (integrations.length === 0) { return

Aucune intégration trouvée.

; } return <>