reconbot/graphql-playground.tsx

## graphql-playground.tsx
import dynamic from 'next/dynamic'
import Head from 'next/head'

const WS_URL = process.env.NEXT_PUBLIC_WS_API_ENDPOINT
const API_URL = process.env.NEXT_PUBLIC_API_ENDPOINT

// You might ask yourself, what is this business?
// And I might ask why on earth does Playground require window on module load breaking any hope
// of ssr even if we don't render it but only import it
const Playground = dynamic<any>(
  async () => {
    const [{ store, Playground }, { Provider }] = await Promise.all([
      import('graphql-playground-react'),
      import('react-redux'),
    ])
    return ({ ...args }) => {
      return <Provider store={store}>
        <Playground {...args} />
      </Provider>
    }
  },
  { ssr: false },
)

export default function PlaygroundPage () {
  return <>
    <Head>
      {/* eslint-disable-next-line @next/next/no-page-custom-font */}
      <link
        href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700|Source+Code+Pro:400,700&display=swap"
        rel="stylesheet"
      />
    </Head>
    <Playground
      endpoint={API_URL}
      subscriptionEndpoint={WS_URL}
    />
  </>
}
	import dynamic from 'next/dynamic'
	import Head from 'next/head'

	const WS_URL = process.env.NEXT_PUBLIC_WS_API_ENDPOINT
	const API_URL = process.env.NEXT_PUBLIC_API_ENDPOINT

	// You might ask yourself, what is this business?
	// And I might ask why on earth does Playground require window on module load breaking any hope
	// of ssr even if we don't render it but only import it
	const Playground = dynamic<any>(
	async () => {
	const [{ store, Playground }, { Provider }] = await Promise.all([
	import('graphql-playground-react'),
	import('react-redux'),
	])
	return ({ ...args }) => {
	return <Provider store={store}>
	<Playground {...args} />
	</Provider>
	}
	},
	{ ssr: false },
	)

	export default function PlaygroundPage () {
	return <>
	<Head>
	{/* eslint-disable-next-line @next/next/no-page-custom-font */}
	<link
	href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700\|Source+Code+Pro:400,700&display=swap"
	rel="stylesheet"
	/>
	</Head>
	<Playground
	endpoint={API_URL}
	subscriptionEndpoint={WS_URL}
	/>
	</>
	}