fix(client): pass bytes to POST /query properly (#265)

Author: 0x009922

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)
   }

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')
 })

tests/browser/src/App.vue

@@ -1,15 +1,18 @@
 <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>
   <StatusChecker />
   <hr>
   <CreateDomain />
   <hr>
-  <EventListener />
+  <QueryDomains />
+  <hr>
+  <Listener />
 </template>
 
 <style lang="scss">

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>

tests/browser/src/components/EventListener.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>

tests/browser/src/components/Listener.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>