// API returns: { data: Todo[], total: number, page: number }
// But collection needs: Todo[]

const todoCollection = createCollection(
  queryCollectionOptions({
    queryKey: ['todos'],
    queryFn: async () => {
      const response = await api.getTodos()
      // Metadata is lost here
      return response.data
    },
    getKey: (item) => item.id,
    queryClient,
  })
)

export interface QueryCollectionConfig<
  TItem extends object,
  TError = unknown,
  TQueryKey extends QueryKey = QueryKey,
  TQueryData = unknown, // New generic for raw query data
> {
  // ... existing options ...
  
  /**
   * Transform the query response to extract the items array
   * @param data - The raw response from queryFn
   * @returns The array of items for the collection
   */
  select?: (data: TQueryData) => Array<TItem>
}

interface PaginatedResponse<T> {
  data: T[]
  total: number
  page: number
  pageSize: number
  hasMore: boolean
}

const todoCollection = createCollection(
  queryCollectionOptions({
    queryKey: ['todos', { page: 1 }],
    queryFn: async () => {
      // Returns PaginatedResponse<Todo>
      return api.getTodos({ page: 1, pageSize: 100 })
    },
    select: (response) => response.data, // Extract just the items
    getKey: (item) => item.id,
    queryClient,
  })
)

// The full response is still cached by TanStack Query
// Can access it via queryClient if needed:
const fullResponse = queryClient.getQueryData<PaginatedResponse<Todo>>(['todos', { page: 1 }])
console.log(`Total items: ${fullResponse?.total}`)

interface GraphQLResponse<T> {
  data: T
  errors?: Array<{ message: string }>
}

interface TodosQuery {
  todos: {
    edges: Array<{ node: Todo }>
    pageInfo: { hasNextPage: boolean }
  }
}

const todoCollection = createCollection(
  queryCollectionOptions({
    queryKey: ['todos-graphql'],
    queryFn: async () => {
      return graphqlClient.request<GraphQLResponse<TodosQuery>>(TODOS_QUERY)
    },
    select: (response) => {
      // Extract and flatten the nodes
      return response.data.todos.edges.map(edge => edge.node)
    },
    getKey: (item) => item.id,
    queryClient,
  })
)

interface ApiResponse<T> {
  result: T
  metadata: {
    timestamp: string
    version: string
    requestId: string
  }
}

const configCollection = createCollection(
  queryCollectionOptions({
    queryKey: ['config'],
    queryFn: async (): Promise<ApiResponse<ConfigItem[]>> => {
      return api.getConfig()
    },
    select: (response) => response.result,
    getKey: (item) => item.key,
    queryClient,
    
    // Can still access metadata in onUpdate
    onUpdate: async ({ transaction }) => {
      const response = await api.updateConfig(changes)
      
      // Log metadata for debugging
      console.log('Update requestId:', response.metadata.requestId)
      
      return response
    }
  })
)

const actualUnsubscribeFn = localObserver.subscribe((result) => {
  if (result.isSuccess) {
    // If select is provided, use it to extract items
    const rawData = result.data
    const newItemsArray = config.select 
      ? config.select(rawData)
      : rawData
    
    // Continue with existing sync logic...
    if (\!Array.isArray(newItemsArray)) {
      console.error('[QueryCollection] select function must return an array')
      return
    }
    
    // Rest of sync logic...
  }
})