graphql

ba833859 · isstuev · 0009573d · ba833859 · ba833859
Commit ba833859 authored Feb 24, 2023 by isstuev
Show whitespace changes
Inline Side-by-side

Showing with 52 additions and 6 deletions

graphiql.tsx pages/graphiql.tsx +33 -4

GraphQL.tsx ui/graphQL/GraphQL.tsx +19 -2

No files found.
--- a/pages/graphiql.tsx
+++ b/pages/graphiql.tsx
-import { Spinner } from '@chakra-ui/react';
+import { Spinner, useColorMode } 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 Head from 'next/head';
 import React from 'react';

-const GraphQLPage: NextPage = () => {
-  return <GraphQL/>;
+import isBrowser from 'lib/isBrowser';
+import Page from 'ui/shared/Page/Page';
+
+const AppsPage: NextPage = () => {
+  const { colorMode } = useColorMode();
+  const [ show, setShow ] = React.useState(true);
+
+  React.useEffect(() => {
+    if (!show) {
+      // force re-render GraphQL component to apply new theme
+      setShow(true);
+    }
+  }, [ show ]);
+
+  React.useEffect(() => {
+    if (isBrowser()) {
+      const graphqlTheme = window.localStorage.getItem('graphiql:theme');
+      if (graphqlTheme !== colorMode) {
+        window.localStorage.setItem('graphiql:theme', colorMode);
+        setShow(false);
+      }
+    }
+  }, [ colorMode ]);
+
+  return (
+    <Page>
+      <Head><title>Graph Page</title></Head>
+      { show && <GraphQL key={ colorMode }/> }
+    </Page>
+  );
 };

-export default GraphQLPage;
+export default AppsPage;

 export { getServerSideProps } from 'lib/next/getServerSideProps';
--- a/ui/graphQL/GraphQL.tsx
+++ b/ui/graphQL/GraphQL.tsx
@@ -4,14 +4,31 @@ import { GraphiQL } from 'graphiql';
 import React from 'react';
 import 'graphiql/graphiql.css';

+const graphQLStyle = {
+  '.graphiql-container': {
+    backgroundColor: 'unset',
+  },
+};
+
 const GraphQL = () => {

+  const initialQuery = `{
+    transaction(
+      hash: "0x69e3923eef50eada197c3336d546936d0c994211492c9f947a24c02827568f9f"
+    ) {
+      hash
+      blockNumber
+      value
+      gasUsed
+    }
+  }`;
  const fetcher = createGraphiQLFetcher({
    url: 'https://base-goerli.blockscout.com/graphiql',
  });
+
  return (
-    <Box h="100vh" sx={{}}>
-      <GraphiQL fetcher={ fetcher }/>
+    <Box h="100vh" sx={ graphQLStyle }>
+      <GraphiQL fetcher={ fetcher } defaultQuery={ initialQuery }/>
    </Box>
  );
 };