Fragment Container

Step two is to render a tree of React components powered by Relay, which may include FragmentContainers, PaginationContainers, or RefetchContainers.

The most common are FragmentContainers, which you can use to declare a specification of the data that a Component will need in order to render. Note that a FragmentContainer won't directly fetch the data; instead, the data will be fetched by a QueryRenderer ancestor at the root, which will aggregate all of the data needed for a tree of Relay components, and fetch it in a *single round trip*.

Relay will then guarantee that the data declared by aFragmentContainer is available *before* rendering the component.

import React from "react"
import { createFragmentContainer, graphql } from "react-relay"
import { Link, Image, Name, Bio, View,} from "./views"

function ArtistHeader(props) {
  const {name, href, image, bio} = props.artist;
  const imageUrl = image && image.url;

  return (
    <Link href={href}>
      <Image imageUrl={imageUrl} />
      <View>
        <Name>{name}</Name>
        <Bio>{bio}</Bio>
      </View>
    </Link>
  );
}

export default createFragmentContainer(ArtistHeader, {
  artist: graphql`
    # This fragment is declaring that this component
    # needs an Artist, and these specific fields on
    # the Artist in order to render. Relay will
    # guarantee that this data is fetched and available
    # for this component.
    fragment ArtistHeader_artist on Artist {
      href
      bio
      name
      image {
        url
      }
    }
  `,
});