import * as React from "react" import { Body, Header, HeaderOpenClose, Overlay } from "./overlay" import { Accordion, AccordionItem } from "./accordion" import { openInEditor, prettifyStack } from "../utils" import { CodeFrame } from "./code-frame" function WrappedAccordionItem({ error, open }) { const title = error?.error?.message || error.context.sourceMessage || `Unknown GraphQL error` const docsUrl = error?.docsUrl const filePath = error?.filePath const lineNumber = error?.location?.start?.line const columnNumber = error?.location?.start?.column let locString = `` if (typeof lineNumber !== `undefined`) { locString += `:${lineNumber}` if (typeof columnNumber !== `undefined`) { locString += `:${columnNumber}` } } // Sometimes the GraphQL error text has ANSI in it. If it's only text, it'll be passed through const decoded = prettifyStack(error.text) return (
{error.level} {` `}#{error.code}
{filePath && (
{filePath} {locString}
)} {docsUrl && (
See our docs page for more info on this error:{` `} {docsUrl}
)}
) } export function GraphqlErrors({ errors, dismiss }) { const deduplicatedErrors = React.useMemo( () => Array.from(new Set(errors)), [errors] ) const hasMultipleErrors = deduplicatedErrors.length > 1 return (

{hasMultipleErrors ? `${errors.length} Unhandled GraphQL Errors` : `Unhandled GraphQL Error`}

{hasMultipleErrors ? `Multiple` : `One`} unhandled GraphQL{` `} {hasMultipleErrors ? `errors` : `error`} found in your files. See the list below to fix {hasMultipleErrors ? `them` : `it`}:

{deduplicatedErrors.map((error, index) => ( ))} ) }