[#42] try to fix sql raydump payload view

Author: Kreezag

components/RayDumpPreview/RayTypesPreview/QueryPayload.vue

@@ -1,20 +1,22 @@
 <template>
   <div class="ray-type-query">
-    <CodeSnippet language="sql" class="event-ray__query-snippet" :code="formattedSql" />
+    <CodeSnippet
+      language="sql"
+      class="event-ray__query-snippet"
+      :code="formattedSql"
+    />
     <EventTable class="event-ray__query-table">
       <EventTableRow title="Connection name">
         {{ payload.content.connection_name }}
       </EventTableRow>
-      <EventTableRow title="Time">
-        {{ payload.content.time }}ms
-      </EventTableRow>
+      <EventTableRow title="Time"> {{ payload.content.time }}ms </EventTableRow>
     </EventTable>
   </div>
 </template>
 
 <script lang="ts">
-import {defineComponent, PropType} from "vue";
-import {RayPayload} from "~/config/types";
+import { defineComponent, PropType } from "vue";
+import { RayPayload } from "~/config/types";
 import EventTable from "~/components/EventTable/EventTable.vue";
 import EventTableRow from "~/components/EventTableRow/EventTableRow.vue";
 import CodeSnippet from "~/components/CodeSnippet/CodeSnippet.vue";
@@ -23,7 +25,7 @@ export default defineComponent({
   components: {
     EventTableRow,
     EventTable,
-    CodeSnippet
+    CodeSnippet,
   },
   props: {
     payload: {
@@ -33,10 +35,11 @@ export default defineComponent({
   },
   computed: {
     formattedSql() {
-      return this.payload.content.bindings.reduce((sql, currentValue) => {
-        return sql.replace(/\?/, `'${currentValue}'`)
-      }, this.payload.content.sql)
-    }
+      return (this.payload.content?.bindings || []).reduce(
+        (result, binding) => result.replace(/\?/, `'${binding}'`),
+        this.payload.content?.sql || ""
+      );
+    },
   },
 });
 </script>