7/27/2023 0 Comments Modern metaIn the same way that React allows developers to express what should be rendered rather than how, Relay allows developers to specify what data is required instead of how to load, cache, and update it. Since introducing colocated data and views in Relay, we've applied this approach everywhere that we use GraphQL at Facebook, and we recommend colocation to the GraphQL community as a best practice. Relay containers integrate seamlessly with React and GraphQL: They're regular React components that compose together as developers expect, and the GraphQL fragments compose together using standard GraphQL syntax. The shape of the fragment matches what is expected in props. View: A React component (functional or class) Here's an example of a Relay Modern container that renders a user's name and profile photo and specifies its data dependencies accordingly:Ĭonst UserProfile = Relay.createFragmentContainer( The GraphQL query for News Feed can be broken down into fragments for stories, which are composed of fragments for the header, body, comments, and so on.Īs we built Relay, we realized that these concepts could be aligned to form a powerful unit of abstraction: containers that colocate both the view logic and the data dependencies of each component. Similarly, GraphQL fragments are composable units for describing data dependencies. This approach also enables reuse: The same story component used in News Feed might be used for a story detail page. Each of these pieces of the UI is described by a React component, allowing developers to reason locally about their application. News Feed is a collection of stories a story has a header, body, and list of comments each comment has an author and text and so on. When building UIs in React, we describe an entire application as a set of nested components. To do so, Relay introduces two concepts: colocated data and view definitions, and declarative data fetching. Our goal with Relay is to allow developers to move fast by focusing more on building their applications and less on re-implementing these complex and error-prone details. Standard approaches can also break the encapsulation of code, requiring developers to make modifications across the codebase to achieve even small changes. For example, as our applications grew larger, it became more challenging to manage network requests, error handling, and data consistency, among other concerns. While it is possible to use these technologies together without any framework, we found that this approach didn't always scale to meet our needs. It combines React for composable user interfaces and GraphQL for composable data fetching. Relay is our JavaScript framework for building data-driven applications. In this post, we'll give a brief overview of Relay and then look at what's new in Relay Modern. Today, we're releasing Relay Modern, a new version of Relay designed from the ground up to be easier to use, more extensible and, most of all, able to improve performance on mobile devices.
0 Comments
Leave a Reply. |