@dblechoc/reason-relay
Use Relay with ReasonML.
Last updated 10 months ago by dblechoc .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @dblechoc/reason-relay 
SYNC missed versions from official npm registry.

reason-relay

Use Relay with ReasonML.

What it looks like

Your components define what data they need through [%relay.fragment].

/* 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);

  <img
    className="avatar"
    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.

/* 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);

  <div>
    <Avatar user />
    <h1> {React.string(user##firstName ++ " " ++ user##lastName)} </h1>
    <div>
      <p>
        {React.string(
           user##firstName
           ++ " has "
           ++ string_of_int(user##friendCount)
           ++ " friends.",
         )}
      </p>
    </div>
  </div>;
};

Finally, you make a query using [%relay.query] and include the fragments needed to render the entire tree of components.

/* Dashboard.re */
module Query = [%relay.query
  {|
  query DashboardQuery {
    me {
      ...UserProfile_user
    }
  }
|}
];

[@react.component]
let make = () => {
  let queryData = Query.use(~variables=(), ());

  <div> <UserProfile user={queryData##me} /> </div>;
};

Getting started

Check out the documentation (work in progress) here.

Examples

Current Tags

  • 0.6.1                                ...           latest (10 months ago)

11 Versions

  • 0.6.1                                ...           10 months ago
  • 0.6.0                                ...           10 months ago
  • 0.5.9                                ...           10 months ago
  • 0.5.8                                ...           10 months ago
  • 0.5.7                                ...           10 months ago
  • 0.5.6                                ...           10 months ago
  • 0.5.5                                ...           10 months ago
  • 0.5.4                                ...           10 months ago
  • 0.5.2                                ...           10 months ago
  • 0.5.1                                ...           10 months ago
  • 0.5.0                                ...           10 months ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (2)
Dev Dependencies (16)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |