Cache Operations in React

import { useQueryClient } from '@tanstack/react-query'

function CacheControls() {
  const queryClient = useQueryClient()

  // Invalidate queries
  const handleInvalidate = () => {
    // Invalidate all queries
    queryClient.invalidateQueries()

    // Invalidate specific queries
    queryClient.invalidateQueries({ queryKey: ['posts'] })

    // Invalidate with exact match
    queryClient.invalidateQueries({
      queryKey: ['post', 1],
      exact: true
    })
  }

  // Prefetch data
  const handlePrefetch = () => {
    queryClient.prefetchQuery({
      queryKey: ['post', 2],
      queryFn: () => fetchPost(2),
      staleTime: 1000 * 60 * 5
    })
  }

  // Direct cache manipulation
  const handleCacheUpdate = () => {
    // Set data directly
    queryClient.setQueryData(['user'], { name: 'John' })

    // Get cached data
    const cachedUser = queryClient.getQueryData(['user'])

    // Remove from cache
    queryClient.removeQueries({ queryKey: ['old-data'] })
  }

  return (
    <div>
      <button onClick={handleInvalidate}>Invalidate</button>
      <button onClick={handlePrefetch}>Prefetch</button>
      <button onClick={handleCacheUpdate}>Update Cache</button>
    </div>
  )
}