Introduction to Realy in Relay React

Introduction to Relay

It can be challenging to choose the ideal data architecture for a client-server web application. When attempting to construct a data architecture, there are a plethora of considerations to be made. For instance :

• How are we going to get data off the server ?
• What happens if that fetch doesn't work ?
• How do we query the dependencies and relationships amongst the data ?
• How can we maintain data consistency throughout the app ?
• How can we prevent developers from unintentionally breaking each other's components ?
• How can we create our app-specific functionality more quickly rather than spending hours transferring data back to and from our server ?

React relay, thankfully, provides a theory for each of these problems. Even better : it is an application of that principle and is a delight to use once you get used to it.

Relay react is excellent due to :

• components declare the information they require to function
• It controls when and how we retrieve data.
• It sensibly aggregates queries so that we don't fetch more information than is necessary.
• It provides us with precise guidelines for navigating the connections among our objects and altering them.

Before making the query, each component states what it requires, and Relay react determines if there is any repetition. Each component will receive the exact information it requested from Relay after the queries and responses have been processed and aggregated.

You can use GraphQL without React relay. Theoretically, you can build a GraphQL server with pretty much any schema you desire. Your GraphQL server must, however, adhere to the React relay specification to be Relay-compatible.

Is Relay a Data Architecture?

A client-side JavaScript library called Relay is used. A relay will retrieve data from your server after you have connected it to your React components. We'll also talk about how important it is for your server to follow Relay's protocol.

Relay react is intended to serve as your React app's data foundation. As a result, Relay react is what we should ideally utilize to load all of our data and to keep our application's state in its authoritative, centralized point.

React relay can cache data and effectively handle queries because it has its store. If two components are involved in the same information, the relay will merge the two searches into one and then give the relevant data to each component.

As a result, we need fewer server requests overall while yet enabling individual components to specify the data they require locally.

Because React relay keeps central storage of your data, this implies it's not truly compatible with several other data architectures that have a central store, like Redux. Since there cannot be two central stores of state, Redux and Relay as they exist now are effectively incompatible.

Advantage Using of Relay

Our experience with React has strongly influenced Relay's approach to data-fetching. React, in particular, decomposes complex interfaces into reusable components, enabling developers to think about distinct application components independently and lowering the dependency between various application components. Even more crucial is the declarative nature of these components, which let programmers declare the UI's look for a given state without being concerned about how to display it. Unlike other approaches that employed imperative instructions to change native views (e.g., the DOM), React determines the relevant commands using a UI description.

What is GraphQL?

GraphQL is a data querying language created to represent the complex, nested data dependencies of modern systems. For many years, Facebook's native apps have been using it in production.

We set up the GraphQL system for mapping the queries to the underlying data-fetching code on the server. GraphQL may function with any underlying storage system because of this configuration layer. The query language used by Relay is GraphQL, however, it is not constrained to any one implementation of GraphQL.

How GraphQL is Related to Relay?

We must make clear the relation between Relay and GraphQL.

Our GraphQL server specifies the GraphQL schema we use and the guidelines to resolve queries against the schema. You can define a huge variety of schemas with GraphQL alone. In most cases, it doesn't specify how the structure of the schema would be organized.

On top of GraphQL, Relay provides a set of conventions. Your GraphQL server needs to follow a particular set of rules to use Relay.

These conventions are, in general :

• A means of fetching any object by ID (irrespective of the type)
• An approach that uses pagination to traverse "connections," or relationships between objects
• A structure based on changing data including mutations.

These three requirements enable us to create advanced, efficient applications.

React Relay’s Relation with Flux

Relay draws some inspiration from Flux, although the conceptual model is considerably more straightforward. One central store serves as the cache for all GraphQL data rather than several independent stores. The framework itself can keep track of the data that each component asks for and which components need to be updated when the data change, replacing the need for explicit subscriptions. Instead of actions, mutations are used to make changes.

We have apps at Facebook that are wholly designed using Flux, entirely with Relay, or with both. One pattern we notice is letting Relay handle the majority of an application's data flow while using Flux stores to handle a portion of the application's state on the side.