Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Apollo 2.0: Novas funcionalidades e melhorias de performance
Similar to Apollo 2.0: Novas funcionalidades e melhorias de performance (20)
Recently uploaded
Recently uploaded (20)
Apollo 2.0: Novas funcionalidades e melhorias de performance
- 1. 2.0 Aplicado num projeto mobile Jaime Biernaski
- 2. ?
- 4. AMAZING!!!!!
- 5. Toolbox
- 6. Store Actions Reducers Component A Props State Redux Component B Component C State State State App Overview
- 7. Um belo dia… package.json Re-instalar packages sem versões (last version) React React Native Redux Apollo 1.* GraphQL Comotudocomeçou ERROR
- 8. 2.0
- 9. Apollo Link: Flexible network management Apollo Cache: Não existe mais dependência do Redux Performance: 2x a 5x mais veloz (até 10x para grande massa de dados) Bundle size: Novos builds aproximadamente 40% menor react-apollo apollo-client apollo-link-http apollo-cache-inmemory … apollo-utilities PrincipaisNovidades Novas caras aparecendo… “… É só mudar algumas linhas de código e tudo vai funcionar…”
- 10. WTF Redux Store? Apollo 1.0 Apollo 2.0 ERROR
- 11. MUDAR? “ Porque usar Redux se o Apollo 2.0 já cuida de toda a Aplicação? ” Redux store Actions Reducers “ Write queries, not code! ” Apollo site
- 13. ApolloCache InMemoryCache apollo-cache-inmemory is the default cache implementation for Apollo Client 2.0 InMemoryCache is a normalized data store that supports all of Apollo Client 1.0’s features without the dependency on Redux.
- 14. LoadingData Exemplos Dados em “this.data”
- 15. FetchPolicies Como seu componente vai interagir com os dados da Apollo Cache cache-first: This is the default value where we always try reading data from your cache first. If all the data needed to fulfill your query is in the cache then that data will be returned. Apollo will only fetch from the network if a cached result is not available. cache-and-network: This fetch policy will have Apollo first trying to read data from your cache. If all the data needed to fulfill your query is in the cache then that data will be returned. However, regardless of whether or not the full data is in your cache this fetchPolicy will always execute query with the network interface. Cache Return data Network Query Cache Return data Network Query
- 16. FetchPolicies Como seu componente vai interagir com os dados da Apollo Cache network-only: This fetch policy will never return you initial data from the cache. Instead it will always make a request using your network interface to the server. cache-only: This fetch policy will never execute a query using your network interface. Instead it will always try reading from the cache. If the data for your query does not exist in the cache then an error will be thrown. This fetch policy allows you to only interact with data in your local client cache without making any network requests which keeps your component fast, but means your local data might not be consistent with what is on the server. Return data Network Query Return data Cache Query
- 17. PassingParameters Na chamada de um componente Componente A Componente B
- 18. DirectAccesstoClient A simple enhancer which provides direct access to your ApolloClient instance. This is useful if you want to do custom logic with Apollo. Such as calling one-off queries. By calling this function with the component you want to enhance, withApollo()will create a new component which passes in an instance of ApolloClient as a client prop. withApollo
- 19. ChangingCache Opções depois de uma mutação " Nunca irão fazer requisição ao servidor GraphQL " readQuery readFragment writeQuery writeFragment refetchQueries will execute one or more queries using your network interface and will then normalize the results of those queries into your cache. update takes two arguments. The first is an instance of a DataProxy object which has some methods which will allow you to interact with the data in your store. The second is the response from your mutation - either the optimistic response, or the actual response returned by your server.