Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

let meaningOfLife = 41 + 1;

Slide 4

Slide 4 text

let add = (x, y) => x + y; add(2, 2); add(41, 1);

Slide 5

Slide 5 text

let fruits = ["Apple", "Orange"];

Slide 6

Slide 6 text

Goal: full stack GraphQL in Reason

Slide 7

Slide 7 text

Reason Syntax OCaml Syntax OCaml AST JavaScript BuckleScript

Slide 8

Slide 8 text

Reason Syntax OCaml Syntax OCaml AST Native Code JavaScript BuckleScript

Slide 9

Slide 9 text

Let’s go native

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

Benefits • The type of a field agrees with the return type of the resolve function. • The arguments of a field agrees with the accepted arguments of the resolve function. • The source of a field agrees with the type of the object to which it belongs. • The context argument for all resolver functions in a schema agree.

Slide 12

Slide 12 text

opam install graphql-lwt dune git clone [email protected]:andreas/ocaml-graphql-server.git cd ocaml-graphql-server/examples dune exec ./server.exe

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

Client?

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

yarn add reason-apollo # Add graphql_ppx yarn add --dev graphql_ppx # Add JS dependencies yarn add react-apollo apollo-client graphql … "bs-dependencies": [ "reason-react", "reason-apollo" ], "ppx-flags": [ "graphql_ppx/ppx" ] yarn send-introspection-query http://localhost:8080/graphql

Slide 18

Slide 18 text

{ "data": { "__schema": { "queryType": { "name": "query" }, "mutationType": null, "subscriptionType": { "name": "subscription" }, "types": [ { "kind": "OBJECT", "name": "subscription", "description": null, "fields": [ { graphql_schema.json

Slide 19

Slide 19 text

let inMemoryCache = ApolloInMemoryCache.createInMemoryCache(); let httpLink = ApolloLinks.createHttpLink(~uri="/api/graphql", ()); let instance = ReasonApollo.createApolloClient( ~link=httpLink, ~cache=inMemoryCache, () ); Instantiate a Apollo Client

Slide 20

Slide 20 text

ReactDOMRe.renderToElementWithId( , "root", ); Add a Apollo Provider

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

module GetUsers = [%graphql {| query users { users { id name } } |} ]; module GetUsersQuery = ReasonApollo.CreateQuery(GetUsers);

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

Let’s do it in TypeScript 1. Unique names for all your queries and mutation … (per directory?) 2. Download the schema
 apollo schema:download —endpoint=http://example.com graphql-schema.json 3. Generate the types
 apollo codegen:generate genTypes --schema=graphql-schema.json — queries=‘packages/**/src/**/*.ts*’ --passthroughCustomScalars -- customScalarsPrefix=GraphQl --addTypename --globalTypesFile=./packages/ types/src/global-graphql.ts 4. Import the Type and extend the Component

Slide 33

Slide 33 text

import { UsersQuery } from "./genTypes/UsersQuery"; const USERS_QUERY = gql` query UsersQuery { users { id name } } `; export default () => ( query={USERS_QUERY}> {({ loading, error, data }) => { if (loading) return
Loading…
; if (error) return
Error
; if (!data) return null; // NOTE guarding that data is not null
    {data.users.map(user => (
  • {user.name}
  • ))}
; }} );

Slide 34

Slide 34 text

import { UsersQuery } from "./genTypes/UsersQuery"; const USERS_QUERY = gql` query UsersQuery { users { id name } } `; export default () => ( query={USERS_QUERY}> {({ loading, error, data }) => { if (loading) return
Loading…
; if (error) return
Error
; if (!data) return null; // NOTE guarding that data is not null
    {data.users.map(user => (
  • {user.name}
  • ))}
; }} );

Slide 35

Slide 35 text

import { UsersQuery } from "./genTypes/UsersQuery"; const USERS_QUERY = gql` query UsersQuery { users { id name } } `; export default () => ( query={USERS_QUERY}> {({ loading, error, data }) => { if (loading) return
Loading…
; if (error) return
Error
; if (!data) return null; // NOTE guarding that data is not null
    {data.users.map(user => (
  • {user.name}
  • ))}
; }} );

Slide 36

Slide 36 text

Type generation safe yet another day!

Slide 37

Slide 37 text

Why care about Reason then?

Slide 38

Slide 38 text

Is it perfect?

Slide 39

Slide 39 text

Things I like to see • Records instead of objects • Lists instead of Js.Array • Correct auto-completion inside the GraphQL PPX • Formatting of PPX

Slide 40

Slide 40 text

So what now?

Slide 41

Slide 41 text

Don’t be that person

Slide 42

Slide 42 text

Time Innovation React Ecosystem

Slide 43

Slide 43 text

Time Innovation Reason Ecosystem React Ecosystem

Slide 44

Slide 44 text

https://egghead.io/courses/get-started-with-reason

Slide 45

Slide 45 text

https://www.reason-conf.com

Slide 46

Slide 46 text

The End