Relay with Next.js: Data Masking

const storyQuery = graphql`
  query StoryQuery($storyID: ID!) {
    story(id: $storyID) {
      title
      author {
        ...AuthorDetails_author
      }
    }
  }
`

function Story({ storyId }) {
  const { story } = useLazyLoadQuery(storyQuery, storyId)

  return (
    <>
      <Heading>{story?.title}</Heading>
      {story?.author && <AuthorDetails author={story.author} />}
    </>
  )
}

const storyQuery = graphql`
  query StoryQuery($storyID: ID!) {
    story(id: $storyID) {
      title
      author {
        name
        email
        phone
      }
    }
  }
`

function Story({ storyId }) {
  const { story } = useLazyLoadQuery(storyQuery, storyId)

  return (
    <>
      <Heading>{story?.title}</Heading>
      {story?.author && <AuthorDetails author={story.author} />}
    </>
  )
}

$ yarn add relay-hooks

  // <PROJECT_ROOT>/pages/_app.tsx
  import '../styles/globals.css'
- import { RelayEnvironmentProvider } from 'react-relay/hooks'
+ import { RelayEnvironmentProvider } from '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

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

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

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

- export default function Home({
-   marketplaceListings,
- }: InferGetStaticPropsType<typeof getStaticProps>) {
+ export default function Home() {
+   const { data, error, isLoading } = useQuery(query, { first: 20 })
    return (
      <div>
 +      {isLoading ? 'Loading...' : null}
        <ul>
 -        {marketplaceListings.edges.map(({ node }) => (
+        {data?.marketplaceListings.edges.map(({ node }) => (
            <li key={node.id}>
              <div>App name: {node.app?.name}</div>
              <div>Description: {node.fullDescription}</div>
            </li>
          ))}
        </ul>
      </div>
    )
  }

  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
    }
  }

<li key={node.id}>
  <div>App name: {node.app?.name}</div>
  <div>Description: {node.fullDescription}</div>
</li>

<ul>
  {data?.marketplaceListings.edges.map(({ node }) =>
    <MarketPlace
      key={node.id}
      name={node.app?.name}
      description={node.fullDescription}
    />
  )}
</ul>

// MarketPlace.tsx
import { graphql, useFragment } from 'relay-hooks'

const fragment = graphql`
  fragment MarketPlace_marketPlace on MarketplaceListing {
    app {
      name
    }
    fullDescription
  }
`

interface Props {
  marketPlace: any
}

export default function MarketPlace({ marketPlace }: Props) {
  const data = useFragment(fragment, marketPlace)

  return (
    <li>
      <div>App name: {data.app?.name}</div>
      <div>Description: {data.fullDescription}</div>
    </li>
  )
}

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

$ yarn relay

  // MarketPlace.tsx
  import { graphql, useFragment } from 'relay-hooks'

+ import type { MarketPlace_marketPlace$key } from '../__generated__/MarketPlace_marketPlace.graphql'

  const fragment = graphql`
    fragment MarketPlace_marketPlace on MarketplaceListing {
      app {
        name
      }
      fullDescription
    }
  `

  interface Props {
-   marketPlace: any
+   marketPlace: MarketPlace_marketPlace$key
  }

  export default function MarketPlace({ marketPlace }: Props) {
    const data = useFragment(fragment, marketPlace)

    return (
      <li>
        <div>App name: {data.app?.name}</div>
        <div>Description: {data.fullDescription}</div>
      </li>
    )
  }

<ul>
  {data?.marketplaceListings.edges.map(({ node }) =>
    <MarketPlace
      key={node.id}
      marketPlace={node}
    />
  )}
</ul>

{
  "query": "
    query pages_index_MarketplaceListings_Query($first: Int) {
      marketplaceListings(first: $first) {
        edges {
          node {
            id
            ...MarketPlace_marketPlace
          }
        }
      }
    }

    fragment MarketPlace_marketPlace on MarketplaceListing {
      app {
        name
        id
      }
      fullDescription
    }
  ",
  "variables": { "first": 20 }
}

{
  "data": {
    "marketplaceListings": {
      "edges": [
        {
          "node": {
            "id": "MDE4Ok1hcmtldHBsYWNlTGlzdGluZzEwMDA0",
            "app": {
              "name": "webext-bot",
              "id": "MDM6QXBwMTE3Mjg4"
            },
            "fullDescription": "webext-bot is an open-source Github Bot to report the web extension's size change and the web extension's version change on pull requests by adding checks as well as commenting on the pull request."
          }
        },
        ...
      ]
    }
  }
}

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