Build your backend with GraphQL and Serverless in Redux style

What if it was possible to build backend features for our react apps in the same way that we use redux in our react apps? In this live-coding demo, I will show you how we’ll add backend business logic using the redux abstractions of dispatching actions, writing reducers as pure functions and subscribing to updated state. Our backend will be completely serverless and using open-source and managed services so that we’re not actually deploying and maintaining any servers. We will use GraphQL mutations from our React app to dispatch actions. These will trigger serverless functions which are pure and return the modified state, which will be persisted safely on a cloud managed database. Portions of your app that are subscribed to the state using GraphQL subscriptions (live-queries) will automatically update! You will witness the raw awesomeness of being able to use JavaScript and GraphQL in a pattern that you are comfortable with to build backend features from scratch.

Presented at React India 2019

Transcript

1. shahidh_k Build your backend with GraphQL and Serverless in Redux style React India 2019 1
2. shahidh_k 2 I’m Shahidh
3. shahidh_k Redux is awesome! 3
4. shahidh_k 4 UI - 1 Dispatch Reducer State update UI - 2 UI - 3 State on the UI
5. shahidh_k Serverless 5
6. shahidh_k Serverless $ cat index.js exports.function = (req, res) => { res.json({"message": "Hello World"}); } 6 $ serverless functions deploy hello_world --trigger-http https://serverless.functions.net/hello_world $ curl https://serverless.functions.net/hello_world {"message": "Hello World"}
7. shahidh_k GraphQL 7
8. shahidh_k REST vs GraphQL Product Brand Category GET PUT POST PATCH DELETE GET PUT POST PATCH DELETE GET PUT POST PATCH DELETE ProductWithBrand 8
9. shahidh_k 9 UI - 1 GraphQL Mutation Serverless Function GraphQL Subscription UI - 2 UI - 3 State on the UI State on the backend
10. shahidh_k Demo App: Sanitize Text / Filter bad words 10
11. shahidh_k 11 Type bad content GraphQL Mutation Serverless Function GraphQL Subscription Show clean content State on the UI State on the backend *BREAKING NEWS: Speaker uses own project!
12. shahidh_k Demo Time 12
13. shahidh_k Cool! Something complex? 13
14. shahidh_k Food ordering app 14 https://serverless-demo.hasura.app/
15. shahidh_k Order state machine is_validated | false is_paid | false is_approved | false is_agent_assigned | false is_validated | true is_paid | false is_approved | false is_agent_assigned | false is_validated | true is_paid | true is_approved | false is_agent_assigned | false is_validated | true is_paid | true is_approved | true is_agent_assigned | false is_validated | true is_paid | true is_approved | true is_agent_assigned | true Checks payment Validate order Restaurant approval Agent assignment 15
16. shahidh_k 16 Thanks github.com/shahidhk/dangerous-tweets