Introdução a React Query

O React Query é uma das "ferramentas do momento" no ecossistema React que promete lidar com data fetching de forma simples e prática. Ele permite fazer o fetching de dados, adicionar dados no cache, gerenciar invalidação de cache, lógicas de retry entre outras funcionalidades úteis de forma fácil, sem necessidade de lidar com lógicas complexas ou "tocar no estado global". Conheça o React Query e mude a forma como você lida com o gerenciamento de estados do servidor.

Transcript

1. Marcel Gonçalves dos Santos @marcelgsantos React Query introdução ao
2. pensandonaweb.com.br desenvolvedor web full-stack Marcel Gonçalves dos Santos @marcelgsantos
3. @phpsp phpsp.org.br
4. Interaja nas mídias sociais!
 
 - fale sobre o evento, palestrantes e conteúdo - tire fotos do evento e publique
 - interaja com outros participantes do evento - tire dúvidas ou dê feedbacks para os palestrantes
5. 1. seguir @marcelgsantos no Twitter
 2. tuitar utilizando as hashtags #ReactQuery e #TheDevConf e me marcar no tweet
 3. não vale tuíte em branco
 4. não vale retuíte Concorra a um livro da Casa do Código! 🤩
6. Introdução
7. o React Query é uma biblioteca utilizada para data fetching para o React criada por Tanner Linsley
8. porém, o React Query não lida apenas com data fetching mas também com cache, sincronização e atualização do server state
9. a maioria das bibliotecas tradicionais de gerenciamento de estados são boas para lidar com client state e não server state
10. características do server state:
 
 - persistência remota e falta de controle
 - requer uma API assíncrona para fetching e updating
 - possui propriedade compartilhada
 - pode ficar desatualizado rápido
11. outras tarefas complicadas ao lidar com server state:
 
 - cache
 - atualizar dados desatualizados 
 - performance
 - lazy loading
12. o React Query pode ser utilizado out-of-the- box e com nenhuma configuração
13. contudo, ele pode ser configurado a medida que a aplicação cresce
14. ele trará algumas vantagens como: - tornar a aplicação mais limpa e fácil de ler
 - impacto positivo na experiência do usuário
15. Instalação
16. para instalar o React Query utiliza-se o comando npm install react-query ou yarn add react-query
17. o React Query possui uma dev tools dedi- cada para auxiliar no debug da aplicação
18. o React Query também possui suporte ao React Native
19. Queries
20. uma query é uma referência para uma fonte de dados assíncrona que é associada a uma chave única
21. ela pode ser utilizada com métodos baseados em promises para fazer o 
 fetch de dados de um servidor
22. exemplo 01 exemplos de realização de uma query
23. import { useQuery } from "react-query"; function App() { const result = useQuery("todos", fetchTodoList); }
24. a chave única é utiliza internamente para refetching, caching e compartilhamento da query na aplicação
25. o resultado retornado por useQuery contém todas as informações necessárias sobre a query
26. a flag isLoading informa o estado do fetching pode ser utilizada para mostrar um spinner durante o carregamento
27. as flags isError e isSuccess informam o estado da conclusão da requisição e pode ser utilizadas para mostrar um feedback de erro ou os dados retornados
28. os dados de retorno e os dados de erro ficam disponíveis em data e error
29. exemplo 02 exemplos da utilização de flags do estado de fetching e dados retornados
30. function Todos() { const { isLoading, isError, data, error } = useQuery('todos', fetchTodos) if (isLoading) { return <span>Loading""..."</span> } if (isError) { return <span>Error: {error.message}"</span> } return ( <ul> {data.map(todo "=> ( <li key={todo.id}>{todo.title}"</li> ))} "</ul> ) }
31. o React Query gerencia o cache das consultas através das chaves únicas ou query keys
32. uma query key deve ser única e pode ser uma string simples ou um objeto complexo desde que possa ser serializado
33. exemplo 03 exemplos de chaves únicas ou query keys
34. "// uma lista de tarefas useQuery('todos', ""...) "// uma tarefa específica useQuery(['todo', 5], ""...) "// uma lista de tarefas no estado 'done' useQuery(['todos', { type: 'done' }], ""...)
35. se a sua consulta depende de uma variável adicione-a a query key
36. exemplo 04 exemplos de uma variável como parte da query keys
37. function Todos({ todoId }) { const result = useQuery(['todos', todoId], () "=> fetchTodoById(todoId)) }
38. uma função de consulta pode ser qualquer função que retorna uma promise
39. a promise deve retornar ou o dado resolvido ou lançar um erro
40. para o React Query determinar que houve um erro a consulta deve lançar um erro
41. o erro será persistido no objeto error do resultado da consulta
42. exemplo 05 exemplos de uma função que retorna um erro
43. const { error } = useQuery(['todos', todoId], async () "=> { if (somethingGoesWrong) { throw new Error('Oh no!') } return data })
44. deve-se tomar cuidado com ferramentas que não lançam erros por padrão como a função fetch
45. neste caso, o lançamento do erro deve ser feito de forma explícita
46. Parallel Queries e
 Dependent Queries
47. o React Query permite utilizar consultas paralelas ou parallel queries apenas chamando os hooks lado a lado
48. exemplo 06 exemplos de queries paralelas
49. function App () { "// The following queries will execute in parallel const usersQuery = useQuery('users', fetchUsers) const teamsQuery = useQuery('teams', fetchTeams) const projectsQuery = useQuery('projects', fetchProjects) "// ""... }
50. pode-se utilizar consultas paralelas dinâmicas utilizando o book useQueries
51. pode-se também utilizar consultas dependentes
52. Refetching automático
53. o React Query faz o refetching automático dos dados quando a janela recebe o foco novamente
54. essa abordagem é muito útil para manter os dados atualizados
55. mas pode trazer comportamentos um pouco inconvenientes
56. por isso, a funcionalidade pode ser desabilitada de forma local ou global
57. exemplo 06 exemplo de desabilitar o refetch automático
58. useQuery('todos', fetchTodos, { refetchOnWindowFocus: false })
59. Políticas de retry
60. quando uma consulta falha, o React Query fará o retry automaticamente até atingir o número máximo de retries
61. o número máximo de retries pode ser configurado de forma local ou global
62. exemplo 07 exemplo de configuração do retry automático
63. import { useQuery } from 'react-query' "// Make a specific query retry a certain number of times const result = useQuery(['todos', 1], fetchTodoListPage, { retry: 10, })
64. pode-se definir um delay para o retry utilizando retryDelay
65. Mutations
66. as mutations são utilizadas para realizar uma mudança no estado no server-side
67. as mutations são utilizadas para criar, alterar ou remover um recurso no server-side e utiliza-se o hook useMutation
68. exemplo 08 exemplo de uso de mutations
69. function App() { const mutation = useMutation(newTodo !=> axios.post('/todos', newTodo)) return ( <div> {mutation.isLoading ? ( 'Adding todo!!...' ) : ( !<> {mutation.isError ? ( <div>An error occurred: {mutation.error.message}!</div> ) : null} {mutation.isSuccess ? <div>Todo added!!</div> : null} <button onClick={() !=> { mutation.mutate({ id: new Date(), title: 'Do Laundry' }) }} > Create Todo !</button> !!</> )} !</div> ) }
70. as mutations possuem eventos que são disparados em diversos momentos do seu ciclo de vida
71. exemplo 09 exemplo de eventos do ciclo de vida das mutations
72. useMutation(addTodo, { onMutate: variables "=> { "// a mutation is about to happen! return { id: 1 } }, onError: (error, variables, context) "=> { "// an error happened! console.log(`rolling back optimistic update with id ${context.id}`) }, onSuccess: (data, variables, context) "=> { "// success }, onSettled: (data, error, variables, context) "=> { "// error or success }, })
73. Query Invalidation
74. o React Query permite invalidar uma query quando algo ocorrer para marcá-la como stale e ocasionar um refetch
75. quando refetch acontece, o componente que utiliza a query será renderizado novamente com os dados atualizados
76. exemplo 10 exemplos de query invalidation
77. import { useQuery, useQueryClient } from 'react-query' const queryClient = useQueryClient() queryClient.invalidateQueries('todos') "// both queries below will be invalidated const todoListQuery = useQuery('todos', fetchTodoList) const todoListQuery = useQuery(['todos', { page: 1 }], fetchTodoList)
78. queryClient.invalidateQueries(['todos', { type: 'done' }]) "// the query below will be invalidated const todoListQuery = useQuery(['todos', { type: 'done' }], fetchTodoList) "// however, the following query below will NOT be invalidated const todoListQuery = useQuery('todos', fetchTodoList)
79. Conclusão
80. o React Query é um biblioteca que facilita o gerenciamento do server state de forma simples, limpa e cheia de funcionalidades
81. nada de ficar batendo cabeça com as complexidades do Redux e tendo problemas com gerenciamento de estado
82. o React Query entrega inúmeras funcionalidades prontas que normalmente são feitas de forma manual
86. vá em frente e divirta-se!
87. Referências
88. bit.ly/palestra-react-query
89. Avalie!
90. @marcelgsantos speakerdeck.com/marcelgsantos Obrigado. Perguntas?