Você usa APIs do jeito errado

Uma introdução ao React Query v3

Transcript

1. Você usa APIs do jeito errado Uma introdução ao React Query
2. Oi, eu sou o Hugo E eu também já usei APIs do jeito errado
3. Vamos começar um projeto novo
6. A API da timeline está pronta
7. A API da timeline está pronta Beleza, a gente vai implementar
8. É só substituir os valores do JSON pela API const [timelineData, setTimelineData] = useState(); useEffect(() => { async function fetchData() { const response = await fetch('/timeline'); const data = await response.json(); setTimelineData(data); } fetchData(); }, [])
9. É só substituir os valores do JSON pela API const [timelineData, setTimelineData] = useState(); useEffect(() => { async function fetchData() { const response = await fetch('/timeline'); const data = await response.json(); setTimelineData(data); } fetchData(); }, [])
10. É só substituir os valores do JSON pela API const [timelineData, setTimelineData] = useState(); useEffect(() => { async function fetchData() { const response = await fetch('/timeline'); const data = await response.json(); setTimelineData(data); } fetchData(); }, [])
11. É só substituir os valores do JSON pela API const [timelineData, setTimelineData] = useState(); useEffect(() => { async function fetchData() { const response = await fetch('/timeline'); const data = await response.json(); setTimelineData(data); } fetchData(); }, [])
12. É só substituir os valores do JSON pela API const [timelineData, setTimelineData] = useState(); useEffect(() => { async function fetchData() { const response = await fetch('/timeline'); const data = await response.json(); setTimelineData(data); } fetchData(); }, [])
13. function useTimelineData() { } É só substituir os valores do JSON pela API const [timelineData, setTimelineData] = useState(); useEffect(() => { async function fetchData() { const response = await fetch('/timeline'); const data = await response.json(); setTimelineData(data); } fetchData(); }, [])
14. function TimelinePage() { const timelineData = useTimelineData(); if (!timelineData) { return null; } return ( <Timeline> {timelineData.posts.map((post) => ( <Post key={post.id} post={post} /> ))} </Timeline> ) }
15. Tá pronto, chefe
16. Tá pronto, chefe Agora a API dos posts está pronta
17. Tá pronto, chefe Agora a API dos posts está pronta Beleza, vamos lá. Tá fácil.
19. function usePostData(id) { const [postData, setPostData] = useState(); useEffect(() => { async function fetchData() { const response = await fetch(`/posts/${id}`); const data = await response.json(); setPostData(data); } fetchData(); }, [id]) return postData; }
20. function usePostData(id) { const [postData, setPostData] = useState(); useEffect(() => { async function fetchData() { const response = await fetch(`/posts/${id}`); const data = await response.json(); setPostData(data); } fetchData(); }, [id]) return postData; }
21. Tá pronto
22. Tá pronto Tá pronto?
23. Tá pronto Tá pronto? Alguém consegue me dizer quais são os problemas da implementação atual?
24. Alguém consegue me dizer quais são os problemas da implementação atual?
25. Erros e Exceções
26. Erros e Exceções
27. Error Erros e Exceções
28. Batching
29. 1 4 3 2 useTimelineData Batching
30. 1 4 3 2 useTimelineData Batching Batching
31. 1 4 3 2 useTimelineData Batching Batching
32. Caching
33. Caching
34. Caching useTimelineData
35. Cache Invalidation New
36. Cache Invalidation New New
37. Race Condition
38. Race Condition Busca T T T T T T
39. Busca T Ty Type TypeSc TypeScri TypeScript T T T T T T Race Condition
40. Busca T Ty Type TypeSc TypeScri TypeScript Requisições T Ty Type TypeSc TypeScri TypeScript T T T T T T Race Condition
41. T Ty Type TypeSc TypeScri TypeScript Requisições T Ty Type TypeSc TypeScri TypeScript Race Condition Latência T Ty Type TypeSc TypeScri TypeScript
42. Retries
43. Retries
44. 1 4 3 2 Requisições Retries
45. 1 4 3 2 Requisições 1 4 3 2 Retries
46. 1 4 3 2 Requisições 1 4 3 2 3 Retry Retry Retry Sucesso Retries Retries
47. Erros e Exceções Batching Caching Cache Invalidation Race Condition Retries
48. Erros e Exceções Batching Caching Cache Invalidation Race Condition Retries Cancelamento Prefetching In fi nite Pagination Polling Optimistic Updates Refetching E muito mais
49. Ninguém implementa tudo isso
50. Você não quer ter que implementar tudo isso
51. React Query
52. function usePostData(id) { const [postData, setPostData] = useState(); useEffect(() => { async function fetchData() { const response = await fetch(`/posts/${id}`); const data = await response.json(); setPostData(data); } fetchData(); }, [id]) return postData; }
53. async function fetchData() { const response = await fetch(`/posts/${id}`); const data = await response.json(); setPostData(data); }
54. async function fetchData() { const response = await fetch(`/posts/${id}`); const data = await response.json(); setPostData(data); }
55. async function fetchData() { const response = await fetch(`/posts/${id}`); return response.json(); setPostData(data); }
56. function usePostData(id) { return useQuery(['posts', id], () => fetchPost(id)); }
57. function usePostData(id) { return useQuery(['posts', id], () => fetchPost(id)); }
58. function usePostData(id) { return useQuery(['posts', id], () => fetchPost(id)); }
59. function usePostData(id) { return useQuery(['posts', id], () => fetchPost(id)); }
60. function PostPage({params: {id}}) { const {data, isLoading} = usePostData(id); if (isLoading) { return null; } return ( <Post post={data.post} /> ) }
61. function PostPage({params: {id}}) { const {data, isLoading} = usePostData(id); if (isLoading) { return null; } return ( <Post post={data.post} /> ) }
62. function PostPage({params: {id}}) { const {data, isLoading} = usePostData(id); if (isLoading) { return null; } return ( <Post post={data.post} /> ) }
63. const { data, isLoading, isSuccess, error, isError, refetch, /* ... */ } = usePostData(id);
64. Erros e Exceções Batching Caching Cache Invalidation Race Condition Retries Cancelamento Prefetching In fi nite Pagination Polling Optimistic Updates Refetching Sites Robustos
65. Con fi gurável
66. staleTime: 0
67. staleTime: 0 ... 0 ms
68. cacheTime: 1000 * 60 * 5
69. retry: 3
70. refetchOnWindowFocus: true
71. refetchOnWindowFocus: true ... ...
72. function usePostData(id) { return useQuery(['posts', id], () => fetchPost(id), { staleTime: 1000 * 20, cacheTime: 1000, refetchOnWindowsFocus: false, }); }
73. Mutations
74. New
75. New New u
76. New New useMutation
77. async function createPost(post) { const response = await fetch('/posts', { method: 'POST', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' }, body: JSON.stringify(post) }); return response.json(); }
78. function CreatePostPage() { const mutation = useMutation(createPost); const handleSubmit = useCallback((event) => { event.preventDefault(); const data = new FormData(event.target); const post = Object.fromEntries(data.entries()); mutation.mutate(post); }, [mutation]); return mutation.isLoading ? (<Spinner />) : ( <form onSubmit={handleSubmit}> {/* ... */} </form> ) }
79. function CreatePostPage() { const mutation = useMutation(createPost); const handleSubmit = useCallback((event) => { event.preventDefault(); const data = new FormData(event.target); const post = Object.fromEntries(data.entries()); mutation.mutate(post); }, [mutation]); return mutation.isLoading ? (<Spinner />) : ( <form onSubmit={handleSubmit}> {/* ... */} </form> ) }
80. function CreatePostPage() { const mutation = useMutation(createPost); const handleSubmit = useCallback((event) => { event.preventDefault(); const data = new FormData(event.target); const post = Object.fromEntries(data.entries()); mutation.mutate(post); }, [mutation]); return mutation.isLoading ? (<Spinner />) : ( <form onSubmit={handleSubmit}> {/* ... */} </form> ) }
81. function CreatePostPage() { const mutation = useMutation(createPost); const queryClient = useQueryClient(); const handleSubmit = useCallback((event) => { event.preventDefault(); const data = new FormData(event.target); const post = Object.fromEntries(data.entries()); mutation.mutate(post, { onSuccess: () => { queryClient.invalidateQueries('timeline'); } }); }, [mutation]); return mutation.isLoading ? (<Spinner />) : ( <form onSubmit={handleSubmit}> {/* ... */} </form> )
82. queryClient.invalidateQueries(['posts', id]);
83. DevTools
84. DevTools
85. Hugo, eu parei de prestar atenção Já uso o getServerProps Não preciso do React Query
86. Hugo, eu parei de prestar atenção Já uso o getServerProps Não preciso do React Query E se eu te falar que...
87. E se eu te falar que... React Query trabalha com dados assíncronos
88. E se eu te falar que... React Query trabalha com dados assíncronos Qualquer dado assíncrono
89. const [stream, setStream] = useState(); useEffect(() => { async function getMedia() { const newStream = await navigator.mediaDevices.getUserMedia({video: true}); setStream(newStream); } getMedia(); }, [])
90. function useUserMedia() { return useQuery( ['userMedia'], () => navigator.mediaDevices.getUserMedia({video: true}) ); }
91. function useUserMedia() { return useQuery( ['userMedia'], () => navigator.mediaDevices.getUserMedia({video: true}), { staleTime: Infinity } ); }
92. "The best part is no part"
94. De nada!