Building GraphQL apps with Reason React and Dgraph

ReasonML offers nearly flawless type-safety for developing your UI. With its static type system, you can eliminate errors before your app is even live. GraphQL is a query language for APIs, which introduces the type system to APIs.

In the talk, let's walk through the why to and how to's of building GraphQL applications with ReasonReact and GraphQL!

Transcript

1. graphql.dgraph.io Building GraphQL apps with Reason React
2. graphql.dgraph.io About me Karthic Rao, Developer Advocate, Dgraph Labs @hackintoshrao, @dgraphlabs @hackintoshrao @hackintoshrao
3. graphql.dgraph.io Table of contents - Reason and types. - GraphQL and types. - Introduction to Dgraph. - Introduction to Reason React. - Building GraphQL apps in Reason React.
4. graphql.dgraph.io Reason and types - Automatic type inferences. - Better runtime safety guarantees than type script.
5. graphql.dgraph.io My ReasonML journey - Intimidated about writing safe and performant JS code and having to follow 100’s of best practices. - That’s when ReasonML appealed to me. - My Reason Journey: - Learnt the syntax first. - Then ReasonReact. - At last, GraphQL + ReasonReact.
6. graphql.dgraph.io Intro to GraphQL - New API paradigm for clients and servers. - Introduces type system into APIs. - Single REST endpoint to get or send data from/to the server - Encourages front-developers to model their application data as a graph. - Intuitive Graph query language makes data fetching for even the most complex UI simple.
7. graphql.dgraph.io Intro to Reason React
8. graphql.dgraph.io You need GraphQL API first - GraphQL is great for front-end developers, but you first need a GraphQL API served by a GraphQL web server and a storage engine backed by a database. - You might have questions that bother you regarding the scalability and performance of your GraphQL API, as your application grows and becomes more complex.
9. graphql.dgraph.io Putting the graph back in GraphQL
10. graphql.dgraph.io Using Dgraph’s GraphQL API • Step 1: You give us your types • Step 2: You get a full GraphQL API, powered by Dgraph!
11. graphql.dgraph.io type Product { productID: ID! name: String @search(by: [term]) reviews: [Review] @hasInverse(field: about) } type Review { id: ID! about: Product! @hasInverse(field: reviews) by: Customer! @hasInverse(field: reviews) comment: String @search(by: [fulltext]) rating: Int @search } type Customer { custID: ID! name: String @search(by: [hash, regexp]) reviews: [Review] @hasInverse(field: by) } Give us your types
12. graphql.dgraph.io getProduct(id: ID!): Product queryProduct( filter: ProductFilter order: ProductOrder first: Int offset: Int ): [Product] addProduct(input: ProductInput!): AddProductPayload updateProduct(input: UpdateProductInput!): UpdateProductPayload deleteProduct(filter: ProductFilter!): DeleteProductPayload Get a full, idiomatic GraphQL API! getCustomer(id: ID!): Customer queryCustomer( filter: CustomerFilter order: CustomerOrder first: Int offset: Int ): [Customer] addCustomer(input: CustomerInput!): AddCustomerPayload updateCustomer(input: UpdateCustomerInput!): UpdateCustomerPayload deleteCustomer(filter: CustomerFilter!): DeleteCustomerPayload getReview(id: ID!): Review queryReview( filter: ReviewFilter order: ReviewOrder first: Int offset: Int ): [Review] addReview(input: ReviewInput!): AddReviewPayload updateReview(input: UpdateReviewInput!): UpdateReviewPayload deleteReview(filter: ReviewFilter!): DeleteReviewPayload
13. graphql.dgraph.io type Product { productID: ID! name: String @search(by: [term]) reviews: [Review] @hasInverse(field: about) } type Review { id: ID! about: Product! @hasInverse(field: reviews) by: Customer! @hasInverse(field: reviews) comment: String @search(by: [fulltext]) rating: Int @search } type Customer { custID: ID! name: String @search(by: [hash, regexp]) reviews: [Review] @hasInverse(field: by) } All of that, from just your types!
14. graphql.dgraph.io Dgraph, the most advanced Graph Database - Distributed, with horizontal scalability in mind. - Fast. Inspired by a search engines, written in Go. - ACID transactions, because we love your data. - Highly available, because who likes downtime? - High performance Graph engine, who likes to wait? - And all of this is Open Source. - And more: - Binary backups, ACLs, compression, encryption ...
15. graphql.dgraph.io High performance GraphQL API • Native GraphQL lexer and parser. • Resolve your GraphQL queries and mutation in just one network call to the database. • Built from ground up to efficiently resolve deep mutation and queries. • Backed by the distributed Graph Database, scales seamlessly.
16. graphql.dgraph.io graphql.dgraph.io Get started! > docker run -it -p 8080:8080 dgraph/standalone:v1.2.0-rc1
17. graphql.dgraph.io Submit your types to Dgraph > Save your GraphQL type in a text file. > jq -n --arg schema "$(cat schema.graphql)" '{ query: "mutation updateGQLSchema($sch: String!) { updateGQLSchema(input: { set: { schema: $sch }}) { gqlSchema { schema } } }", variables: { sch: $schema }}' | curl -X POST -H "Content-Type: application/json" http://localhost:8080/admin -d @- | jq -r
18. graphql.dgraph.io Developing GraphQL apps in ReasonReact Let’s see the app in action
19. graphql.dgraph.io graphql.dgraph.io Try it now!
20. graphql.dgraph.io Links and resources • https://reasonml.github.io/reason-react/ • https://reasonml.github.io/ • https://github.com/hackintoshrao/React-Reason-Dgraph-app • dgraph.io • graphql.dgraph.io • blog.dgraph.io • github.com/dgraph-io/dgraph • @dgraphlabs, @hackintoshrao