Skip to content

Instantly share code, notes, and snippets.

@lpalmes

lpalmes/App.js

Last active Nov 14, 2017
Embed
What would you like to do?
React Relay pseudo bindings
import { graphql } from 'react-relay'
const query = graphql`
query AppQuery(id: ID!) {
user(id: $id) {
id
name
}
}`
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>
}
}
)
/>
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;
};
@lpalmes

This comment has been minimized.

Copy link
Owner Author

@lpalmes lpalmes commented Nov 14, 2017

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.