<article><cami-todo-list-server></cami-todo-list-server></article><scriptsrc="./build/cami.cdn.js"></script><!-- CDN version below --><!-- <script src="https://unpkg.com/cami@latest/build/cami.cdn.js"></script> --><scripttype="module">const{html,ReactiveElement,http}=cami;classTodoListElementextendsReactiveElement{todos=this.query({queryKey:['todos'],queryFn:()=>{returnfetch("https://api.camijs.com/todos?_limit=5").then(res=>res.json())},staleTime:1000*60*5})addTodo=this.mutation({mutationFn:(newTodo)=>{returnfetch("https://api.camijs.com/todos",{method:"POST",body:JSON.stringify(newTodo),headers:{"Content-type":"application/json; charset=UTF-8"}}).then(res=>{document.querySelector('.note').innerHTML='Todo was dispatched to the server. Since we are using a mock API in this demo, this wont work. In your development environment, you would need to persist the changes to your database. Once you do that, query() will refetch the data from the server and will update the task list as you would expect.';returnres.json();})}});deleteTodo=this.mutation({mutationFn:(todo)=>{returnfetch(`https://api.camijs.com/todos/${todo.id}`,{method:"DELETE"}).then(res=>{document.querySelector('.note').innerHTML='Todo was deleted from the server. Since we are using a mock API in this demo, this wont work. In your development environment, you would need to persist the changes to your database. Once you do that, query() will refetch the data from the server and will update the task list as you would expect.';returnres.json();})}});template(){if(this.addTodo.status==="pending"){returnhtml`          <li class="md-opacity-50">            Adding new todo...          </li>        `;}if(this.deleteTodo.status==="pending"){returnhtml`          <li class="md-opacity-50">            Deleting todo...          </li>        `;}if(this.todos.data){returnhtml`          <input class="newTodo md-input" type="text" />          <button class="md-button" @click=${()=>{constinput=document.querySelector('.newTodo');constnewTodoTitle=input.value;input.value='';// Clear the input after getting the valuethis.addTodo.mutate({title:newTodoTitle,completed:false})          }}>Add</button>          <ul>${this.todos.data.slice().reverse().map(todo=>html`              <li class="md-list-item">${todo.title}                <button class="md-button" @click=${()=>this.deleteTodo.mutate(todo)}>Delete</button>              </li>            `)}          </ul>        `;}if(this.todos.status==="pending"){returnhtml`<div class="md-loading">Loading...</div>`;}if(this.todos.status==="error"){returnhtml`<div class="md-error">Error:${this.todos.errorDetails.message}</div>`;}if(this.addTodo.status==="error"){returnhtml`<div class="md-error">Error:${this.addTodo.errorDetails.message}</div>`;}}}customElements.define('cami-todo-list-server',TodoListElement);</script>