Real-Time Feed

<script setup lang="ts">
import { api } from '~~/convex/_generated/api'

const message = ref('')

const { results, status, loadMore, isLoading } = await useConvexPaginatedQuery(
  api.messages.listPaginated,
  {},
  {
    initialNumItems: 20,
  },
)

const { execute: sendMessage, pending } = useConvexMutation(api.messages.send, {
  optimisticUpdate: (localStore, args) => {
    insertAtTop({
      query: api.messages.listPaginated,
      store: localStore,
      item: {
        _id: crypto.randomUUID(),
        _creationTime: Date.now(),
        text: args.text,
        authorName: 'You',
      },
    })
  },
})

async function submit() {
  if (!message.value.trim()) return
  await sendMessage({ text: message.value })
  message.value = ''
}
</script>