npm install @tanstack/react-query

'use client'

import { QueryClientProvider } from '@tanstack/react-query'
import { client } from './client'

export function QueryProvider({ children }: { children: React.ReactNode }) {
  return (
    <QueryClientProvider client={client.queryClient}>
      {children}
    </QueryClientProvider>
  )
}

const { data, isLoading, error } = client.query.useQuery(
  {
    collection: 'products',
    options: {
      limit: 10,
      where: { status: { equals: 'published' } },
      sort: '-createdAt',
    }
  },
  {
    // TanStack Query options (optional)
    staleTime: 5 * 60 * 1000,
    enabled: true,
  }
)

// data: T[] (docs array)

const { data: product, isLoading } = client.query.useQueryById({
  collection: 'products',
  id: 'product_id',
})

// data: T (document object)

const {
  data,
  fetchNextPage,
  hasNextPage,
  isFetchingNextPage,
} = client.query.useInfiniteQuery({
  collection: 'products',
  pageSize: 20,
})

// data.pages: T[][] (array per page)

const { mutate: create, isPending } = client.query.useCreate({
  collection: 'products',
})

create(
  { title: 'New Product', price: 10000 },
  {
    onSuccess: (data) => console.log('Created:', data.doc.id),
    onError: (error) => console.error(error),
  }
)

const { mutate: update } = client.query.useUpdate({
  collection: 'products',
})

update({ id: 'product_id', data: { title: 'Updated Product' } })

const { mutate: remove } = client.query.useRemove({
  collection: 'products',
})

remove('product_id')

// Prefetch in server components
await client.query.prefetchQuery({ collection: 'products', options: { limit: 10 } })
await client.query.prefetchQueryById({ collection: 'products', id: 'product_id' })
await client.query.prefetchInfiniteQuery({ collection: 'products', pageSize: 20 })

import { HydrationBoundary, dehydrate } from '@tanstack/react-query'

export default async function ProductsPage() {
  await client.query.prefetchQuery({
    collection: 'products',
    options: { limit: 10 }
  })

  return (
    <HydrationBoundary state={dehydrate(client.queryClient)}>
      <ProductList />
    </HydrationBoundary>
  )
}

// Invalidation
client.query.invalidateQueries('products')           // All
client.query.invalidateQueries('products', 'list')   // List only
client.query.invalidateQueries('products', 'detail') // Detail only

// Cache read/write
client.query.getQueryData('products', 'list', options)
client.query.setQueryData('products', 'detail', '123', updatedProduct)

const { data: profile, isLoading } = client.query.useCustomerMe()

// data: CustomerProfile | null

const { mutate: login, isPending } = client.query.useCustomerLogin({
  onSuccess: (data) => console.log('Logged in:', data.customer.name),
})

login({ email: 'user@example.com', password: 'password' })
// Automatically invalidates useCustomerMe cache

const { mutate: register } = client.query.useCustomerRegister()

register({ name: 'John', email: 'john@example.com', password: 'secure123' })

const { mutate: logout } = client.query.useCustomerLogout()

logout()
// Removes all customer queries from cache

client.query.invalidateCustomerQueries()  // Invalidate all customer queries
client.query.getCustomerData()            // Read cached profile
client.query.setCustomerData(profile)     // Write cached profile