Facebook Launches Relay Data Framework

Facebook announced that their declarative data framework, Relay, is out of technical preview and is now open source.

Relay handles data requests in a different way than typical data libraries. Rather than defining every step in the process to retrieve data, Relay lets developers declare the data they need. The framework takes care of the "how". In a post announcing the launch of Relay, Timothy Yung says Facebook needed to build Relay because previous solutions were too fragile:

Relay provides a way for React applications to declaratively specify data requirements instead of imperatively dictating instructions for how to fetch that data. And similar to how declarative components allow React to efficiently batch view operations, declarative data requirements allow Relay to efficiently batch network requests.

At the core of Relay is GraphQL, which turns the idea of data requests on its head. Instead of calling a REST endpoint and handling whatever the server sends back, GraphQL lets clients state the data they need and the server responds with just that. Here's an example GraphQL request:

{
  album(id: 12) {
    id,
    title,
    artist {
        id,
        name
    },
    releaseDate,
    upc
  }
}

The response from the server is standard JSON:

{
    "album": {
        "id": 12,
        "title": "Random Access Memories",
        "artist": {
            "id": 1,
            "name": "Daft Punk"
        },
        "releaseDate": "2013-05-17",
        "upc": "888837168618"
    }

}

One advantage of GraphQL is that the server can provide an entire object hierarchy in a single request. In a post on GraphQL, Facebook developer Lee Byron says this is different than "a RESTful service [which] may require multiple round-trips (resource-intensive on mobile networks) or a complex join statement in SQL."

Relay offers colocation, where the data queries live in the same spot as the views. Yung says colocation "makes it easier to spot both under-fetching (data is used in rendering code but not declared) and over-fetching (data is declared but not used in rendering code)."

Albert Still wrote about his experience with Relay and says that while it is powerful, "there is a lot to learn and some of the example code is long in comparison to the short neat examples we saw with React." He recommends spending a few days getting comfortable with Relay and that the end result is "magic".

Facebook has set up a Relay website where developers can learn more about the project.