@tanstack/react-query

https://www.npmjs.com/package/@tanstack/react-query

周下载量 4,305,785





官方文档：https://tanstack.com/query/latest/docs/framework/react/overview

示例代码：https://stackblitz.com/github/ta ... ile=src%2Findex.tsx

1. import React from 'react'
   
2. import ReactDOM from 'react-dom/client'
   
3. import {
   
4.   QueryClient,
   
5.   QueryClientProvider,
   
6.   useQuery,
   
7. } from '@tanstack/react-query'
   
8. import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
   
9. 
   
10. const queryClient = new QueryClient()
    
11. 
    
12. export default function App() {
    
13.   return (
    
14.     <QueryClientProvider client={queryClient}>
    
15.       <ReactQueryDevtools />
    
16.       <Example />
    
17.     </QueryClientProvider>
    
18.   )
    
19. }
    
20. 
    
21. function Example() {
    
22.   const { isPending, error, data, isFetching } = useQuery({
    
23.     queryKey: ['repoData'],
    
24.     queryFn: async () => {
    
25.       const response = await fetch(
    
26.         'https://api.github.com/repos/TanStack/query',
    
27.       )
    
28.       return await response.json()
    
29.     },
    
30.   })
    
31. 
    
32.   if (isPending) return 'Loading...'
    
33. 
    
34.   if (error) return 'An error has occurred: ' + error.message
    
35. 
    
36.   return (
    
37.     <div>
    
38.       <h1>{data.full_name}</h1>
    
39.       <p>{data.description}</p>
    
40.       <strong>👀 {data.subscribers_count}</strong>{' '}
    
41.       <strong>✨ {data.stargazers_count}</strong>{' '}
    
42.       <strong>🍴 {data.forks_count}</strong>
    
43.       <div>{isFetching ? 'Updating...' : ''}</div>
    
44.     </div>
    
45.   )
    
46. }

复制代码