> ## Documentation Index > Fetch the complete documentation index at: https://private-7c7dfe99-fix-nav-issues.mintlify.site/llms.txt > Use this file to discover all available pages before exploring further. # ClickHouse 생태계 둘러보기 > 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

${`${integration.integration_title$

; } 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://staging-cms.clickhouse.com${item.logo.url}` : '', integration_logo_dark: item.logo_dark?.url ? `https://staging-cms.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 base = typeof window !== 'undefined' && window.location.pathname.startsWith('/docs') ? '/docs' : ''; const fallbackResponse = await fetch(base + '/assets/integrations-fallback.json', { cache: 'force-cache' }); if (fallbackResponse.ok) { const fallbackData = await fallbackResponse.json(); const transformedData = transformCMSData(fallbackData.data || []); setIntegrations(transformedData); cacheIntegrations(transformedData); setError(null); setLoading(false); console.log('Loaded fallback integrations data'); } else { console.warn('Fallback file not available, will try CMS only'); } } catch (fallbackErr) { console.error('Failed to load fallback integrations data:', fallbackErr); } 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('CMS request was aborted due to timeout, using fallback data'); } else { console.error('Error loading integrations from CMS:', cmsErr.message); } } if (integrations.length === 0) { setError('Unable to load integrations. Please try refreshing the 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

Loading integrations...

; } if (error) { return

Failed to load integrations: {error}

Please try refreshing the page.

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

No integrations found.

; } return <>