React Relay pseudo bindings

App.js

import { graphql } from 'react-relay'

const query = graphql`
  query AppQuery(id: ID!) {
    user(id: $id) {
      id
      name
     }
   }`

example.re

type error = string;

type user = Js.t {. id: string, name: string};

type props = Js.t {. user: user};

type renderProps = Js.t {. error : error, props : Js.null_undefined props};

<ReactRelay.QueryRenderer
        environment
        variables={"id": "1"}
        query=[%bs.raw {| require("./__generated__/AppQuery.graphql.js") |}] //You have to precompile your query and use it here, there is a problem with babel and reason bindings, i haven't figured it out yet
        render=(
          fun (renderProps: renderProps) => {
            let queryProps = Js.Null_undefined.to_opt renderProps##props;
            switch queryProps {
            | None => <h1>(ReasonReact.stringToElement "Loading")</h1>
            | Some props =>
              <h1>(ReasonReact.stringToElement props##user##name)</h1>
            }
          }
        )
      />

ReactRelay.re

type environment;

type graphqlTag;

module QueryRenderer = {
  type renderProps 'error 'props = Js.t {. error : 'error, props : 'props};
  external queryRenderer : ReasonReact.reactClass =
    "QueryRenderer" [@@bs.module "react-relay"];
  let make
      (type error props)
      environment::(environment: environment)
      query::(query: graphqlTag)
      render::(render: renderProps error props => ReasonReact.reactElement)
      variables::(variables: 'variables)
      children =>
    ReasonReact.wrapJsForReason
      reactClass::queryRenderer
      props::{
        "environment": environment,
        "query": query,
        "render": render,
        "variables": variables
      }
      children;
};

First you have to run the relay-compiler so it can compile the query inside the App.js file, then you can import it from example.re file, is really ugly, i know, we have to work around the relay compiler and babel plugins