Introdução a React Query

Slide 1

Slide 1 text

Marcel Gonçalves dos Santos @marcelgsantos React Query introdução ao

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

@phpsp phpsp.org.br

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

Introdução

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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 ﬁcar desatualizado rápido

Slide 11

Slide 11 text

outras tarefas complicadas ao lidar com server state:    - cache  - atualizar dados desatualizados   - performance  - lazy loading

Slide 12

Slide 12 text

o React Query pode ser utilizado out-of-the- box e com nenhuma conﬁguração

Slide 13

Slide 13 text

contudo, ele pode ser conﬁgurado a medida que a aplicação cresce

Slide 14

Slide 14 text

ele trará algumas vantagens como: - tornar a aplicação mais limpa e fácil de ler  - impacto positivo na experiência do usuário

Slide 15

Slide 15 text

Instalação

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

o React Query também possui suporte ao React Native

Slide 19

Slide 19 text

Queries

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

ela pode ser utilizada com métodos baseados em promises para fazer o   fetch de dados de um servidor

Slide 22

Slide 22 text

exemplo 01 exemplos de realização de uma query

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

a ﬂag isLoading informa o estado do fetching pode ser utilizada para mostrar um spinner durante o carregamento

Slide 27

Slide 27 text

as ﬂags 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

Slide 28

Slide 28 text

os dados de retorno e os dados de erro ﬁcam disponíveis em data e error

Slide 29

Slide 29 text

exemplo 02 exemplos da utilização de ﬂags do estado de fetching e dados retornados

Slide 30

Slide 30 text

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

{todo.title}"

) }

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

exemplo 03 exemplos de chaves únicas ou query keys

Slide 34

Slide 34 text

"// uma lista de tarefas useQuery('todos', ""...) "// uma tarefa específica useQuery(['todo', 5], ""...) "// uma lista de tarefas no estado 'done' useQuery(['todos', { type: 'done' }], ""...)

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

Parallel Queries e  Dependent Queries

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

exemplo 06 exemplos de queries paralelas

Slide 49

Slide 49 text

function App () { "// The following queries will execute in parallel const usersQuery = useQuery('users', fetchUsers) const teamsQuery = useQuery('teams', fetchTeams) const projectsQuery = useQuery('projects', fetchProjects) "// ""... }

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

pode-se também utilizar consultas dependentes

Slide 52

Slide 52 text

Refetching automático

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

essa abordagem é muito útil para manter os dados atualizados

Slide 55

Slide 55 text

mas pode trazer comportamentos um pouco inconvenientes

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

exemplo 06 exemplo de desabilitar o refetch automático

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

Políticas de retry

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

o número máximo de retries pode ser conﬁgurado de forma local ou global

Slide 62

Slide 62 text

exemplo 07 exemplo de conﬁguração do retry automático

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

pode-se deﬁnir um delay para o retry utilizando retryDelay

Slide 65

Slide 65 text

Mutations

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

exemplo 08 exemplo de uso de mutations

Slide 69

Slide 69 text

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} { mutation.mutate({ id: new Date(), title: 'Do Laundry' }) }} > Create Todo ! !!> )} !

) }

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

exemplo 09 exemplo de eventos do ciclo de vida das mutations

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

Query Invalidation

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

exemplo 10 exemplos de query invalidation

Slide 77

Slide 77 text

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)

Slide 78

Slide 78 text

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)

Slide 79

Slide 79 text

Conclusão

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

nada de ﬁcar batendo cabeça com as complexidades do Redux e tendo problemas com gerenciamento de estado

Slide 82

Slide 82 text

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