Uncaught QueryCompilationError: Unknown expression type: undefined

'use client';

import { createCollection } from '@tanstack/react-db';
import { localOnlyCollectionOptions } from '@tanstack/react-db';
import { useLiveQuery } from '@tanstack/react-db';
import { z } from 'zod';

// Define schema
const modalStateSchema = z.object({
  id: z.string(),
  isOpen: z.boolean(),
  data: z.any().optional(),
});

type ModalState = z.infer<typeof modalStateSchema>;

// Create collection
export const modalStateCollection = createCollection(
  localOnlyCollectionOptions({
    id: 'modal-state',
    getKey: (item) => item.id,
    schema: modalStateSchema,
    initialData: [
      { id: 'user-profile', isOpen: false },
      { id: 'settings', isOpen: false },
      { id: 'confirm-delete', isOpen: false },
    ],
  })
);

export default function Home() {
  const { data: modals } = useLiveQuery((q) =>
    q
      .from({ modal: modalStateCollection })
      .where(({ modal }) => modal.id === 'user-profile')
  );

  const modalState = modals[0];

  const openModal = (data?: any) => {
    modalStateCollection.update('user-profile', (draft) => {
      draft.isOpen = true;
      draft.data = data;
    });
  };

  const closeModal = () => {
    modalStateCollection.update('user-profile', (draft) => {
      draft.isOpen = false;
      draft.data = undefined;
    });
  };

  if (!modalState?.isOpen) return null;

  return (
    <div className="modal">
      <h2>User Profile</h2>
      <pre>{JSON.stringify(modalState.data, null, 2)}</pre>
      <button onClick={closeModal}>Close</button>
    </div>
  );
}

'use client';

import { createCollection } from '@tanstack/react-db';
import { localOnlyCollectionOptions } from '@tanstack/react-db';
import { useLiveQuery } from '@tanstack/react-db';
import { z } from 'zod';

// Define schema
const modalStateSchema = z.object({
  id: z.string(),
  isOpen: z.boolean(),
  data: z.any().optional(),
});

type ModalState = z.infer<typeof modalStateSchema>;

// Create collection
export const modalStateCollection = createCollection(
  localOnlyCollectionOptions({
    id: 'modal-state',
    getKey: (item) => item.id,
    schema: modalStateSchema,
    initialData: [
      { id: 'user-profile', isOpen: false },
      { id: 'settings', isOpen: false },
      { id: 'confirm-delete', isOpen: false },
    ],
  })
);

export default function Home() {
  const { data: modals } = useLiveQuery((q) =>
    q
      .from({ modal: modalStateCollection })
      .where(({ modal }) => modal.id === 'user-profile')
  );

  const modalState = modals[0];

  const openModal = (data?: any) => {
    modalStateCollection.update('user-profile', (draft) => {
      draft.isOpen = true;
      draft.data = data;
    });
  };

  const closeModal = () => {
    modalStateCollection.update('user-profile', (draft) => {
      draft.isOpen = false;
      draft.data = undefined;
    });
  };

  if (!modalState?.isOpen) return null;

  return (
    <div className="modal">
      <h2>User Profile</h2>
      <pre>{JSON.stringify(modalState.data, null, 2)}</pre>
      <button onClick={closeModal}>Close</button>
    </div>
  );
}