Hey all, we have another guest post, this one comes from Sibelius Seraphini - a very active contributor to
Relay and its eco-system. When we spotted he had wrote an amazing article on how the networking aspects of Relay
comes together, we wanted to expand his reach and inform more people on how Relay comes together.
Data fetching is a hard problem for apps. You need to ask yourself a lot of questions: How do you ask for data from
a server? How do you handle authentication? When is the right time to request data? How can you ensure you have all
the necessary data to render your views? How can you make sure you're not over-fetching? Can you do lazy loading?
When should you trigger lazy loading of data? What about pre-fetching data?
Relay is a framework for building data-driven applications which handles data fetching for you. For an
introduction to Relay, read their docs, and also check out my Relay talk at React Conf BR.
You don’t deep dive if you don’t know how to swim
TL;DR Relay Modern Network
Relay will aggregate the data requirements (fragments) for your components, then create a request to fulfill it. The
API to do this is via the Relay Environment:
The Relay "Environment" bundles together the configuration, cache storage, and network-handling that Relay needs
in order to operate.
This post focuses on the "network-handling" part, the Network Layer. The network layer's responsibility
is to make a request to a server (or a local graphql) and return the response data to Relay. Your implementation
should conform to either FetchFunction for a Promise-like API, or SubscribeFunction for an
This article will provide 5 implementations of a Relay Network Interface, each of one providing more capabilities
than the other one, eventually enabling GraphQL Live Queries and Deferrable Queries.
You can see the code for these 5 network layers on GitHub here, open source under MIT license:
Read on →