Apollo Client is a community driven, powerful and flexible GraphQL client which brings an entire new world of data management to your applications. Yuri is a JavaScript anarchist. He merges directly to the master branch, doesn’t move tickets in Jira and make mistakes in Pull Requests on purpose just to test colleagues. Believes that REST is dead and GraphQL is a new way to better living.

1. ¡Holá Barcelona!

2. The client we deserve

3. Yuri Yakovlev
twitter: @yakovlevyuri
web: https://yakovlevyuri.com
Full Stack JavaScript Developer

4. Basic setup
Queries
Data store
Mutations
Apollo benefits
Do we need any client?
What is it all about?
Developer tools

5. Why choose a GraphQL client?
!
Keep local cache consistent
Managing up websockets
Caching

6. Small and flexible
Community driven
Debugging tools
Works with everything
Easy to integrate
But why Apollo?

7. Framework agnostic

8. Basic setup
💥

9. `apollo-boost`
the easiest way to start using
Apollo Client
Get started

10. Easy as one-two-three…
yarn add apollo-boost react-apollo graphql
#
import ApolloClient from 'apollo-boost';
const client = new ApolloClient(); $
<ApolloProvider client={client}>
<App />
</ApolloProvider> %

11. import React from 'react';
import { render } from 'react-dom';
import ApolloClient from 'apollo-boost';
import { ApolloProvider } from 'react-apollo';
// Pass your GraphQL endpoint to uri
const client = new ApolloClient({
uri: ‘https://graphql.kiwi.com/'
});
const ApolloApp = () => (
<ApolloProvider client={client}>
<App />
</ApolloProvider>
);
render(ApolloApp, document.getElementById('root'));

12. Queries
🤔

13. import { Component } from 'react';
import { graphql } from 'react-apollo';
import gql from 'graphql-tag';
class Rates extends Component { ... }
// We use the gql tag to parse our query string into a query
document
const getRatesQuery = gql`
query rates {
rates {
usd
btc
}
}
`;
const RatesWithData = graphql(getRatesQuery)(Rates);

14. (props) => {
const loading = props.data.loading;
const error = props.data.error;
const rates = props.data.rates;
if (loading) return <div>Loading...</div>;
if (error) return <div>Something happened: {error}</div>;
return (<p>{rates.btc}</p>);
}
Props are cool now

15. Apollo Client 2.1 soon release
And it brings us Query Components!
🎉
yarn add react-apollo@beta

16. Old Fashion HOC
class Rates extends Component {
render() {
const { loading, error, data } =
this.props;
return ( ... )
}
}
const RatesWithData =
graphql(getRatesQuery)(Rates);
👎Apollo v1/v2

17. Query Components
export const Rates = () => (
<Query query={getRatesQuery}>
{({ loading, error, data }) => {
...
}}
</Query>
)
😍Apollo v2.1

18. Mutations
🧟

19. import { Component } from 'react';
import { graphql } from 'react-apollo';
import gql from 'graphql-tag';
class NewPayment extends Component { ... }
const addPaymentMutation = gql`
mutation addPayment {
addPayment(currency: "btc", value: "0.492") {
createdAt
}
}
`;
const NewPaymentWithData = graphql(addPaymentMutation)
(NewPayment);
Basic mutations

20. const NewPayment = ({ addPayment }) => (
<button onClick={() => addPayment('btc', '0.492')}>
Add Payment
</button>
);
const addPaymentMutation = gql`
mutation addPayment($currency: String!, $value: String!) {
addPayment(currency: $currency, value: $value) {
id
}
}
`;
const NewPaymentWithData = graphql(addPaymentMutation, {
props: ({ mutate }) => ({
addPayment: (currency, value) => mutate({ variables:
{ currency, value } }),
}),
})(NewPayment);

21. Apollo Cache
👜

22. Apollo v1.0
Apollo v2.0
apollo-cache-inmemory
(normalized data
store)

23. Direct Cache Access
writeQuery
writeFragment
readFragment
readQuery

24. Apollo Client Devtools
🤖

25. Supported browsers
Google Chrome
FirefoxSafari
Electron App
Soon…Already available

26. GraphiQL tab

27. Query inspector

28. Mutation log

29. Store inspector

30. Quick recap
👊

31. QA time
❓

32. Thank you for your attention
and let’s build some cool stuff
together at Kiwi.com
web: https://yakovlevyuri.comtwitter: @yakovlevyuri