Skip to content

F
frontend
Commit ba833859 authored by isstuev's avatar isstuev
Browse files
Options

graphql

parent 0009573d
Hide whitespace changes
Inline Side-by-side
Showing with 52 additions and 6 deletions
pages/graphiql.tsx
View file @ ba833859
import { Spinner } from '@chakra-ui/react'; import { Spinner, useColorMode } from '@chakra-ui/react';
import type { NextPage } from 'next'; import type { NextPage } from 'next';
import dynamic from 'next/dynamic'; import dynamic from 'next/dynamic';
const GraphQL = dynamic(() => import('ui/graphQL/GraphQL'), { const GraphQL = dynamic(() => import('ui/graphQL/GraphQL'), {
loading: () => <Spinner/>, loading: () => <Spinner/>,
ssr: false, ssr: false,
}); });
import Head from 'next/head';
import React from 'react'; import React from 'react';
const GraphQLPage: NextPage = () => { import isBrowser from 'lib/isBrowser';
return <GraphQL/>; 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'; export { getServerSideProps } from 'lib/next/getServerSideProps';
ui/graphQL/GraphQL.tsx
View file @ ba833859
...@@ -4,14 +4,31 @@ import { GraphiQL } from 'graphiql'; ...@@ -4,14 +4,31 @@ import { GraphiQL } from 'graphiql';
import React from 'react'; import React from 'react';
import 'graphiql/graphiql.css'; import 'graphiql/graphiql.css';
const graphQLStyle = {
'.graphiql-container': {
backgroundColor: 'unset',
},
};
const GraphQL = () => { const GraphQL = () => {
const initialQuery = `{
transaction(
hash: "0x69e3923eef50eada197c3336d546936d0c994211492c9f947a24c02827568f9f"
) {
hash
blockNumber
value
gasUsed
}
}`;
const fetcher = createGraphiQLFetcher({ const fetcher = createGraphiQLFetcher({
url: 'https://base-goerli.blockscout.com/graphiql', url: 'https://base-goerli.blockscout.com/graphiql',
}); });
return ( return (
<Box h="100vh" sx={{}}> <Box h="100vh" sx={ graphQLStyle }>
<GraphiQL fetcher={ fetcher }/> <GraphiQL fetcher={ fetcher } defaultQuery={ initialQuery }/>
</Box> </Box>
); );
}; };
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment