Vous n’avez pas pu assister au dernier meetup JS de Mobiskill ? Voici un récap’ !
Par Aurélien David (CTO Cap Collectif)
What we tried :
Allows clients to ask what they want.
Easily aggregate data from multiple sources.
Uses a type system to describe the data.
Declare the data your components need with GraphQL, Relay determines how and when to fetch your data.
API → props
GraphQL is written next to the views that rely on them. Relay aggregates queries into efficient network requests.
Write GraphQL mutations and Relay offers automatic data consistency, optimistic updates, and error handling.
A set of 3 additional conventions to adopt on a GraphQL server.
Global Object Identification : A mechanism for storing and refetching an object.
Connections : Consistent abstractions for bi-directional pagination.
Input Object Mutations : Structure around mutations to make them predictable.
Data requirements are colocated with components.
Relay uses data masking (each component only see what it asked for), it improves reusability, refactoring and deleting code.
Use fragments everywhere and Relay will make sure every components has the data that they need. 👍
createPaginationContainer — a container that will refetch data based on pagination
Automate the boring pagination logic, only provides a loadMore method.
createRefetchContainer — a container that has a refetch query to get more data afterwards
For all other use cases:
sorting, filtering, loading more details, refreshing…
Provides a refetch method.
A Relay app always starts with a QueryRenderer and a tree of containers either fragments, refetch or pagination.
QueryRenderers can be rendered anywhere that a React component can be rendered.
QueryRenderer will fetch GraphQL data and pass that to render props.
QueryRenderer handles the state for loading, success and failure. 👌
It needs a Relay Environment which bundles together the configuration, cache storage, and network-handling that Relay needs in order to operate. ⚙️
The Relay Store is how Relay stores data of all fragments and queries. All records/nodes are normalized in the store, this is why we need a unique and global ID for each record.
Use commit Mutation to create and execute mutations.
Relay will automatically update the fields on the records referenced in the mutation response (using ids).
Relay re-renders live components with data updates.
You can also use an updater function for complex cases, or avoiding to ask a huge mutation payload.
Update the store before the mutation request has completed.
You can also use an optimisticUpdater function for complex cases.
How to replace Redux with Relay
The Relay compiler validates your queries against your GraphQL schema and enforces strict naming.
It will optimise all your queries and fragments, so you can have a great DX without losing performance 🔥
It emits types for your fragment’s fields selections and queries variables and responses.
Relay compiler plugins (typescript, flow and reasons) support
❤️ without the maintenance cost ❤️
Destroying the “Relay is hard” myth
Relay is an opinionated framework for building user interfaces.
😍 Remove most of data fetching code.
🚆 Optimistic UI and cached data.
✅ Generate Flow/Typescript typings using the strongly-typed schema.
Par Antoine Lépée (Engineer Manager Evaneos)
Constraint Validation API
Date de publication : 19 mars 2020