React Query: Consumo de APIs RESTful no React da maneira certa - Decode

00:00 🚀 Introdução ao Projeto
O apresentador se prepara para iniciar a codificação de um projeto em React do zero,
A importância em acompanhar a live para compreender o processo, não apenas copiar.

01:52 🔍 Entendendo Data Fetching
Explicação sobre o consumo de APIs, fundamental em aplicações React,
Simplificação do projeto removendo arquivos desnecessários, com um exemplo básico de "Hello World".

03:30 📦 Configurando Consumo de API
Mostra como consumir uma API para listar repositórios do GitHub usando `useState` e `useEffect`,
Discussão sobre a complexidade e verbosidade desse método básico.

07:10 🔄 Melhorias com Axios
Implementação do Axios para melhorar as requisições HTTP,
Benefícios como timeouts configuráveis e interceptores para segurança e otimização.

09:01 ⚙️ Criando um Hook Customizado
Criação de um Hook customizado `useFetch` para encapsular lógica de fetch,
O uso de Generics no TypeScript para tipagem flexível de dados.

15:02⏳ Estado de Carregamento
Introdução do estado de loading para indicar quando uma requisição está em andamento,
Mostra como usar ferramentas de desenvolvimento para simular carregamento lento.

18:10 ⚖️ Tira dúvidas do chat
Discussão sobre conceitos como `finally` em promessas para lógica que ocorre após requisições HTTP,
`Suspense API` e ideias futuras de conteúdo sobre React.

19:52 🛠️ A implementação de um sistema de erro e otimizações com axios
Como armazenar erros na requisição usando estado,
Configuração de opções adicionais e otimização do axios com `axios.create`.

22:39 📚 Introdução ao SWR (Stale-While-Revalidate)
Comparação entre SWR e React Query, introdução ao conceito "Stale-While-Revalidate",
Explicação do funcionamento de cache e revalidação no contexto de requisições HTTP.

26:28 ⚙️ Configuração inicial e uso do React Query
Instalação e configuração do React Query no projeto,
Utilização do `useQuery` para melhorar o consumo de APIs e comparação com hooks personalizados.

29:46 🔄 Compreendendo o Revalidate on Focus
Demonstrando a funcionalidade de revalidação ao focar, sem fazer refresh da página,
Alternativas e personalização do comportamento de revalidação com React Query.

33:55 🧩 Implementação de Sistema de Rotas
Configuração básica do React Router para criar páginas de repositórios e detalhes,
Integração das rotas com links dinâmicos para navegação.

39:48 📈 Otimização de Requisições com Cache
Exemplo prático de como o cache funciona com navegação entre páginas e reuso de dados,
Importância do conceito de cache para otimizar a experiência do usuário e reduzir chamadas desnecessárias à API.

41:24 🕒 Gerenciamento de Cache no React Query
Explicação sobre a configuração do Stale Time, que determina por quanto tempo os dados devem ser considerados válidos no cache antes de serem recarregados.
Demonstração de como o uso do Stale While Revalidate evita recarregamentos desnecessários de dados dentro de um tempo pré-definido.
Discussão sobre a importância de manter os dados atualizados sem exigir sempre a informação mais recente imediatamente.

44:07 🔄 Invalidação de Cache e Atualização de Dados
Explicação sobre a invalidação de cache em situações onde os dados foram alterados, justificando a necessidade de mostrar informações atualizadas ao usuário.
Discussão sobre a implementação de uma função hipotética que altera a descrição de um repositório e como isso afeta o cache.
Uso do Query Client para invalidar a cache e garantir que a versão mais recente dos dados seja exibida.

48:31 🗂️ Manipulação de Cache sem Requisições Adicionais
Demonstração de como manipular o cache do React Query para atualizar dados sem fazer novas requisições HTTP.
Uso de métodos para obter e atualizar manualmente a lista de repositórios em cache, simulando uma situação de alteração de dados.
Comparação com estados globais como Redux, destacando a capacidade de manipular dados diretamente nas chamadas de requisição.

52:33 🔍 Detalhes finais e Conteúdos Adicionais Avançados
Indicação de onde aprender mais sobre React Query e data fetching no contexto do curso Ignite.
Visão geral sobre as possibilidades avançadas que o React Query oferece, mencionando ferramentas específicas e outras funcionalidades.
Encorajamento ao aprofundamento através da Rocketseat para os interessados.