useSyncFiltersToUrl() — supabase Function Reference

Architecture documentation for the useSyncFiltersToUrl() function in useFilterLifeCycle.ts from the supabase codebase.

Function typescript ContentManagement Collections calls 1 called by 1

Entity Profile

ContentManagement→ Collections→ useSyncFiltersToUrl() — supabase Function Reference

Dependency Diagram

graph TD
  b1e90d00_5319_8a17_7c2e_36f2fb1e164c["useSyncFiltersToUrl()"]
  23af4152_9acc_7969_59e9_33633b3885f0["HeaderNew()"]
  23af4152_9acc_7969_59e9_33633b3885f0 -->|calls| b1e90d00_5319_8a17_7c2e_36f2fb1e164c
  5dc0ec99_339c_ec4f_c276_4d8864518b58["filtersToUrlParams()"]
  b1e90d00_5319_8a17_7c2e_36f2fb1e164c -->|calls| 5dc0ec99_339c_ec4f_c276_4d8864518b58
  style b1e90d00_5319_8a17_7c2e_36f2fb1e164c fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/studio/components/grid/hooks/useFilterLifeCycle.ts lines 34–80

export function useSyncFiltersToUrl() {
  const snap = useTableEditorTableStateSnapshot()
  const { setParams } = useTableEditorFiltersSort()
  const timeoutRef = useRef<NodeJS.Timeout | null>(null)
  const previousFiltersRef = useRef<string>('')

  useEffect(() => {
    // Serialize filters for comparison
    const currentFiltersStr = JSON.stringify(snap.filters)

    // Only proceed if filters have actually changed
    if (currentFiltersStr === previousFiltersRef.current) {
      return
    }

    previousFiltersRef.current = currentFiltersStr

    // Clear any existing timeout
    if (timeoutRef.current) {
      clearTimeout(timeoutRef.current)
    }

    // Debounce URL updates by 500ms
    timeoutRef.current = setTimeout(() => {
      const completeFilters = snap.filters.filter((filter) => {
        const value = filter.value
        return value !== '' && value !== null && value !== undefined
      })

      // Convert filters to URL format
      const urlFilters = filtersToUrlParams(completeFilters)

      // Update URL params
      setParams((prev) => ({
        ...prev,
        filter: urlFilters,
      }))
    }, 500)

    // Cleanup on unmount or filter change
    return () => {
      if (timeoutRef.current) {
        clearTimeout(timeoutRef.current)
      }
    }
  }, [snap.filters, setParams])
}