@tinacms/app 1.2.26 → 1.2.27

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @tinacms/app
 
+## 1.2.27
+
+### Patch Changes
+
+- 7e4de0b2a: Improvements to error handling with auth
+- 1144af060: Improve error messaging when onPut / onDelete hooks throw errors
+- Updated dependencies [7e4de0b2a]
+- Updated dependencies [1144af060]
+  - tinacms@1.5.20
+  - @tinacms/mdx@1.3.18
+
 ## 1.2.26
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tinacms/app",
-  "version": "1.2.26",
+  "version": "1.2.27",
   "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": "1.3.17",
+    "@tinacms/mdx": "1.3.18",
     "@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": "1.5.19",
+    "tinacms": "1.5.20",
     "typescript": "^4.6.4",
     "zod": "^3.14.3"
   }

package/src/App.tsx

@@ -1,4 +1,4 @@
-import React, { Suspense } from 'react'
+import React, { Suspense, useEffect } from 'react'
 import TinaCMS, { TinaAdmin, useCMS, MdxFieldPluginExtendible } from 'tinacms'
 import { TinaEditProvider, useEditState } from 'tinacms/dist/edit-state'
 import { Preview } from './preview'
@@ -78,7 +78,9 @@ export const TinaAdminWrapper = () => {
 
 const GoToEdit = () => {
   const { setEdit } = useEditState()
-  setEdit(true)
+  useEffect(() => {
+    setEdit(true)
+  }, [])
   return <div>Going into edit mode</div>
 }
 

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

@@ -19,6 +19,7 @@ import {
   FormOptions,
   GlobalFormPlugin,
   TinaState,
+  ErrorDialog,
 } from 'tinacms'
 import { createForm, createGlobalForm, FormifyCallback } from './build-form'
 import type {
@@ -29,6 +30,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 +154,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 +169,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 +215,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 +232,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 +591,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 (
@@ -602,7 +624,13 @@ const onSubmit = async (
     })
     cms.alerts.success('Document saved!')
   } catch (e) {
-    cms.alerts.error('There was a problem saving your document')
+    cms.alerts.error(() =>
+      ErrorDialog({
+        title: 'There was a problem saving your document',
+        message: 'Tina caught an error while updating the page',
+        error: e,
+      })
+    )
     console.error(e)
   }
 }
@@ -834,12 +862,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,
   })