Use Relay with ReasonML.
npm install @dblechoc/reason-relayUse Relay with ReasonML.
Your components define what data they need through [%relay.fragment].
``reason
/ Avatar.re /
module UserFragment = [%relay.fragment
{|
fragment Avatar_user on User {
firstName
lastName
avatarUrl
}
|}
];
[@react.component]
let make = (~user as userRef) => {
let user = UserFragment.use(userRef);
src={user##avatarUrl}
alt={user##firstName ++ " " user##lastName}
/>;
};
`
Fragments can include other fragments. This allows you to break your UI into encapsulated components defining their own data demands.
`reason
/ UserProfile.re /
module UserFragment = [%relay.fragment
{|
fragment UserProfile_user on User {
firstName
lastName
friendCount
...Avatar_user
}
|}
];
[@react.component]
let make = (~user as userRef) => {
let user = UserFragment.use(userRef);
{React.string(
user##firstName
++ " has "
++ string_of_int(user##friendCount)
++ " friends.",
)}
Finally, you make a query using
and include the fragments needed to render the entire tree of components.`reason
/ Dashboard.re /
module Query = [%relay.query
{|
query DashboardQuery {
me {
...UserProfile_user
}
}
|}
];[@react.component]
let make = () => {
let queryData = Query.use(~variables=(), ());
};
``Check out the documentation (work in progress) here.
- TodoMVC implemented in ReasonRelay: https://github.com/zth/relay-examples/tree/master/todo-reason
- A general example showcasing most available features: https://github.com/zth/reason-relay/tree/master/example