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
   

   View Slide

2. pensandonaweb.com.br
   desenvolvedor web full-stack
   Marcel Gonçalves dos Santos
   @marcelgsantos
   

   View Slide

3. @phpsp
   phpsp.org.br
   

   View Slide

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
   

   View Slide

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!
   🤩
   

   View Slide

6. Introdução
   

   View Slide

7. o React Query é uma biblioteca utilizada
   para data fetching para o React criada por
   Tanner Linsley
   

   View Slide

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
   

   View Slide

9. a maioria das bibliotecas tradicionais de
   gerenciamento de estados são boas para
   lidar com client state e não server state
   

   View Slide

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
    

    View Slide

11. outras tarefas complicadas ao lidar com
    server state:

    

    - cache

    - atualizar dados desatualizados 

    - performance

    - lazy loading
    

    View Slide

12. o React Query pode ser utilizado out-of-the-
    box e com nenhuma configuração
    

    View Slide

13. contudo, ele pode ser configurado a medida
    que a aplicação cresce
    

    View Slide

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
    

    View Slide

15. Instalação
    

    View Slide

16. para instalar o React Query utiliza-se o
    comando npm install react-query ou
    yarn add react-query
    

    View Slide

17. o React Query possui uma dev tools dedi-
    cada para auxiliar no debug da aplicação
    

    View Slide

18. o React Query também possui suporte ao
    React Native
    

    View Slide

19. Queries
    

    View Slide

20. uma query é uma referência para uma fonte
    de dados assíncrona que é associada a uma
    chave única
    

    View Slide

21. ela pode ser utilizada com métodos
    baseados em promises para fazer o 

    fetch de dados de um servidor
    

    View Slide

22. exemplo 01
    exemplos de realização de uma query
    

    View Slide

23. import { useQuery } from "react-query";
    function App() {
    const result = useQuery("todos", fetchTodoList);
    }
    

    View Slide

24. a chave única é utiliza internamente para
    refetching, caching e compartilhamento da
    query na aplicação
    

    View Slide

25. o resultado retornado por useQuery contém
    todas as informações necessárias sobre a
    query
    

    View Slide

26. a flag isLoading informa o estado do
    fetching pode ser utilizada para mostrar um
    spinner durante o carregamento
    

    View Slide

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
    

    View Slide

28. os dados de retorno e os dados de erro
    ficam disponíveis em data e error
    

    View Slide

29. exemplo 02
    exemplos da utilização de flags do estado de
    fetching e dados retornados
    

    View Slide

30. function Todos() {
    const { isLoading, isError, data, error } = useQuery('todos', fetchTodos)
    if (isLoading) {
    return Loading""..."
    }
    if (isError) {
    return Error: {error.message}"
    }
    return (
    
    {data.map(todo "=> (
    {todo.title}"
    ))}
    "
    )
    }
    

    View Slide

31. o React Query gerencia o cache das
    consultas através das chaves únicas ou
    query keys
    

    View Slide

32. uma query key deve ser única e pode ser
    uma string simples ou um objeto complexo
    desde que possa ser serializado
    

    View Slide

33. exemplo 03
    exemplos de chaves únicas ou query keys
    

    View Slide

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' }], ""...)
    

    View Slide

35. se a sua consulta depende de uma variável
    adicione-a a query key
    

    View Slide

36. exemplo 04
    exemplos de uma variável como parte da
    query keys
    

    View Slide

37. function Todos({ todoId }) {
    const result = useQuery(['todos', todoId], () "=> fetchTodoById(todoId))
    }
    

    View Slide

38. uma função de consulta pode ser qualquer
    função que retorna uma promise
    

    View Slide

39. a promise deve retornar ou o dado resolvido
    ou lançar um erro
    

    View Slide

40. para o React Query determinar que houve
    um erro a consulta deve lançar um erro
    

    View Slide

41. o erro será persistido no objeto error do
    resultado da consulta
    

    View Slide

42. exemplo 05
    exemplos de uma função que retorna um
    erro
    

    View Slide

43. const { error } = useQuery(['todos', todoId], async () "=> {
    if (somethingGoesWrong) {
    throw new Error('Oh no!')
    }
    return data
    })
    

    View Slide

44. deve-se tomar cuidado com ferramentas
    que não lançam erros por padrão como a
    função fetch
    

    View Slide

