Merge pull request #105 from jdeniau/rows-as-array

use rowsAsArray for SQL raw queries
jdeniau · Jul 2, 2024 · 1030366 · 1030366
2 parents 7fe631d + 282df6e
commit 1030366
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 13 deletions.
diff --git a/src/preload/sql.ts b/src/preload/sql.ts
@@ -13,7 +13,10 @@ import { bindChannel, bindEvent } from './bindChannel';
 import { SQL_CHANNEL } from './sqlChannel';
 
 interface Sql {
-  executeQuery<T extends QueryReturnType>(query: string): QueryResult<T>;
+  executeQuery<T extends QueryReturnType>(
+    query: string,
+    rowsAsArray?: boolean
+  ): QueryResult<T>;
   closeAllConnections(): Promise<void>;
   connectionNameChanged(
     connectionSlug: string | undefined,
@@ -37,8 +40,8 @@ async function doInvokeQuery(sqlChannel: SQL_CHANNEL, ...params: unknown[]) {
 }
 
 export const sql: Sql = {
-  executeQuery: async (query) =>
-    doInvokeQuery(SQL_CHANNEL.EXECUTE_QUERY, query),
+  executeQuery: async (query, rowsAsArray) =>
+    doInvokeQuery(SQL_CHANNEL.EXECUTE_QUERY, query, rowsAsArray),
 
   getKeyColumnUsage: async (tableName) =>
     doInvokeQuery(SQL_CHANNEL.GET_KEY_COLUMN_USAGE, tableName),

diff --git a/src/renderer/component/Query/RawSqlResult/RowDataPacketResult.tsx b/src/renderer/component/Query/RawSqlResult/RowDataPacketResult.tsx
@@ -12,6 +12,7 @@ import TableGrid from '../../TableGrid';
 import SqlErrorComponent from '../SqlErrorComponent';
 
 type Props = {
+  rowsAsArray: boolean;
   fetcher: Fetcher<
     | {
         result: Awaited<QueryResult>;
@@ -24,7 +25,7 @@ type Props = {
   >;
 };
 
-export default function RawSqlResult({ fetcher }: Props) {
+export default function RawSqlResult({ fetcher, rowsAsArray = false }: Props) {
   const { t } = useTranslation();
   const { data, state } = fetcher;
 
@@ -51,6 +52,7 @@ export default function RawSqlResult({ fetcher }: Props) {
         <TableGrid
           result={result[0]}
           fields={result[1]}
+          rowsAsArray={rowsAsArray}
           title={() => t('rawSql.result.title')}
         />
       )}

diff --git a/src/renderer/component/TableGrid.tsx b/src/renderer/component/TableGrid.tsx
@@ -6,6 +6,7 @@ import ForeignKeyLink from './ForeignKeyLink';
 import { useTableHeight } from './TableLayout/useTableHeight';
 
 interface TableGridProps<R extends RowDataPacket> {
+  rowsAsArray?: boolean;
   result: null | R[];
   fields: null | FieldPacket[];
   primaryKeys?: Array<string>;
@@ -17,6 +18,7 @@ function TableGrid<Row extends RowDataPacket>({
   result,
   primaryKeys,
   title,
+  rowsAsArray = false,
 }: TableGridProps<Row>): ReactElement {
   const [yTableScroll, resizeRef] = useTableHeight();
 
@@ -26,9 +28,9 @@ function TableGrid<Row extends RowDataPacket>({
         title={title}
         bordered
         // the header, contains the column names
-        columns={fields?.map((field) => ({
+        columns={fields?.map((field, i) => ({
           title: field.name,
-          dataIndex: field.name,
+          dataIndex: rowsAsArray ? i : field.name,
           key: field.name,
 
           // add "…" to the end of the cell if the content is too long

diff --git a/src/renderer/routes/sql.$connectionSlug.tsx b/src/renderer/routes/sql.$connectionSlug.tsx
@@ -37,7 +37,7 @@ export async function action({
 
   try {
     await window.sql.executeQuery(`USE ${databaseName};`);
-    const result = await window.sql.executeQuery(query);
+    const result = await window.sql.executeQuery(query, true);
 
     return { result };
   } catch (error) {
@@ -87,7 +87,7 @@ export default function SqlPage() {
         </Button>
       </Form>
 
-      <RawSqlResult fetcher={fetcher} />
+      <RawSqlResult fetcher={fetcher} rowsAsArray />
     </Flex>
   );
 }
diff --git a/src/sql/index.ts b/src/sql/index.ts
@@ -123,12 +123,17 @@ class ConnectionStack {
   }
 
   async executeQueryAndRetry<T extends QueryReturnType = QueryReturnType>(
-    query: string
+    query: string,
+    rowsAsArray = false
   ): QueryResultOrError<T> {
     invariant(this.#currentConnectionSlug, 'Connection slug is required');
 
     try {
-      return this.executeQuery<T>(this.#currentConnectionSlug, query);
+      return this.executeQuery<T>(
+        this.#currentConnectionSlug,
+        query,
+        rowsAsArray
+      );
     } catch (error) {
       const message = error instanceof Error ? error.message : error;
 
@@ -139,7 +144,11 @@ class ConnectionStack {
         // retry once
         this.#connections.delete(this.#currentConnectionSlug);
 
-        return this.executeQuery<T>(this.#currentConnectionSlug, query);
+        return this.executeQuery<T>(
+          this.#currentConnectionSlug,
+          query,
+          rowsAsArray
+        );
       }
 
       throw error;
@@ -148,14 +157,18 @@ class ConnectionStack {
 
   async executeQuery<T extends QueryReturnType = QueryReturnType>(
     connectionSlug: string,
-    query: string
+    query: string,
+    rowsAsArray = false
   ): QueryResultOrError<T> {
     const connection = await this.#getConnection(connectionSlug);
 
     log.debug(`Execute query on "${connectionSlug}": "${query}"`);
 
     try {
-      return { result: await connection.query(query), error: undefined };
+      return {
+        result: await connection.query({ sql: query, rowsAsArray }),
+        error: undefined,
+      };
     } catch (error) {
       return { result: undefined, error: encodeError(error) };
     }