Relay with Next.js: setting

$ yarn create next-app relay-next-test
$ cd relay-next-test
$ yarn add -D typescript @types/react @types/node
$ touch tsconfig.json
$ yarn dev

$ yarn add react-relay relay-runtime
$ yarn add -D relay-compiler relay-config babel-plugin-relay graphql @types/react-relay @types/relay-runtime

$ touch relay.config.js

// relay.config.js
module.exports = {
  src: '.',
  schema: './schema.graphql',
  exclude: ['**/node_modules/**', '**/__mocks__/**', '**/__generated__/**', '**/.next/**'],
  artifactDirectory: '__generated__',
}

$ touch .babelrc

// .babelrc
{
  "presets": ["next/babel"],
  "plugins": ["relay"]
}

$ yarn add isomorphic-fetch
$ yarn add -D @types/isomorphic-fetch

// <PROJECT_ROOT>/scripts/generateSchema.js
const fs = require('fs')
const path = require('path')
const fetch = require('isomorphic-fetch')
const { getIntrospectionQuery, buildClientSchema, printSchema } = require('graphql')

const generateSchema = async () => {
  try {
    const response = await fetch('https://api.github.com/graphql', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        Authorization: `bearer ${GITHUB_TOKEN}`,
      },
      body: JSON.stringify({
        query: getIntrospectionQuery(), // #1
      }),
    })

    const res = await response.json()
    const sdl = printSchema(buildClientSchema(res.data)) // #2
    const parentPath = path.join(__dirname, '../')
    fs.writeFileSync(`${parentPath}/schema.graphql`, sdl) // #3
  } catch (e) {
    console.error(e)
  }
}

generateSchema()

// package.json
{
  "scripts": {
    "generate:schema": "node ./scripts/generateSchema.js",
    "relay": "relay-compiler",
    "dev": "yarn run relay && next dev",
    "build": "yarn run relay && next build",
    "start": "next start"
  }
}

$ yarn run generate:schema
yarn run v1.22.10
$ node ./scripts/generateSchema.js
✨  Done in 6.52s.

// <PROJECT_ROOT>/relay/fetchGraphQL.ts
import fetch from 'isomorphic-fetch'
import type { Variables } from 'relay-runtime'

const fetchGraphQL = async (query: string, variables: Variables) => {
  const response = await fetch('https://api.github.com/graphql', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      Authorization: `bearer ${GITHUB_TOKEN}`,
    },
    body: JSON.stringify({
      query,
      variables,
    }),
  })

  return await response.json()
}

export default fetchGraphQL

// <PROJECT_ROOT>/relay/relayEnvironment.ts
import { useMemo } from 'react'
import { Environment, Network, RecordSource, Store } from 'relay-runtime'
import type { FetchFunction } from 'relay-runtime'

import fetchGraphQL from './fetchGraphQL'

let relayEnvironment: Environment

const fetchRelay: FetchFunction = async (params, variables) => {
  console.log(`fetch query ${params.name} with ${JSON.stringify(variables)}`)
  return fetchGraphQL(params.text, variables)
}

const createEnvironment = () => {
  return new Environment({
    network: Network.create(fetchRelay),
    store: new Store(new RecordSource()),
  })
}

type InitialRecords = ConstructorParameters<typeof RecordSource>[number]
export const initEnvironment = (initialRecords?: InitialRecords) => {
  const environment = relayEnvironment ?? createEnvironment() // #1

  if (initialRecords) {
    environment.getStore().publish(new RecordSource(initialRecords)) // #2
  }

  if (typeof window === 'undefined') return environment // #3

  if (!relayEnvironment) {
    relayEnvironment = environment // #4
  }

  return relayEnvironment
}

export const useEnvironment = (initialRecords: InitialRecords) => {
  const relayEnvironment = useMemo(() => initEnvironment(initialRecords), [initialRecords])
  return relayEnvironment
}

// <PROJECT_ROOT>/pages/_app.tsx
import '../styles/globals.css'
import { RelayEnvironmentProvider } from 'react-relay/hooks'
import { useEnvironment } from '../relay/relayEnvironment'

