Adding a New Relay Component

Say you want to display a collection of artworks in a grid, backed by Relay. There are a few important steps.

First, you'll need a connection in Metaphysics that sits on an object with a [NodeInterface]. Here is an example that adds the conformance to [NodeInterface], adds the associated isTypeOf function, and adds the type to object_identification.js.

Next, you have to add the Relay connection to the Metaphysics type. This has been abstracted in Metaphysics and is relatively straightforward (here's an example). Make sure to update Emission's copy of Metaphysics' schema using yarn run sync-schema or sync-schema:localhost.

Okay so now that Relay support has been added to the GraphQL schema for the collection you want to display, you'll have some work in Emission to actually use the Relay API. You're going to create a new component that abstracts over InfiniteScrollArtworksGrid. Your component should be wrapped in a call to createPaginationContainer, which requires some boilerplate functions around getting the GraphQL fragment variables and the actual query you'll be making.

Now, where you use your new component, there are two important props to provide:

• mapPropsToArtworksConnection is a function that takes the content return by the Relay connection and returns the artworks that are associated with that content.
• mapConnectionNodeToArtwork is an optional prop that allows you to transform the nodes in the Relay edges into actual Artworks. By default, it assumes the nodes are already Artworks, but sometimes more complexity is required, like when the artworks are embedded within sale artworks.

Your component should now work! If you run into problems display subsequent pages (but the first page renders fine), double-check your getConnectionFromProps and make sure your fragment includes the __id field.