@tinacms/app 0.0.0-20230816203521 → 0.0.0-20230817135409

package/CHANGELOG.md

@@ -1,12 +1,12 @@
 # @tinacms/app
 
-## 0.0.0-20230816203521
+## 0.0.0-20230817135409
 
 ### Patch Changes
 
 - Updated dependencies [31eb94ebe]
-  - tinacms@0.0.0-20230816203521
-  - @tinacms/mdx@0.0.0-20230816203521
+  - tinacms@0.0.0-20230817135409
+  - @tinacms/mdx@0.0.0-20230817135409
 
 ## 1.2.25
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tinacms/app",
-  "version": "0.0.0-20230816203521",
+  "version": "0.0.0-20230817135409",
   "main": "src/main.tsx",
   "license": "Apache-2.0",
   "devDependencies": {
@@ -14,7 +14,7 @@
     "@headlessui/react": "1.6.6",
     "@heroicons/react": "1.0.6",
     "@monaco-editor/react": "4.4.5",
-    "@tinacms/mdx": "0.0.0-20230816203521",
+    "@tinacms/mdx": "0.0.0-20230817135409",
     "@xstate/react": "3.0.0",
     "final-form": "4.20.7",
     "graphiql": "3.0.0-alpha.1",
@@ -25,7 +25,7 @@
     "react-dom": "17.0.2",
     "react-router-dom": "6.3.0",
     "tailwindcss": "^3.2.7",
-    "tinacms": "0.0.0-20230816203521",
+    "tinacms": "0.0.0-20230817135409",
     "typescript": "^4.6.4",
     "zod": "^3.14.3"
   }

package/src/lib/errors.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import { TinaCMS } from 'tinacms'
+
+const ErrorModalContent = (props: { title: string; errors: string[] }) => {
+  const { title, errors } = props
+  return (
+    <>
+      <div>{title}</div>
+      <ul>
+        {errors.map((error, i) => (
+          <li key={i}>{error}</li>
+        ))}
+      </ul>
+    </>
+  )
+}
+
+export const showErrorModal = (
+  title: string,
+  errors: string[],
+  cms: TinaCMS
+) => {
+  cms.alerts.error(() => <ErrorModalContent title={title} errors={errors} />)
+}

package/src/lib/graphql-reducer.ts

@@ -29,6 +29,7 @@ import type {
 } from './types'
 import { getFormAndFieldNameFromMetadata } from './util'
 import { useSearchParams } from 'react-router-dom'
+import { showErrorModal } from './errors'
 
 const sysSchema = z.object({
   breadcrumbs: z.array(z.string()),
@@ -152,6 +153,14 @@ const astNodeWithMeta: G.DocumentNode = {
 const schema = G.buildASTSchema(astNode)
 const schemaForResolver = G.buildASTSchema(astNodeWithMeta)
 
+const isRejected = (
+  input: PromiseSettledResult<unknown>
+): input is PromiseRejectedResult => input.status === 'rejected'
+
+const isFulfilled = <T>(
+  input: PromiseSettledResult<T>
+): input is PromiseFulfilledResult<T> => input.status === 'fulfilled'
+
 export const useGraphQLReducer = (
   iframe: React.MutableRefObject<HTMLIFrameElement>,
   url: string
@@ -159,6 +168,7 @@ export const useGraphQLReducer = (
   const cms = useCMS()
   const tinaSchema = cms.api.tina.schema as TinaSchema
   const [payloads, setPayloads] = React.useState<Payload[]>([])
+  const [requestErrors, setRequestErrors] = React.useState<string[]>([])
   const [searchParams, setSearchParams] = useSearchParams()
   const [results, setResults] = React.useState<
     {
@@ -204,7 +214,9 @@ export const useGraphQLReducer = (
    */
   React.useEffect(() => {
     const run = async () => {
-      return Promise.all(
+      setRequestErrors([])
+      // gather the errors and display an error message containing each error unique message
+      return Promise.allSettled(
         payloads.map(async (payload) => {
           // This payload has already been expanded, skip it.
           if (payload.expandedQuery) {
@@ -219,7 +231,10 @@ export const useGraphQLReducer = (
     }
     if (payloads.length) {
       run().then((updatedPayloads) => {
-        setPayloads(updatedPayloads)
+        setPayloads(updatedPayloads.filter(isFulfilled).map((p) => p.value))
+        setRequestErrors(
+          updatedPayloads.filter(isRejected).map((p) => String(p.reason))
+        )
       })
     }
   }, [JSON.stringify(payloads), cms])
@@ -575,6 +590,12 @@ export const useGraphQLReducer = (
       cms.dispatch({ type: 'set-edit-mode', value: 'basic' })
     }
   }, [iframe.current, JSON.stringify(results)])
+
+  React.useEffect(() => {
+    if (requestErrors.length) {
+      showErrorModal('Unexpected error querying content', requestErrors, cms)
+    }
+  }, [requestErrors])
 }
 
 const onSubmit = async (
@@ -834,12 +855,15 @@ _internalSys: _sys {
   return response.node
 }
 
-const expandPayload = async (payload: Payload, cms: TinaCMS) => {
+const expandPayload = async (
+  payload: Payload,
+  cms: TinaCMS
+): Promise<Payload> => {
   const { query, variables } = payload
   const documentNode = G.parse(query)
   const expandedDocumentNode = expandQuery({ schema, documentNode })
   const expandedQuery = G.print(expandedDocumentNode)
-  const expandedData = await cms.api.tina.request(expandedQuery, {
+  const expandedData = await cms.api.tina.request<object>(expandedQuery, {
     variables,
   })