From 9b16d45df2d25e167ae9a6d6a91f7d991ef8fc14 Mon Sep 17 00:00:00 2001
From: quacumque <quacumque@fastmail.jp>
Date: Wed, 15 Oct 2025 13:54:05 +0900
Subject: [PATCH] fix(client): pass bytes to `POST /query` properly

Failed only in browser. Added more tests to catch this
kind of error in future.

Signed-off-by: quacumque <quacumque@fastmail.jp>
---
 packages/client/api.ts                        |   4 +-
 tests/browser/cypress/e2e/main.cy.ts          |  24 +++-
 tests/browser/src/App.vue                     |   7 +-
 tests/browser/src/components/CreateDomain.vue |   4 +-
 .../browser/src/components/EventListener.vue  |  65 -----------
 tests/browser/src/components/Listener.vue     | 106 ++++++++++++++++++
 tests/browser/src/components/QueryDomains.vue |  26 +++++
 7 files changed, 163 insertions(+), 73 deletions(-)
 delete mode 100644 tests/browser/src/components/EventListener.vue
 create mode 100644 tests/browser/src/components/Listener.vue
 create mode 100644 tests/browser/src/components/QueryDomains.vue

diff --git a/packages/client/api.ts b/packages/client/api.ts
index 047ecdf6..a40a16c3 100644
--- a/packages/client/api.ts
+++ b/packages/client/api.ts
@@ -167,10 +167,12 @@ export class MainAPI {
   }
 
   public async query(query: dm.SignedQuery): Promise<dm.QueryResponse> {
+    const bytes = getCodec(dm.SignedQuery).encode(query)
     return this.http
       .getFetch()(urlJoinPath(this.http.toriiBaseURL, ENDPOINT_QUERY), {
         method: 'POST',
-        body: [getCodec(dm.SignedQuery).encode(query)],
+        // FIXME: see `transaction` method, same issue
+        body: bytes as unknown as BodyInit,
       })
       .then(handleQueryResponse)
   }
diff --git a/tests/browser/cypress/e2e/main.cy.ts b/tests/browser/cypress/e2e/main.cy.ts
index e15a3539..6ab4478c 100644
--- a/tests/browser/cypress/e2e/main.cy.ts
+++ b/tests/browser/cypress/e2e/main.cy.ts
@@ -9,7 +9,9 @@ it('Register new domain and wait until commitment', () => {
   // wait for the genesis block
   cy.get('h3').contains('Status').closest('div').contains('Blocks: 2')
 
-  cy.get('button').contains('Listen').click().contains('Stop')
+  cy.get('button').contains('Listen').click()
+  cy.get('li.active-events').contains('Events: true')
+  cy.get('li.active-blocks').contains('Blocks: true')
 
   cy.get('input').type('bob')
   cy.get('button').contains('Register domain').click()
@@ -21,10 +23,26 @@ it('Register new domain and wait until commitment', () => {
   const EXPECTED_EVENTS = 8
 
   // And all events are caught
-  cy.get('ul.events-list')
+  cy.get('ul.events')
     .children('li')
     .should('have.length', EXPECTED_EVENTS)
     .last()
-    .contains('Block')
+    .contains('Block (height=4)')
     .contains('Applied')
+
+  // And all blocks too
+  cy.get('ul.blocks')
+    .children('li')
+    .should('have.length', 4)
+    .first().contains('1')
+    .parent()
+    .last().contains('4')
+
+  cy.get('button').contains('Query domains').click()
+
+  // our registered domain appears
+  cy.get('ul.domains')
+    .children('li')
+    .should('have.length', 3)
+    .first().contains('bob')
 })
diff --git a/tests/browser/src/App.vue b/tests/browser/src/App.vue
index c1e24152..5d56c9c8 100644
--- a/tests/browser/src/App.vue
+++ b/tests/browser/src/App.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import CreateDomain from './components/CreateDomain.vue'
-import EventListener from './components/EventListener.vue'
+import Listener from './components/Listener.vue'
 import StatusChecker from './components/StatusChecker.vue'
+import QueryDomains from './components/QueryDomains.vue'
 </script>
 
 <template>
@@ -9,7 +10,9 @@ import StatusChecker from './components/StatusChecker.vue'
   <hr>
   <CreateDomain />
   <hr>
-  <EventListener />
+  <QueryDomains />
+  <hr>
+  <Listener />
 </template>
 
 <style lang="scss">
diff --git a/tests/browser/src/components/CreateDomain.vue b/tests/browser/src/components/CreateDomain.vue
index 84661ca7..c7acb429 100644
--- a/tests/browser/src/components/CreateDomain.vue
+++ b/tests/browser/src/components/CreateDomain.vue
@@ -13,7 +13,7 @@ const { state, run: registerDomain } = useTask(() =>
         dm.InstructionBox.Register.Domain({ id: new dm.Name(domainName.value), logo: null, metadata: [] }),
       ]),
     )
