The great journey from RESTful to GraphQL - ReactJS Bulgaria, Summer Meetup

Transcript

1. THE GREAT JOURNEY FROM RESTFUL TO GRAPHQL 1
2. PHILIP SOTIROV @fipo https://twitter.com/fipo
 http://github.com/fipo 2 Software Developer | Father of two | Dreamer and Bike enthusiast
3. RESTFUL API’S 3 1. over-fetching data 2. multiple requests 3. custom endpoints
4. 4 It's not a lib It's not lang specific It's a Query Language
5. GRAPHQL BASICS - QUERIES 5 query { user(uid: "f3677403-a924-48cf-aa80-45ef4dac12ae") { uid username followers { uid username } } } A Simple Query
6. GRAPHQL BASICS - QUERY RESPONSE 6 And the response { "data": { "user": { "uid": "f3677403-a924-48cf-aa80-45ef4dac12ae", "username": "fipo", "followers": [ { "uid": "...", "username": "rado" }, { "uid": "...", "username": "ReactNotaConf" }, ] } } }
7. GRAPHQL BASICS - SCHEMA 7 Schema Driven Development It's not a one-to-one database mapping schema.graphql type User { uid: String! username: String! followers: [Followers]! } type Followers { uid: String! username: String! rights: Boolean! }
8. RESTFUL VS GRAPHQL 8 https://jsonplaceholder.typicode.com /posts
 /posts/1 /posts/1/comments [{ userId: 1, id: 1, slug: "write-tests-not-too-many-mostly-integration", title: "Write tests. Not too many. Mostly integration.", summary: "Guillermo Rauch tweeted this a while back. …", body: "..." commentsURI: "/posts/1/comments", imageURI: "/posts/1/image" }] [{ postId: 1, id: 1, name: "John Snow", email: "john@snow.com", body: "Yeah it's awesome", }]
9. RESTFUL: REDUX & REDUX-SAGA WAY 9 import { all, call } from 'redux-saga/effects' const post = yield call(fetch, `/posts/${id}`) const commentsURI = post.data.commentsURI; // '/posts/1/comments' const comments = yield call(fetch, commentsURI) This should be the right way import { all, call } from 'redux-saga/effects' const [post, comments] = yield all([ call(fetch, `/posts/${id}`), call(fetch, `/posts/${id}/comments`) ]) The “Clever” way
10. THE GRAPHQL APOLLO-CLIENT WAY 10 Query query { post(id: $uid) { title body image comments { uid name body } } } { "data": { "post": { "title": "Write tests. Not too many. Mostly integration.", "body": "...", "image": "http://placekitten.com/200/300" "comments": [ { "uid": "...", "name": "rado", "body": "..." }, { "uid": "...", "name": "ReactNotaConf", "body": "..." }, ] } } } Response
11. THE GRAPHQL APOLLO-CLIENT WAY 11 schema.graphql type Post { uid: String! title: String! body: String! image: String! comments: [Comments] } type Comments { uid: String! name: String! body: String }
12. THE GRAPHQL APOLLO-CLIENT WAY 12 Random Fetch React Component <ApolloProvider client={apolloClient}> <div className="App"> <Query query={queryPost} variables={{ uid: "1" }}> {({ loading, error, data, refetch }) => { if (loading) return "Loading ..."; if (error) return `${error}`; return ( <div className="post"> <h1>{data.post.title}</h1> <article>{data.post.body}</article> <ul> {data.post.comments.map( ({ uid, name, body }) => ( <li key={uid}>{name}: {body}</li> )) } </ul> </div> ); }} </Query> </div> </ApolloProvider> const queryPost = gql` query Post($uid: UUID!) { post(uid: $uid) { title body image comments { uid name body } } } `;
13. THE GRAPHQL APOLLO-CLIENT WAY 13 Random Mutate React Component <ApolloProvider client={apolloClient}> <div className="App"> <Mutation mutation={mutationPost} refetchQueries={['Post']} awaitRefetchQueries > {(mutate, {loading) => ( <Form onSubmit={values => mutate({ variables: {key: value} })} > ... </Form> )} </Mutation> </div> </ApolloProvider> const mutationPost = gql` mutation CreateNewPost($input: PostInput!){ createNewPost(input: $input){ uid ... } } `;
14. MATH.RANDOM() 14 So Long, and Thanks for All the Fish
15. WE ARE HIRING 15 https://receiptbank.workable.com/