Relay Modern — What is a Fragment?

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 https://github.com/entria/entria-fullstack

Check more about playgrounds here https://medium.com/@sibelius/why-your-company-should-have-an-open-source-playground-4bb93068ce95

Ping me on twitter if you have any questions: https://twitter.com/sseraphini

Newsletter

Subscribe to my newsletter for new content https://sibelius.substack.com/

CTO Entria, Feedback House, Log.ID, Brand Lovers

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store