-    .submit({ verify: true }),
+    .submit({ verify: true })
 )
 </script>
 
@@ -25,6 +25,6 @@ const { state, run: registerDomain } = useTask(() =>
       <button @click="registerDomain()">Register domain{{ state.pending ? '...' : '' }}</button>
     </p>
 
-  {{  state  }}
+    {{ state }}
   </div>
 </template>
diff --git a/tests/browser/src/components/EventListener.vue b/tests/browser/src/components/EventListener.vue
deleted file mode 100644
index ab6182c5..00000000
--- a/tests/browser/src/components/EventListener.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-<script setup lang="ts">
-import { computed, onBeforeUnmount, shallowReactive, shallowRef } from 'vue'
-import type { SetupEventsReturn } from '@iroha/client'
-import * as datamodel from '@iroha/core/data-model'
-import { P, match } from 'ts-pattern'
-import { client } from '../client.ts'
-
-const events = shallowReactive<string[]>([])
-const currentListener = shallowRef<null | SetupEventsReturn>(null)
-const isListening = computed(() => !!currentListener.value)
-
-async function startListening() {
-  currentListener.value = await client.events({
-    filters: [
-      datamodel.EventFilterBox.Pipeline.Block({ height: null, status: null }),
-      datamodel.EventFilterBox.Pipeline.Transaction({ status: null, hash: null, blockHeight: null }),
-    ],
-  })
-
-  currentListener.value.ee.on('event', (event) => {
-    events.push(
-      match(event)
-        .returnType<string>()
-        .with(
-          { kind: 'Pipeline', value: { kind: 'Block', value: P.select() } },
-          ({ status, header }) => `Block (height=${header.height.value}): ${status.kind}`,
-        )
-        .with(
-          { kind: 'Pipeline', value: { kind: 'Transaction', value: P.select() } },
-          ({ hash, status }) => `Transaction (${hash.payload.hex().slice(0, 6)}...): ${status.kind}`,
-        )
-        .otherwise(({ kind }) => {
-          throw new Error(`This should not appear with given filters: ${kind}`)
-        }),
-    )
-  })
-}
-
-async function stopListening() {
-  await currentListener.value?.stop()
-  currentListener.value = null
-}
-
-onBeforeUnmount(stopListening)
-</script>
-
-<template>
-  <div>
-    <h3>Listening</h3>
-
-    <p>
-      <button @click="isListening ? stopListening() : startListening()">
-        {{ isListening ? 'Stop' : 'Listen' }}
-      </button>
-    </p>
-
-    <p>Events:</p>
-
-    <ul class="events-list">
-      <li v-for="(event, i) in events" :key="i">
-        {{ event }}
-      </li>
-    </ul>
-  </div>
-</template>
diff --git a/tests/browser/src/components/Listener.vue b/tests/browser/src/components/Listener.vue
new file mode 100644
index 00000000..42fd9a11
--- /dev/null
+++ b/tests/browser/src/components/Listener.vue
@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onScopeDispose, Ref, ref, shallowReactive, shallowRef, watchEffect } from 'vue'
+import type { SetupEventsReturn } from '@iroha/client'
+import * as dm from '@iroha/core/data-model'
+import { match, P } from 'ts-pattern'
+import { client } from '../client.ts'
+import { useDeferredScope, useTask, wheneverFulfilled } from '@vue-kakuyaku/core'
+
+const events = useDeferredScope<{ events: string[]; active: Ref<boolean> }>()
+const blocks = useDeferredScope<{ blocks: string[]; active: Ref<boolean> }>()
+
+function setupEvents() {
+  events.setup(() => {
+    const task = useTask(() =>
+      client.events({
+        filters: [
+          dm.EventFilterBox.Pipeline.Block({ height: null, status: null }),
+          dm.EventFilterBox.Pipeline.Transaction({ status: null, hash: null, blockHeight: null }),
+        ],
+      }), { immediate: true })
+
+    const events = shallowReactive<string[]>([])
+    const active = ref(false)
+
+    wheneverFulfilled(task.state, (listener) => {
+      active.value = true
+      listener.ee.on('event', (event) => {
+        events.push(
+          match(event)
+            .returnType<string>()
+            .with(
+              { kind: 'Pipeline', value: { kind: 'Block', value: P.select() } },
+              ({ status, header }) => `Block (height=${header.height.value}): ${status.kind}`,
+            )
+            .with(
+              { kind: 'Pipeline', value: { kind: 'Transaction', value: P.select() } },
+              ({ hash, status }) => `Transaction (${hash.payload.hex().slice(0, 6)}...): ${status.kind}`,
+            )
+            .otherwise(({ kind }) => {
+              throw new Error(`This should not appear with given filters: ${kind}`)
+            }),
+        )
+      })
+    }, { immediate: true })
+
+    onScopeDispose(() => task.state.fulfilled?.value?.stop())
+
+    return { events, active }
+  })
+}
+
+function setupBlocks() {
+  blocks.setup(() => {
+    const task = useTask(() => client.blocks(), { immediate: true })
+
+    const blocks = shallowReactive<string[]>([])
+    const active = ref(false)
+
+    wheneverFulfilled(task.state, async (listener) => {
+      active.value = true
+      for await (const block of listener.stream) {
+        blocks.push(String(block.value.payload.header.height.value))
+      }
+      active.value = false
+    })
+
+    onScopeDispose(() => task.state.fulfilled?.value?.stop())
+
+    return { blocks, active }
+  })
+}
+
+function setupListeners() {
+  setupEvents()
+  setupBlocks()
+}
+</script>
+
+<template>
+  <div>
+    <h3>Listening</h3>
+
+    <p>
+      <button @click="setupListeners()">
+        Listen
+      </button>
+
+      <ul>
+        <li class="active-events">Events: {{ events.scope.value?.expose.active.value ?? false }}</li>
+        <li class="active-blocks">Blocks: {{ blocks.scope.value?.expose.active.value ?? false }}</li>
+      </ul>
+    </p>
+
+    <ul class="events">
+      <li v-for="(item, i) in events.scope.value?.expose.events ?? []" :key="i">
+        {{ item }}
+      </li>
+    </ul>
+
+    <ul class="blocks">
+      <li v-for="(item, i) in blocks.scope.value?.expose.blocks ?? []" :key="i">
+        {{ item }}
+      </li>
+    </ul>
+  </div>
+</template>
diff --git a/tests/browser/src/components/QueryDomains.vue b/tests/browser/src/components/QueryDomains.vue
new file mode 100644
index 00000000..058ddaca
--- /dev/null
+++ b/tests/browser/src/components/QueryDomains.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useTask } from '@vue-kakuyaku/core'
+import { client } from '../client.ts'
+import * as dm from '@iroha/core/data-model'
+
+const { state, run: update } = useTask(() =>
+  client.find.domains()
+    .executeAll()
+)
+</script>
+
+<template>
+  <div>
+    <h3>Domains</h3>
+    <p>
+      <button @click="update()">Query domains</button>
+    </p>
+
+    <ul class="domains" v-if="state.fulfilled">
+      <li v-for="x in state.fulfilled.value">
+        {{ x.id.value }}
+      </li>
+    </ul>
+  </div>
+</template>