From 82e9bd8dc4060e9adee691e539af5cad9aab0366 Mon Sep 17 00:00:00 2001 From: Trevor Blades Date: Tue, 12 Mar 2024 13:53:19 -0700 Subject: [PATCH 1/2] POC of router error codes rendered in docs --- .eslintrc.js | 3 +- gatsby-node.js | 24 ++++++++++- src/components/Page.js | 12 ++---- src/components/RouterErrorCodes.js | 48 +++++++++++++++++++++ src/content/graphos/basics/router-codes.mdx | 5 +++ 5 files changed, 81 insertions(+), 11 deletions(-) create mode 100644 src/components/RouterErrorCodes.js create mode 100644 src/content/graphos/basics/router-codes.mdx diff --git a/.eslintrc.js b/.eslintrc.js index 03f3ce170..cdfe1d12a 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -53,7 +53,8 @@ module.exports = { StudioPages: 'readonly', HowSubscriptionsWork: 'readonly', WhatSubscriptionsAreFor: 'readonly', - TopLevelAwait: 'readonly' + TopLevelAwait: 'readonly', + RouterErrorCodes: 'readonly' }, rules: { 'react/no-unescaped-entities': 'off' diff --git a/gatsby-node.js b/gatsby-node.js index 2303f86d9..fd02109c1 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -11,7 +11,7 @@ exports.sourceNodes = ({ store, cache, reporter -}) => +}) => { // download Apollo Client typedoc output and save it as a file node createRemoteFileNode({ url: 'https://apollo-client-docs.netlify.app/docs.json', @@ -22,6 +22,22 @@ exports.sourceNodes = ({ reporter }); + const routerErrors = [ + 'https://raw.githubusercontent.com/apollographql/router/ee0e96d0c66594bd1865fb27eb83802cecc8b22a/apollo-router/resources/errors/apollo_router%3A%3Astructured_errors%3A%3Atest%3A%3ATestError.yaml' + ]; + + routerErrors.forEach(url => { + createRemoteFileNode({ + url, + store, + cache, + createNode, + createNodeId, + reporter + }); + }); +}; + exports.onCreateWebpackConfig = ({actions}) => { actions.setWebpackConfig({ resolve: { @@ -40,7 +56,11 @@ exports.onCreateNode = async ({node, getNode, loadNodeContent, actions}) => { const {type, mediaType} = node.internal; switch (type) { case 'File': - if (mediaType === 'application/json' || node.base === '_redirects') { + if ( + mediaType === 'application/json' || + mediaType === 'text/yaml' || + node.base === '_redirects' + ) { // save the raw content of JSON files as a field const content = await loadNodeContent(node); actions.createNodeField({ diff --git a/src/components/Page.js b/src/components/Page.js index 37e325ac1..61182f09c 100644 --- a/src/components/Page.js +++ b/src/components/Page.js @@ -9,13 +9,7 @@ import InlineCode from './InlineCode'; import Pagination from './Pagination'; import Prism from 'prismjs'; import PropTypes from 'prop-types'; -import React, { - Fragment, - createElement, - useCallback, - useMemo, - useState -} from 'react'; +import React, {Fragment, createElement, useMemo, useState} from 'react'; import RelativeLink, {ButtonLink, PrimaryLink} from './RelativeLink'; import RuleExpansionPanel from './RuleExpansionPanel'; import TableOfContents from './TableOfContents'; @@ -84,6 +78,7 @@ import {PremiumFeature} from './PremiumFeature'; import {PreviewFeature} from './PreviewFeature'; import {Property} from './Property'; import {PropertyList} from './PropertyList'; +import {RouterErrorCodes} from './RouterErrorCodes'; import {TOTAL_HEADER_HEIGHT} from './Header'; import {Tab} from './Tab'; import {Tabs} from './Tabs'; @@ -239,7 +234,8 @@ const mdxComponents = { TrackableLink, useApiDocContext, PrimaryLink, - MDXRenderer + MDXRenderer, + RouterErrorCodes }; const {processSync} = rehype() diff --git a/src/components/RouterErrorCodes.js b/src/components/RouterErrorCodes.js new file mode 100644 index 000000000..bfc2cf873 --- /dev/null +++ b/src/components/RouterErrorCodes.js @@ -0,0 +1,48 @@ +import React from 'react'; +import yaml from 'js-yaml'; +import {graphql, useStaticQuery} from 'gatsby'; + +export const RouterErrorCodes = () => { + const data = useStaticQuery( + graphql` + query RouterErrorCodes { + allFile( + filter: { + extension: {eq: "yaml"} + sourceInstanceName: {eq: "__PROGRAMMATIC__"} + } + ) { + nodes { + name + fields { + content + } + } + } + } + ` + ); + + return ( +
+ {data.allFile.nodes.map((file, index) => { + const errors = yaml.load(file.fields.content); + + return ( +
+

{decodeURIComponent(file.name)}

+ {errors.map((error, index) => { + console.log(error); + return ( +
+

{error.code}

+

{error.detail}

+
+ ); + })} +
+ ); + })} +
+ ); +}; diff --git a/src/content/graphos/basics/router-codes.mdx b/src/content/graphos/basics/router-codes.mdx new file mode 100644 index 000000000..4ef9c1813 --- /dev/null +++ b/src/content/graphos/basics/router-codes.mdx @@ -0,0 +1,5 @@ +--- +title: Router error codes +--- + + From 78162ab5fc0adb9332a1e7c62a5bdbf188f1d707 Mon Sep 17 00:00:00 2001 From: Edward Huang Date: Wed, 13 Mar 2024 14:28:48 -0700 Subject: [PATCH 2/2] DOC-91 use ErrorCode component --- .eslintrc.js | 1 + src/components/ErrorCode.js | 78 ++++++++++++++++++++++++++++++ src/components/Page.js | 2 + src/components/RouterErrorCodes.js | 29 +++++++---- 4 files changed, 100 insertions(+), 10 deletions(-) create mode 100644 src/components/ErrorCode.js diff --git a/.eslintrc.js b/.eslintrc.js index cdfe1d12a..ed3edcca7 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -11,6 +11,7 @@ module.exports = { MultiCodeBlock: 'readonly', YouTube: 'readonly', PropertyList: 'readonly', + ErrorCode: 'readonly', Property: 'readonly', Tabs: 'readonly', Tab: 'readonly', diff --git a/src/components/ErrorCode.js b/src/components/ErrorCode.js new file mode 100644 index 000000000..ed8a00d6c --- /dev/null +++ b/src/components/ErrorCode.js @@ -0,0 +1,78 @@ +import PropTypes from 'prop-types'; +import React, {useContext} from 'react'; +import {CustomHeading} from './CustomHeading'; +import {Link, Td, Tr} from '@chakra-ui/react'; +import {MarkdownInAdmonitions} from './MarkdownInAdmonitions'; +import {PropertyListContext} from './PropertyList'; + +export function ErrorCode({ + code, + level, + detail, + type, + origin, + trace, + debug_uri, + actions, + attributes, + children +}) { + return ( + + + + + + {code} + + + + + + {detail && ( + + {detail} +
+
+ + )} + {children && ( + + {children} +
+ + )} + {level && ( + + Level: + {level} +
+ + )} + {origin && ( + + Origin: + {origin} +
+ + )} + {type && ( + + Type: + {type} +
+ + )} + + + ); +} + +ErrorCode.propTypes = { + code: PropTypes.string.isRequired, + detail: PropTypes.string, + level: PropTypes.string, + origin: PropTypes.string, + type: PropTypes.string, + children: PropTypes.node +}; diff --git a/src/components/Page.js b/src/components/Page.js index 61182f09c..6dcb99acc 100644 --- a/src/components/Page.js +++ b/src/components/Page.js @@ -59,6 +59,7 @@ import { MultiCodeBlockContext } from '@apollo/chakra-helpers'; import {EnterpriseFeature} from './EnterpriseFeature'; +import {ErrorCode} from './ErrorCode'; import {ExperimentalFeature} from './ExperimentalFeature'; import {Link as GatsbyLink} from 'gatsby'; import {Global} from '@emotion/react'; @@ -212,6 +213,7 @@ const mdxComponents = { YouTube, Property, PropertyList, + ErrorCode, Tab, Tabs, WistiaEmbed, diff --git a/src/components/RouterErrorCodes.js b/src/components/RouterErrorCodes.js index bfc2cf873..d31f6728f 100644 --- a/src/components/RouterErrorCodes.js +++ b/src/components/RouterErrorCodes.js @@ -1,5 +1,7 @@ import React from 'react'; import yaml from 'js-yaml'; +import {ErrorCode} from './ErrorCode'; +import {PropertyList} from './PropertyList'; import {graphql, useStaticQuery} from 'gatsby'; export const RouterErrorCodes = () => { @@ -30,16 +32,23 @@ export const RouterErrorCodes = () => { return (
-

{decodeURIComponent(file.name)}

- {errors.map((error, index) => { - console.log(error); - return ( -
-

{error.code}

-

{error.detail}

-
- ); - })} + + {errors.map((error, index) => { + console.log(error); + return ( + <> + + + ); + })} +
); })}