@tanstack/react-query

HelloWorld 发表于 2024-9-11 10:58:56

本帖最后由 HelloWorld 于 2024-10-31 14:44 编辑

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

周下载量 4,305,785

https://www.youtube.com/watch?v=8K1N3fE-cDs

https://www.youtube.com/watch?v=NOvx4LB6Hfk

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

示例代码：https://stackblitz.com/github/tanstack/query/tree/main/examples/react/simple?file=src%2Findex.tsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import {
QueryClient,
QueryClientProvider,
useQuery,
} from '@tanstack/react-query'
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'

const queryClient = new QueryClient()

export default function App() {
return (
<QueryClientProvider client={queryClient}>
   <ReactQueryDevtools />
   <Example />
</QueryClientProvider>
)
}

function Example() {
const { isPending, error, data, isFetching } = useQuery({
queryKey: ['repoData'],
queryFn: async () => {
   const response = await fetch(
   'https://api.github.com/repos/TanStack/query',
   )
   return await response.json()
},
})

if (isPending) return 'Loading...'

if (error) return 'An error has occurred: ' + error.message

return (
<div>
   <h1>{data.full_name}</h1>
   <p>{data.description}</p>
   <strong>👀 {data.subscribers_count}</strong>{' '}
   <strong>✨ {data.stargazers_count}</strong>{' '}
   <strong>🍴 {data.forks_count}</strong>
   <div>{isFetching ? 'Updating...' : ''}</div>
</div>
)
}

页: [1]

数字居民论坛's Archiver

@tanstack/react-query