import type { AppProps } from 'next/app'

function App({ Component, pageProps }: AppProps) {
  const environment = useEnvironment(pageProps.initialRecords)
  return (
    <RelayEnvironmentProvider environment={environment}>
      <Component {...pageProps} />
    </RelayEnvironmentProvider>
  )
}

export default App

// <PROJECT_ROOT>/pages/index.tsx
import { graphql } from 'react-relay'

const query = graphql`
  query testQuery($first: Int) {
    marketplaceListings(first: $first) {
      edges {
        node {
          id
          app {
            name
          }
          fullDescription
        }
      }
    }
  }
`

// <PROJECT_ROOT>/pages/index.tsx
import { fetchQuery, graphql } from 'react-relay'
import { initEnvironment } from '../relay/RelayEnvironment'

export default function Home() {
  return <div></div>
}

const query = graphql`
  query pages_index_MarketplaceListings_Query($first: Int) {
    marketplaceListings(first: $first) {
      edges {
        node {
          id
          app {
            name
          }
          fullDescription
        }
      }
    }
  }
`

export const getStaticProps = async () => {
  const environment = initEnvironment()
  try {
    const queryProps = await fetchQuery<any>(environment, query, {
      first: 20,
    }).toPromise()
    const initialRecords = environment.getStore().getSource().toJSON() // #1

    return {
      // #2
      props: {
        ...queryProps,
        initialRecords, // #3
      },
    }
  } catch (e) {
    console.error(e)
    throw e
  }
}

$ yarn run relay

$ yarn add -D relay-compiler-language-typescript

// relay.config.js
module.exports = {
  src: '.',
  schema: './schema.graphql',
  exclude: ['**/node_modules/**', '**/__mocks__/**', '**/__generated__/**', '**/.next/**'],
  artifactDirectory: '__generated__',
  language: 'typescript',
}

$ yarn run relay
yarn run v1.22.10
$ relay-compiler

Writing ts
Created:
 - pages_index_MarketplaceListings_Query.graphql.ts
Unchanged: 0 files
✨  Done in 2.63s.

import type { pages_index_MarketplaceListings_Query } from '../__generated__/pages_index_MarketplaceListings_Query.graphql'

const queryProps = await fetchQuery<pages_index_MarketplaceListings_Query>(
  environment,
  query,
  {}
).toPromise()

import type { InferGetStaticPropsType } from 'next'

export default function Home({ marketplaceListings }: InferGetStaticPropsType<typeof getStaticProps>) {
  return (
    // ...
  )
}

import { fetchQuery, graphql } from 'react-relay'
import { initEnvironment } from '../relay/RelayEnvironment'

import type { InferGetStaticPropsType } from 'next'
import type { pages_index_MarketplaceListings_Query } from '../__generated__/pages_index_MarketplaceListings_Query.graphql'

export default function Home({
  marketplaceListings,
}: InferGetStaticPropsType<typeof getStaticProps>) {
  return (
    <div>
      <ul>
        {marketplaceListings.edges.map(({ node }) => (
          <li key={node.id}>
            <div>App name: {node.app?.name}</div>
            <div>Description: {node.fullDescription}</div>
          </li>
        ))}
      </ul>
    </div>
  )
}

const query = graphql`
  query pages_index_MarketplaceListings_Query($first: Int) {
    marketplaceListings(first: $first) {
      edges {
        node {
          id
          app {
            name
          }
          fullDescription
        }
      }
    }
  }
`

export const getStaticProps = async () => {
  const environment = initEnvironment()
  try {
    const queryProps = await fetchQuery<pages_index_MarketplaceListings_Query>(environment, query, {
      first: 20,
    }).toPromise()
    const initialRecords = environment.getStore().getSource().toJSON()

    return {
      props: {
        ...queryProps,
        initialRecords,
      },
    }
  } catch (e) {
    console.error(e)
    throw e
  }
}

$ yarn run dev