45. neste caso, o lançamento do erro deve ser
    feito de forma explícita
    

    View Slide

46. Parallel Queries e

    Dependent Queries
    

    View Slide

47. o React Query permite utilizar consultas
    paralelas ou parallel queries apenas
    chamando os hooks lado a lado
    

    View Slide

48. exemplo 06
    exemplos de queries paralelas
    

    View Slide

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)
    "// ""...
    }
    

    View Slide

50. pode-se utilizar consultas paralelas
    dinâmicas utilizando o book useQueries
    

    View Slide

51. pode-se também utilizar consultas
    dependentes
    

    View Slide

52. Refetching
    automático
    

    View Slide

53. o React Query faz o refetching automático
    dos dados quando a janela recebe o foco
    novamente
    

    View Slide

54. essa abordagem é muito útil para manter os
    dados atualizados
    

    View Slide

55. mas pode trazer comportamentos um pouco
    inconvenientes
    

    View Slide

56. por isso, a funcionalidade pode ser
    desabilitada de forma local ou global
    

    View Slide

57. exemplo 06
    exemplo de desabilitar o refetch automático
    

    View Slide

58. useQuery('todos', fetchTodos, { refetchOnWindowFocus: false })
    

    View Slide

59. Políticas de retry
    

    View Slide

60. quando uma consulta falha, o React Query
    fará o retry automaticamente até atingir o
    número máximo de retries
    

    View Slide

61. o número máximo de retries pode ser
    configurado de forma local ou global
    

    View Slide

62. exemplo 07
    exemplo de configuração do retry
    automático
    

    View Slide

63. import { useQuery } from 'react-query'
    "// Make a specific query retry a certain number of times
    const result = useQuery(['todos', 1], fetchTodoListPage, {
    retry: 10,
    })
    

    View Slide

64. pode-se definir um delay para o retry
    utilizando retryDelay
    

    View Slide

65. Mutations
    

    View Slide

66. as mutations são utilizadas para realizar
    uma mudança no estado no server-side
    

    View Slide

67. as mutations são utilizadas para criar, alterar
    ou remover um recurso no server-side e
    utiliza-se o hook useMutation
    

    View Slide

68. exemplo 08
    exemplo de uso de mutations
    

    View Slide

69. function App() {
    const mutation = useMutation(newTodo !=> axios.post('/todos', newTodo))
    return (
    
    {mutation.isLoading ? (
    'Adding todo!!...'
    ) : (
    !<>
    {mutation.isError ? (
    An error occurred: {mutation.error.message}!
    ) : null}
    {mutation.isSuccess ? Todo added!! : null}
    onClick={() !=> {
    mutation.mutate({ id: new Date(), title: 'Do Laundry' })
    }}
    >
    Create Todo
    !
    !!>
    )}
    !
    )
    }
    

    View Slide

70. as mutations possuem eventos que são
    disparados em diversos momentos do seu
    ciclo de vida
    

    View Slide

71. exemplo 09
    exemplo de eventos do ciclo de vida das
    mutations
    

    View Slide

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
    },
    })
    

    View Slide

73. Query
    Invalidation
    

    View Slide

74. o React Query permite invalidar uma query
    quando algo ocorrer para marcá-la como
    stale e ocasionar um refetch
    

    View Slide

75. quando refetch acontece, o componente
    que utiliza a query será renderizado
    novamente com os dados atualizados
    

    View Slide

76. exemplo 10
    exemplos de query invalidation
    

    View Slide

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)
    

    View Slide

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)
    

    View Slide

79. Conclusão
    

    View Slide

80. o React Query é um biblioteca que facilita o
    gerenciamento do server state de forma
    simples, limpa e cheia de funcionalidades
    

    View Slide

81. nada de ficar batendo cabeça com as
    complexidades do Redux e tendo
    problemas com gerenciamento de estado
    

    View Slide

82. o React Query entrega inúmeras
    funcionalidades prontas que normalmente
    são feitas de forma manual
    

    View Slide

83. View Slide

84. View Slide

85. View Slide

86. vá em frente e divirta-se!
    

    View Slide

87. Referências
    

    View Slide

88. bit.ly/palestra-react-query
    

    View Slide

89. Avalie!
    

    View Slide

90. @marcelgsantos
    speakerdeck.com/marcelgsantos
    Obrigado.
    Perguntas?
    

    View Slide