Method render

examples/lit/basic/src/mutation.ts:86–120

()

  }

  render() {
    const query = this.todos()
    const mutation = this.addTodo()
    const items = query.data?.items ?? []

    return html`
      <main>
        <h1>Mutation Example</h1>
        <p data-testid="mutation-query-status">
          Query: <strong>${query.status}</strong>
        </p>
        <p data-testid="mutation-mutation-status">
          Mutation: <strong>${mutation.status}</strong>
        </p>

        <label for="title">Todo title</label>
        <input
          id="title"
          data-testid="mutation-input"
          .value=${this.nextTitle}
          @input=${this.onInput}
        />
        <button data-testid="mutation-add" @click=${this.submit}>
          Add Todo
        </button>

        <ul data-testid="mutation-todo-list">
          ${items.map(
            (todo) =>
              html`<li data-testid="mutation-todo-item">${todo.title}</li>`,
          )}
        </ul>
      </main>
    `
  }
}

customElements.define('mutation-example', MutationExample)