@malloy-publisher/sdk 0.0.41 → 0.0.43

package/openapitools.json

@@ -2,6 +2,6 @@
    "$schema": "./node_modules/@openapitools/openapi-generator-cli/config.schema.json",
    "spaces": 2,
    "generator-cli": {
-      "version": "7.8.0"
+      "version": "7.13.0"
    }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
    "name": "@malloy-publisher/sdk",
    "description": "Malloy Publisher SDK",
-   "version": "0.0.41",
+   "version": "0.0.43",
    "type": "module",
    "main": "dist/index.cjs.js",
    "module": "dist/index.es.js",
@@ -49,7 +49,7 @@
       "markdown-to-jsx": "^7.7.6"
    },
    "devDependencies": {
-      "@openapitools/openapi-generator-cli": "^2.13.5",
+      "@openapitools/openapi-generator-cli": "^2.20.2",
       "@types/k6": "^1.0.2",
       "@types/react": "^19.1.7",
       "@types/react-dom": "^19.1.6",

package/src/components/ApiErrorDisplay.tsx

@@ -14,6 +14,7 @@ interface ApiErrorDisplayProps {
 }
 
 export function ApiErrorDisplay({ error, context }: ApiErrorDisplayProps) {
+   const errorMessage = error.data?.message || "Unknown Error";
    return (
       <>
          {context && (
@@ -21,18 +22,17 @@ export function ApiErrorDisplay({ error, context }: ApiErrorDisplayProps) {
                {context}
             </Typography>
          )}
-         {error.data && (
-            <pre
-               style={{
-                  whiteSpace: "pre-wrap",
-                  color: "red",
-                  padding: "10px",
-                  margin: "auto",
-               }}
-            >
-               {error.data.message}
-            </pre>
-         )}
+
+         <pre
+            style={{
+               whiteSpace: "pre-wrap",
+               color: "red",
+               padding: "10px",
+               margin: "auto",
+            }}
+         >
+            {errorMessage}
+         </pre>
       </>
    );
 }

package/src/components/Home/Home.tsx

@@ -1,11 +1,10 @@
 import { Grid, Typography } from "@mui/material";
-import { QueryClient, useQuery } from "@tanstack/react-query";
 import { ProjectsApi, Configuration } from "../../client";
 import { ApiErrorDisplay } from "../ApiErrorDisplay";
 import { Loading } from "../Loading";
+import { useQueryWithApiError } from "../../hooks/useQueryWithApiError";
 
 const projectsApi = new ProjectsApi(new Configuration());
-const queryClient = new QueryClient();
 
 interface HomeProps {
    server?: string;
@@ -13,18 +12,14 @@ interface HomeProps {
 }
 
 export default function Home({ server, navigate }: HomeProps) {
-   const { data, isSuccess, isError, error } = useQuery(
-      {
-         queryKey: ["projects", server],
-         queryFn: () =>
-            projectsApi.listProjects({
-               baseURL: server,
-            }),
-         retry: false,
-         throwOnError: false,
-      },
-      queryClient,
-   );
+   const { data, isSuccess, isError, error } = useQueryWithApiError({
+      queryKey: ["projects", server],
+      queryFn: () =>
+         projectsApi.listProjects({
+            baseURL: server,
+            withCredentials: true,
+         }),
+   });
 
    console.log(JSON.stringify(data?.data, null, 2));
 

package/src/components/Model/Model.tsx

@@ -12,23 +12,21 @@ import {
    Tooltip,
    Typography,
 } from "@mui/material";
-import { QueryClient, useQuery } from "@tanstack/react-query";
 import React, { useEffect } from "react";
 import { Configuration, ModelsApi, CompiledModel } from "../../client";
 import { highlight } from "../highlighter";
 import { StyledCard, StyledCardContent, StyledCardMedia } from "../styles";
 import { ModelCell } from "./ModelCell";
-import { ApiErrorDisplay, ApiError } from "../ApiErrorDisplay";
+import { ApiErrorDisplay } from "../ApiErrorDisplay";
 
 import "@malloydata/malloy-explorer/styles.css";
 import { usePackage } from "../Package/PackageProvider";
 import { SourceExplorerComponent } from "./SourcesExplorer";
 import { Loading } from "../Loading";
+import { useQueryWithApiError } from "../../hooks/useQueryWithApiError";
 
 const modelsApi = new ModelsApi(new Configuration());
 
-const queryClient = new QueryClient();
-
 interface ModelProps {
    modelPath: string;
    versionId?: string;
@@ -64,11 +62,8 @@ export default function Model({
       });
    }, [embeddingExpanded, modelCodeSnippet]);
 
-   const { data, isError, isLoading, error } = useQuery<
-      CompiledModel,
-      ApiError
-   >(
-      {
+   const { data, isError, isLoading, error } =
+      useQueryWithApiError<CompiledModel>({
          queryKey: [
             "package",
             server,
@@ -78,44 +73,22 @@ export default function Model({
             versionId,
          ],
          queryFn: async () => {
-            try {
-               const response = await modelsApi.getModel(
-                  projectName,
-                  packageName,
-                  modelPath,
-                  versionId,
-                  {
-                     baseURL: server,
-                     withCredentials: !accessToken,
-                     headers: {
-                        Authorization: accessToken && `Bearer ${accessToken}`,
-                     },
+            const response = await modelsApi.getModel(
+               projectName,
+               packageName,
+               modelPath,
+               versionId,
+               {
+                  baseURL: server,
+                  withCredentials: !accessToken,
+                  headers: {
+                     Authorization: accessToken && `Bearer ${accessToken}`,
                   },
-               );
-               return response.data;
-            } catch (err) {
-               // If it's an Axios error, it will have response data
-               if (err && typeof err === "object" && "response" in err) {
-                  console.log("axios err", err);
-                  const axiosError = err as any;
-                  if (axiosError.response?.data) {
-                     const apiError: ApiError = new Error(
-                        axiosError.response.data.message || axiosError.message,
-                     );
-                     apiError.status = axiosError.response.status;
-                     apiError.data = axiosError.response.data;
-                     throw apiError;
-                  }
-               }
-               // For other errors, throw as is
-               throw err;
-            }
+               },
+            );
+            return response.data;
          },
-         retry: false,
-         throwOnError: false,
-      },
-      queryClient,
-   );
+      });
 
    if (isLoading) {
       return <Loading text="Fetching Model..." />;

package/src/components/Model/NamedQueries.tsx

@@ -8,14 +8,13 @@ import { Box } from "@mui/system";
 import { Query, QueryresultsApi } from "../../client/api";
 import { StyledCard, StyledCardContent } from "../styles";
 
-import { QueryClient, useMutation } from "@tanstack/react-query";
 import React from "react";
 import { Configuration } from "../../client";
 import { usePackage } from "../Package";
 import ResultContainer from "../RenderedResult/ResultContainer";
+import { useMutationWithApiError } from "../../hooks/useQueryWithApiError";
 
 const queryResultsApi = new QueryresultsApi(new Configuration());
-const queryClient = new QueryClient();
 
 interface NamedQueryProps {
    modelPath: string;
@@ -35,52 +34,49 @@ export default function NamedQueries({
       Record<string, boolean>
    >({});
 
-   const mutation = useMutation(
-      {
-         mutationFn: ({ query }: { query: Query }) => {
-            const val = queryResultsApi.executeQuery(
-               projectName,
-               packageName,
-               modelPath,
-               undefined,
-               undefined,
-               query.name,
-               versionId,
-               {
-                  baseURL: server,
-                  withCredentials: !accessToken,
-                  headers: {
-                     Authorization: accessToken && `Bearer ${accessToken}`,
-                  },
+   const mutation = useMutationWithApiError({
+      mutationFn: ({ query }: { query: Query }) => {
+         const val = queryResultsApi.executeQuery(
+            projectName,
+            packageName,
+            modelPath,
+            undefined,
+            undefined,
+            query.name,
+            versionId,
+            {
+               baseURL: server,
+               withCredentials: !accessToken,
+               headers: {
+                  Authorization: accessToken && `Bearer ${accessToken}`,
                },
-            );
-            return val;
-         },
-         onSuccess: (data, { query }: { query: Query }) => {
-            if (data) {
-               setNamedQueryResults((prev) => ({
-                  ...prev,
-                  [query.name]: data.data.result,
-               }));
-            }
-         },
+            },
+         );
+         return val;
       },
-      queryClient,
-   );
+      onSuccess: (data, { query }: { query: Query }) => {
+         if (data) {
+            setNamedQueryResults((prev) => ({
+               ...prev,
+               [query.name]: data.data.result,
+            }));
+         }
+      },
+   });
 
    const handleAccordionChange =
       (query: Query, queryKey: string) =>
-         (_event: React.SyntheticEvent, isExpanded: boolean) => {
-            setExpandedAccordions((prev) => ({
-               ...prev,
-               [queryKey]: isExpanded,
-            }));
+      (_event: React.SyntheticEvent, isExpanded: boolean) => {
+         setExpandedAccordions((prev) => ({
+            ...prev,
+            [queryKey]: isExpanded,
+         }));
 
-            // Trigger mutation only if expanding and we haven't executed this query before
-            if (isExpanded && !namedQueryResults[query.name]) {
-               mutation.mutate({ query });
-            }
-         };
+         // Trigger mutation only if expanding and we haven't executed this query before
+         if (isExpanded && !namedQueryResults[query.name]) {
+            mutation.mutate({ query });
+         }
+      };
 
    if (!namedQueries) {
       return <div> Loading Named Queries</div>;

package/src/components/Model/SourcesExplorer.tsx

@@ -18,13 +18,12 @@ import {
    SourcePanel,
 } from "@malloydata/malloy-explorer";
 import { styled } from "@mui/material/styles";
-import { QueryClient, useMutation } from "@tanstack/react-query";
 import React from "react";
 import { Configuration, QueryresultsApi } from "../../client";
 import { usePackage } from "../Package/PackageProvider";
+import { useMutationWithApiError } from "../../hooks/useQueryWithApiError";
 
 const queryResultsApi = new QueryresultsApi(new Configuration());
-const queryClient = new QueryClient();
 
 export interface SourceAndPath {
    modelPath: string;
@@ -83,8 +82,8 @@ export function SourcesExplorer({
    const [selectedTab, setSelectedTab] = React.useState(
       existingSourceName
          ? sourceAndPaths.findIndex(
-            (entry) => entry.sourceInfo.name === existingSourceName,
-         )
+              (entry) => entry.sourceInfo.name === existingSourceName,
+           )
          : 0,
    );
 
@@ -174,47 +173,44 @@ export function SourceExplorerComponent({
    }, [onChange, query]);
    const { server, projectName, packageName, versionId, accessToken } =
       usePackage();
-   const mutation = useMutation(
-      {
-         mutationFn: () => {
-            const malloy = new QueryBuilder.ASTQuery({
-               source: sourceAndPath.sourceInfo,
-               query: query?.malloyQuery,
-            }).toMalloy();
+   const mutation = useMutationWithApiError({
+      mutationFn: () => {
+         const malloy = new QueryBuilder.ASTQuery({
+            source: sourceAndPath.sourceInfo,
+            query: query?.malloyQuery,
+         }).toMalloy();
+         setQuery({
+            ...query,
+            query: malloy,
+         });
+         return queryResultsApi.executeQuery(
+            projectName,
+            packageName,
+            sourceAndPath.modelPath,
+            malloy,
+            undefined,
+            // sourceInfo.name,
+            undefined,
+            versionId,
+            {
+               baseURL: server,
+               withCredentials: !accessToken,
+               headers: {
+                  Authorization: accessToken && `Bearer ${accessToken}`,
+               },
+            },
+         );
+      },
+      onSuccess: (data) => {
+         if (data) {
+            const parsedResult = JSON.parse(data.data.result);
             setQuery({
                ...query,
-               query: malloy,
+               malloyResult: parsedResult as Malloy.Result,
             });
-            return queryResultsApi.executeQuery(
-               projectName,
-               packageName,
-               sourceAndPath.modelPath,
-               malloy,
-               undefined,
-               // sourceInfo.name,
-               undefined,
-               versionId,
-               {
-                  baseURL: server,
-                  withCredentials: !accessToken,
-                  headers: {
-                     Authorization: accessToken && `Bearer ${accessToken}`,
-                  },
-               },
-            );
-         },
-         onSuccess: (data) => {
-            if (data) {
-               const parsedResult = JSON.parse(data.data.result);
-               setQuery({
-                  ...query,
-                  malloyResult: parsedResult as Malloy.Result,
-               });
-            }
-         },
+         }
       },
-      queryClient,
-   );
+   });
 
    const [oldSourceInfo, setOldSourceInfo] = React.useState(
       sourceAndPath.sourceInfo.name,
@@ -303,16 +299,16 @@ export function SourceExplorerComponent({
                         submittedQuery={
                            query?.malloyQuery
                               ? {
-                                 executionState: mutation.isPending
-                                    ? "running"
-                                    : "finished",
-                                 response: {
-                                    result: query.malloyResult,
-                                 },
-                                 query: query.malloyQuery,
-                                 queryResolutionStartMillis: Date.now(),
-                                 onCancel: mutation.reset,
-                              }
+                                   executionState: mutation.isPending
+                                      ? "running"
+                                      : "finished",
+                                   response: {
+                                      result: query.malloyResult,
+                                   },
+                                   query: query.malloyQuery,
+                                   queryResolutionStartMillis: Date.now(),
+                                   onCancel: mutation.reset,
+                                }
                               : undefined
                         }
                         options={{ showRawQuery: true }}

package/src/components/MutableNotebook/ModelPicker.tsx

@@ -10,14 +10,13 @@ import {
    Stack,
    Typography,
 } from "@mui/material";
-import { QueryClient, useQuery } from "@tanstack/react-query";
 import React from "react";
 import { Configuration, ModelsApi } from "../../client";
 import { ApiErrorDisplay } from "../ApiErrorDisplay";
 import { usePackage } from "../Package/PackageProvider";
+import { useQueryWithApiError } from "../../hooks/useQueryWithApiError";
 
 const modelsApi = new ModelsApi(new Configuration());
-const queryClient = new QueryClient();
 
 interface ModelPickerProps {
    initialSelectedModels: string[];
@@ -34,22 +33,17 @@ export function ModelPicker({
 }: ModelPickerProps) {
    const { server, projectName, packageName, versionId, accessToken } =
       usePackage();
-   const { data, isLoading, isSuccess, isError, error } = useQuery(
-      {
-         queryKey: ["models", server, projectName, packageName, versionId],
-         queryFn: () =>
-            modelsApi.listModels(projectName, packageName, versionId, {
-               baseURL: server,
-               withCredentials: !accessToken,
-               headers: {
-                  Authorization: accessToken && `Bearer ${accessToken}`,
-               },
-            }),
-         retry: false,
-         throwOnError: false,
-      },
-      queryClient,
-   );
+   const { data, isLoading, isSuccess, isError, error } = useQueryWithApiError({
+      queryKey: ["models", server, projectName, packageName, versionId],
+      queryFn: () =>
+         modelsApi.listModels(projectName, packageName, versionId, {
+            baseURL: server,
+            withCredentials: !accessToken,
+            headers: {
+               Authorization: accessToken && `Bearer ${accessToken}`,
+            },
+         }),
+   });
    const [selectedModels, setSelectedModels] = React.useState<string[]>(
       initialSelectedModels || [],
    );