reason_example_1

reason_example_1.re

module Query = [%relay.query
  {|
    query AppQuery {
      messages {
        id
        text
        author {
          __typename
          ...on User {
            id
            name
            role
          }
          ...on Guest {
            placeholder
          }
        }
      }
    }
  |}
];

module Styles = {
  open Css;

  let app =
    style([
      display(`flex),
      justifyContent(`center),
      alignItems(`center),
      flexDirection(`column),
      minHeight(`vh(100.0)),
    ]);
};

[@react.component]
let make = () => {
  let query = Query.use(~variables=(), ());
  <div className=Styles.app>
    {Belt.Array.map(query.messages, message => {
       switch (message.author) {
       | `User(user) =>
         <div> {React.string(user.name ++ ": " ++ message.text)} </div>
       | `Guest(guest) =>
         <div>
           {React.string(guest.placeholder ++ ": " ++ message.text)}
         </div>

       | `UnmappedUnionMember => React.null
       }
     })
     ->React.array}
  </div>;
};