Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Introdução a React Query

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.

52711e2157a6fed933b0361cc06a6953?s=128

Marcel dos Santos

June 17, 2021
Tweet

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
  83. None
  84. None
  85. None
  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?