Incremental Type Safety in React Apollo

with Reason
Incremental Type Safety
in React Apollo
Evans Hauser
Core Developer, Apollo

Apollo Project 🚀
import React from 'react';
import { render } from 'react-dom';
import ApolloClient from 'apollo-boost';
import { ApolloProvider } from 'react-apollo';
import App from ‘./App';
const client = new ApolloClient({
uri: ‘https://localhost:3010/graphql'
});
const ApolloApp = () => (
<ApolloProvider client={client}>
<App />
</ApolloProvider>
);
render(ApolloApp, document.getElementById('root'));)
index.js

import FreeJobPost from “./FreeJobPost.js” 
import PromotedPost from “./PromotedPost.js”
…
render() {
...
<FreeJobPost info={info1} />
<PromotedPost info={info4} />
...
}
App.js Adding to the 🚀

npm install bs-platform
npm install reason-react
{
"name": “package-name",
"sources": {
"dir": "src",
"subdirs": [“components"],
},
"reason": {
"react-jsx": 2
},
"refmt": 3
}
bsconﬁg.json
How to add Reason to your 🚀
Build: bsb -make-world
Watch: bsb -make-world -w

import PromotedPost from “./PromotedPost.bs.js”
render() {
...
<PromotedPost info={info4} />
...
}
App.js Inside the 🚀

let component =
ReasonReact.statelessComponent(“PromotedPost”);
let make = (~info, _children) => {
...component,
render: (self) =>
<div>
<Post text=info.text timeLeft=info.timeLeft />
</div>
};
let default =
ReasonReact.wrapReasonForJs(
~component,
(props) => make(~info=settingsInfoFromJs(props##info), [||])
);
PromotedPost.re Adding Reason

PromotedPost.re Adding Reason
let component =
...component,
render: (self) =>
<div>
</div>
};
let default =
~component,
);

let component =
ReasonReact.statelessComponent(“Post”);
let make = (~text, ~timeLeft, _children) => {
…component,
render: (self) =>
<input
_type=“checkbox”
value=text
checked=(text > 0)
/>
};
Post.re Reason Subcomponent

let component =
…component,
render: (self) =>
<input
value=text
checked=(timeLeft > 0)
/>
};
Post.re Reason Subcomponent

let component =
…component,
render: (self) =>
<input
value=text
checked=(Js.Boolean.to_js_boolean(timeLeft > 0))
/>
};
Post.re Javascript Interop

PromotedPost.re More Interop
let component =
...component,
render: (self) =>
<div>
<p>Promoted Posting:</p>
</div>
};
let default =
~component,
);

type postInfo = {.
“text”: string,
“timeLeft”: number
};
let postInfoFromJs = (jsInfo : postInfo) => {
text: jsInfo##text,
timeLeft: jsInfo##timeLeft
};
const examplePosting = {
“text”: “description of posting”,
“timeLeft”: 200
};
Defining TypesPromotedPost.re
App.js

What about GraphQL 🤔
Typed Query Language
Strong Reason support

Creating separation through GraphQL

npm install graphql_ppx
npm install reason_apollo
{
"bs-dependencies": [
"reason-react",
“reason-apollo"
],
"ppx-flags": [
"./node_modules/graphql_ppx/ppx -ast-out"
],
}
bsconﬁg.json
Adding GraphQL to your 🚀

Separation through GraphQL
module PromotedPostQuery = [%graphql {|
query getPromotedPosts {
info {
text
timeLeft
}
}
|}];
let promotedPosts = PromotedPostQuery.make(());
GqlPost.re

let component = ReasonReact.statelessComponent("PromotedPost");
[@bs.module "react-apollo"] external gql: 'a =>
[@bs] ReasonReact.reactClass => ReasonReact.reactClass = "graphql";
let wrap = (gql (promotedPosts##query));
let default =
[@bs] wrap (ReasonReact.wrapReasonForJs(
~component,
(props : {..
"data": {..
"data": TodosQuery.t,
"loading": Js.boolean,
}
}) => make(~result=props, [||])
)
));
GqlPost.re

A Possible API
module PromotedPostQuery = [%graphql {|
query getPromotedPosts {
info {
text
timeLeft
}
}
|}];
let make = (~result, _children) => {
...component,
render: (self) =>
if(Js.to_bool (result##loading)){
<div> <String text="Loading"/> </div>
} else {
let text = result##data##info##text;
let timeLeft = result##data##info##timeLeft;
<div>
</div>
}
};
let default = ReasonApollo.graphql (PromotedPostsQuery) {"PromotedPost", make);

Let’s collaborate!
Evans Hauser
@evanshauser
evans@apollograpql.com
• Next Steps:
• Ensure that your types work
across the client server
boundary
• Manage client-side state with
apollo-link-state
Huge thank you to Ben Souci for his
help putting together this talk!

Incremental Type Safety in React Apollo

More Related Content

What's hot (20)

Similar to Incremental Type Safety in React Apollo (20)

Recently uploaded (20)

Incremental Type Safety in React Apollo