Relay Modern — What is a Fragment?
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/
