Basic Query in React

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

// Basic query
function Profile() {
  const { data, error, isLoading } = useQuery({
    queryKey: ['profile'],
    queryFn: fetchProfile
  })

  if (isLoading) return 'Loading...'
  if (error) return 'An error occurred: ' + error.message

  return <div>{data.name}</div>
}

// Query with parameters
function User({ userId }) {
  const { data, error, isLoading } = useQuery({
    queryKey: ['user', userId],
    queryFn: () => fetchUser(userId),
    enabled: !!userId // Only run if userId exists
  })

  return <div>{data?.name}</div>
}