Relay Modern — What is a Fragment?

Sibelius Seraphini
2 min readDec 19, 2018


Photo by Susan Holt Simpson on Unsplash

A fragment is the building block of Relay Modern. A fragment enables a component to declares which data is requires.

Much like you declare your component styles in the same file of your component when using CSS in JS, when using Relay you can also declares which data it requires from the server.

Creating a simple fragment container

Imagine your are building a social network, you going to have a list of Posts on it. So you need to have a Post component like this:

The question is how you going to make the component Post receive the prop post.

If you are using REST, you going to need to hit an endpoint, save the post in a state or Redux, you need to think imperatively on how to achieve this data fetching logic.

However, if you are using Relay, you can just create a fragment for this Post declaring which data it needs from your GraphQL server, like this:

What's next?

There are 3 types of containers in Relay Modern: createFragmentContainer, createPaginationContainer and createRefetchContainer.

I'll deep dive on each one of them in the next blog posts about Relay Modern.

We have some relay examples on react and react native on our playground

Check more about playgrounds here

Ping me on twitter if you have any questions:


Subscribe to my newsletter for new content



Recommended from Medium


See more recommendations