Slides from the Meetup.com ReactJS talk in HubSpot - 2018-05-29 react-apollo is an opinionated GraphQL Javascript library built on the Apollo Client framework. In this presentation, we deep dive on the capabilities of react-apollo. The demo code can be accessed at https://github.com/smcelhinney/react-apollo-demo

1. react-apollo
Stephen McElhinney, Principal Developer @ HubSpot

2. Agenda
● GraphQL intro
● Apollo Client
● react-apollo Components
● Quick demo
● Questions?

3. GraphQL
● Query language & SDL
● Developed by Facebook, open-sourced/publicly released in 2015

4. GraphQL
Solves for:
● Over-fetching
● Multiple round trips
● API versioning and maintenance

5. GraphQL
https://www.graph.cool/
- Opinionated all-in-one BaaS for GraphQL
- Based on Apollo Server / Express
- CI / CD built in
- Playground

6. Apollo Client
https://www.apollographql.com/client/
- GraphQL Client framework
- Other JS and Native mobile
- Features
- Caching
- Optimistic UI
- Pagination / prefetching
- Developer tools

7. https://github.com/apollographql/react-apollo
- React library interface to Apollo Client framework
- Can be used multiple ways
- Component enhancer (similar to a HOC)
- Custom components (<Query> / <Mutation>)
- Local state management using the apollo-link-state
library - effectively negates the need for redux/MobX and other
state managers.
react-apollo

8. Component enhancer example
react-apollo
import { graphql } from 'react-apollo';
import gql from 'graphql-tag';
export default graphql(gql`
query someQuery {
...
}
`)(YourComponent);

9. Custom component example (<Query />)
react-apollo
import gql from 'graphql-tag';
import { Query } from 'react-apollo';
const GET_MOVIES = gql`{ movies { id year name } }`;
const MoviesDropDown = ({ onMovieSelected }) => (
<Query query={GET_MOVIES}>
{({ loading, error, data }) => {
if (loading) return 'Loading...';
if (error) return `Error! ${error.message}`;
return (
<select name="movies" onChange={onMovieSelected}>
{data.movies.map(movie => (
<option key={movie.id} value={movie.id}>
{movie.name} ({move.year})
</option>
))}
</select>
);
}}
</Query>
);

10. Demo.
react-apollo

11. Advanced
● Subscriptions
● Middleware/afterware
● Query/mutation batching
● Schema stitching
react-apollo

12. Questions?
react-apollo