POC of router error codes rendered in docs

.eslintrc.js

@@ -11,6 +11,7 @@ module.exports = {
         MultiCodeBlock: 'readonly',
         YouTube: 'readonly',
         PropertyList: 'readonly',
+        ErrorCode: 'readonly',
         Property: 'readonly',
         Tabs: 'readonly',
         Tab: 'readonly',
@@ -53,7 +54,8 @@ module.exports = {
         StudioPages: 'readonly',
         HowSubscriptionsWork: 'readonly',
         WhatSubscriptionsAreFor: 'readonly',
-        TopLevelAwait: 'readonly'
+        TopLevelAwait: 'readonly',
+        RouterErrorCodes: 'readonly'
       },
       rules: {
         'react/no-unescaped-entities': 'off'

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({

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 (
+    <Tr>
+      <Td>
+        <span>
+          <CustomHeading as="h5" size="sm" id={code}>
+            <Link href={`#${code}`}>
+              <code>{code}</code>
+            </Link>
+          </CustomHeading>
+        </span>
+      </Td>
+      <Td>
+        {detail && (
+          <span>
+            {detail}
+            <br />
+            <br />
+          </span>
+        )}
+        {children && (
+          <span>
+            {children}
+            <br />
+          </span>
+        )}
+        {level && (
+          <span>
+            <strong>Level: </strong>
+            {level}
+            <br />
+          </span>
+        )}
+        {origin && (
+          <span>
+            <strong>Origin: </strong>
+            {origin}
+            <br />
+          </span>
+        )}
+        {type && (
+          <span>
+            <strong>Type: </strong>
+            {type}
+            <br />
+          </span>
+        )}
+      </Td>
+    </Tr>
+  );
+}
+
+ErrorCode.propTypes = {
+  code: PropTypes.string.isRequired,
+  detail: PropTypes.string,
+  level: PropTypes.string,
+  origin: PropTypes.string,
+  type: PropTypes.string,
+  children: PropTypes.node
+};

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';
@@ -65,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';
@@ -84,6 +79,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';
@@ -217,6 +213,7 @@ const mdxComponents = {
   YouTube,
   Property,
   PropertyList,
+  ErrorCode,
   Tab,
   Tabs,
   WistiaEmbed,
@@ -239,7 +236,8 @@ const mdxComponents = {
   TrackableLink,
   useApiDocContext,
   PrimaryLink,
-  MDXRenderer
+  MDXRenderer,
+  RouterErrorCodes
 };
 
 const {processSync} = rehype()

src/components/RouterErrorCodes.js

@@ -0,0 +1,57 @@
+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 = () => {
+  const data = useStaticQuery(
+    graphql`
+      query RouterErrorCodes {
+        allFile(
+          filter: {
+            extension: {eq: "yaml"}
+            sourceInstanceName: {eq: "__PROGRAMMATIC__"}
+          }
+        ) {
+          nodes {
+            name
+            fields {
+              content
+            }
+          }
+        }
+      }
+    `
+  );
+
+  return (
+    <div>
+      {data.allFile.nodes.map((file, index) => {
+        const errors = yaml.load(file.fields.content);
+
+        return (
+          <div key={index}>
+            <PropertyList kind="errCodes">
+              {errors.map((error, index) => {
+                console.log(error);
+                return (
+                  <>
+                    <ErrorCode
+                      key={index}
+                      code={error.code}
+                      detail={error.detail}
+                      type={error.type}
+                      origin={error.origin}
+                      level={error.level}
+                    />
+                  </>
+                );
+              })}
+            </PropertyList>
+          </div>
+        );
+      })}
+    </div>
+  );
+};

src/content/graphos/basics/router-codes.mdx

@@ -0,0 +1,5 @@
+---
+title: Router error codes
+---
+
+<RouterErrorCodes />