From cadd40a3e3cdf65dcc9caf681ef35035af762f15 Mon Sep 17 00:00:00 2001
From: Max Stoiber <contact@mxstbr.com>
Date: Wed, 22 Jul 2020 10:18:38 +0200
Subject: [PATCH] fix(gatsby-admin): show error messages in the interface

---
 packages/gatsby-admin/src/components/providers.tsx | 10 ++++++++--
 packages/gatsby-admin/src/pages/index.tsx          |  9 ++++++++-
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/packages/gatsby-admin/src/components/providers.tsx b/packages/gatsby-admin/src/components/providers.tsx
index 2a312ee65182e..5ce872959cfb5 100644
--- a/packages/gatsby-admin/src/components/providers.tsx
+++ b/packages/gatsby-admin/src/components/providers.tsx
@@ -2,6 +2,7 @@ import React from "react"
 import { Provider, Client } from "urql"
 import { ThemeProvider, getTheme } from "gatsby-interface"
 import { ThemeProvider as StrictUIProvider } from "strict-ui"
+import { Spinner } from "theme-ui"
 import { createUrqlClient } from "../urql-client"
 
 const baseTheme = getTheme()
@@ -49,10 +50,15 @@ const GraphQLProvider: React.FC<{}> = ({ children }) => {
       })
   }, [])
 
-  if (status === `loading`) return <p>Loading...</p>
+  if (status === `loading`) return <Spinner />
 
   if (client === null)
-    return <p>It looks like no develop process is running.</p>
+    return (
+      <p>
+        Please start <code>gatsby develop</code> to show the data about your
+        site.
+      </p>
+    )
 
   return <Provider value={client}>{children}</Provider>
 }
diff --git a/packages/gatsby-admin/src/pages/index.tsx b/packages/gatsby-admin/src/pages/index.tsx
index bd349610565e4..b4011fc64d84c 100644
--- a/packages/gatsby-admin/src/pages/index.tsx
+++ b/packages/gatsby-admin/src/pages/index.tsx
@@ -108,7 +108,14 @@ const Index: React.FC<{}> = () => {
 
   if (fetching) return <Spinner />
 
-  if (error) return <p>Oops something went wrong.</p>
+  if (error) {
+    const errMsg =
+      (error.networkError && error.networkError.message) ||
+      (Array.isArray(error.graphQLErrors) &&
+        error.graphQLErrors.map(e => e.message).join(` | `))
+
+    return <p>Error: {errMsg}</p>
+  }
 
   return (
     <Flex gap={7} flexDirection="column" sx={{ paddingY: 7, paddingX: 6 }}>