test

deploy/values/l2-optimism-goerli/values.yaml

@@ -316,6 +316,7 @@ frontend:
         - "/api-docs"
         - "/csv-export"
         - "/verified-contracts"
+        - "/graphiql"
 
   resources:
     limits:

deploy/values/main/values.yaml

@@ -364,6 +364,7 @@ frontend:
         - "/api-docs"
         - "/csv-export"
         - "/verified-contracts"
+        - "/graphiql"
 
   resources:
     limits:

deploy/values/review-l2/values.yaml

@@ -39,6 +39,7 @@ frontend:
         - "/api-docs"
         - "/csv-export"
         - "/verified-contracts"
+        - "/graphiql"
 
   resources:
     limits:

deploy/values/review/values.yaml

@@ -39,6 +39,7 @@ frontend:
         - "/api-docs"
         - "/csv-export"
         - "/verified-contracts"
+        - "/graphiql"
 
   resources:
     limits:

package.json

@@ -51,6 +51,8 @@
     "dom-to-image": "^2.6.0",
     "ethers": "^5.7.2",
     "framer-motion": "^6.5.1",
+    "graphiql": "^2.2.0",
+    "graphql": "^16.6.0",
     "js-cookie": "^3.0.1",
     "lodash": "^4.0.0",
     "next": "12.2.5",

pages/graphiql.tsx

+import { Spinner } from '@chakra-ui/react';
 import type { NextPage } from 'next';
+import dynamic from 'next/dynamic';
+const GraphQL = dynamic(() => import('ui/graphQL/GraphQL'), {
+  loading: () => <Spinner/>,
+  ssr: false,
+});
+import React from 'react';
 
 const GraphQLPage: NextPage = () => {
-  return null;
+  return <GraphQL/>;
 };
 
 export default GraphQLPage;
 
-export async function getServerSideProps() {
-  return {
-    notFound: true,
-  };
-}
+export { getServerSideProps } from 'lib/next/getServerSideProps';

ui/graphQL/GraphQL.tsx

+import { Box } from '@chakra-ui/react';
+import { createGraphiQLFetcher } from '@graphiql/toolkit';
+import { GraphiQL } from 'graphiql';
+import React from 'react';
+import 'graphiql/graphiql.css';
+
+const GraphQL = () => {
+
+  const fetcher = createGraphiQLFetcher({
+    url: 'https://base-goerli.blockscout.com/graphiql',
+  });
+  return (
+    <Box h="100vh" sx={{}}>
+      <GraphiQL fetcher={ fetcher }/>
+    </Box>
+  );
+};
+
+export default GraphQL;