概述
Solid Query 是 TanStack Query 的官方 SolidJS 适配器，它可以轻松地在您的 Web 应用程序中进行获取、缓存、同步和更新服务器状态。
动机
SolidJS 作为一种快速、响应式和声明式的库，用于构建用户界面，越来越受欢迎。它开箱即用地包含了很多功能。像 createSignal, createStore 这样的 Primitives 非常适合管理客户端状态。而且，与其他 UI 库不同，SolidJS 对管理异步数据有自己的强烈看法。createResource API 是在 SolidJS 应用程序中处理服务器状态的一个很好的 primitive。resource 是一种特殊的 signal，可以用来在数据处于加载状态时触发 Suspense 边界。
tsx
import { createResource, ErrorBoundary, Suspense } from 'solid-js'
import { render } from 'solid-js/web'
function App() {
const [repository] = createResource(async () => {
const result = await fetch('https://api.github.com/repos/TanStack/query')
if (!result.ok) throw new Error('Failed to fetch data')
return result.json()
})
return (
<div>
<div>Static Content</div>
{/* An error while fetching will be caught by the ErrorBoundary */}
<ErrorBoundary fallback={<div>Something went wrong!</div>}>
{/* Suspense will trigger a loading state while the data is being fetched */}
<Suspense fallback={<div>Loading...</div>}>
<div>{repository()?.updated_at}</div>
</Suspense>
</ErrorBoundary>
</div>
)
}
const root = document.getElementById('root')
render(() => <App />, root!)
import { createResource, ErrorBoundary, Suspense } from 'solid-js'
import { render } from 'solid-js/web'
function App() {
const [repository] = createResource(async () => {
const result = await fetch('https://api.github.com/repos/TanStack/query')
if (!result.ok) throw new Error('Failed to fetch data')
return result.json()
})
return (
<div>
<div>Static Content</div>
{/* An error while fetching will be caught by the ErrorBoundary */}
<ErrorBoundary fallback={<div>Something went wrong!</div>}>
{/* Suspense will trigger a loading state while the data is being fetched */}
<Suspense fallback={<div>Loading...</div>}>
<div>{repository()?.updated_at}</div>
</Suspense>
</ErrorBoundary>
</div>
)
}
const root = document.getElementById('root')
render(() => <App />, root!)
这太棒了！只需几行代码，您就可以从 API 获取数据并处理加载和错误状态。但是，随着您的应用程序复杂性的增加，您将需要更多功能来有效地管理服务器状态。这是因为服务器状态与客户端状态完全不同。首先，服务器状态
- 远程持久化在您不控制或拥有的位置
- 需要异步 API 进行获取和更新
- 意味着共享所有权，并且可能在您不知情的情况下被其他人更改
- 如果您不小心，可能会在您的应用程序中变得“过时”
一旦您掌握了应用程序中服务器状态的性质，随着您的发展，甚至会出现更多挑战，例如
- 缓存...（可能是编程中最难的事情）
- 将对相同数据的多个请求重复数据删除为单个请求
- 在后台更新“过时”的数据
- 了解数据何时“过时”
- 尽可能快地反映数据更新
- 性能优化，如分页和延迟加载数据
- 管理内存和服务器状态的垃圾回收
- 使用结构共享记忆查询结果
这就是 Solid Query 的用武之地。该库围绕 createResource 进行了封装，并提供了一组 hooks 和实用程序来有效地管理服务器状态。它开箱即用，零配置，并且可以自定义以满足您应用程序增长的需求。
从更技术的角度来看，Solid Query 可能会
- 帮助您从应用程序中删除许多行复杂且容易被误解的代码，并用几行 Solid Query 逻辑替换。
- 使您的应用程序更易于维护，并且更易于构建新功能，而无需担心连接新的服务器状态数据源
- 通过使您的应用程序感觉比以往更快、响应更灵敏，对您的最终用户产生直接影响。
- 可能帮助您节省带宽并提高内存性能
少说废话，快给我看代码！
在下面的示例中，您可以看到 Solid Query 以其最基本和最简单的形式用于获取 TanStack Query GitHub 项目本身的 GitHub 统计信息
tsx
import { ErrorBoundary, Suspense } from 'solid-js'
import {
createQuery,
QueryClient,
QueryClientProvider,
} from '@tanstack/solid-query'
function App() {
const repositoryQuery = createQuery(() => ({
queryKey: ['TanStack Query'],
queryFn: async () => {
const result = await fetch('https://api.github.com/repos/TanStack/query')
if (!result.ok) throw new Error('Failed to fetch data')
return result.json()
},
staleTime: 1000 * 60 * 5, // 5 minutes
throwOnError: true, // Throw an error if the query fails
}))
return (
<div>
<div>Static Content</div>
{/* An error while fetching will be caught by the ErrorBoundary */}
<ErrorBoundary fallback={<div>Something went wrong!</div>}>
{/* Suspense will trigger a loading state while the data is being fetched */}
<Suspense fallback={<div>Loading...</div>}>
{/*
The `data` property on a query is a SolidJS resource
so it will work with Suspense and transitions out of the box!
*/}
<div>{repositoryQuery.data?.updated_at}</div>
</Suspense>
</ErrorBoundary>
</div>
)
}
const root = document.getElementById('root')
const client = new QueryClient()
render(
() => (
<QueryClientProvider client={client}>
<App />
</QueryClientProvider>
),
root!,
)
import { ErrorBoundary, Suspense } from 'solid-js'
import {
createQuery,
QueryClient,
QueryClientProvider,
} from '@tanstack/solid-query'
function App() {
const repositoryQuery = createQuery(() => ({
queryKey: ['TanStack Query'],
queryFn: async () => {
const result = await fetch('https://api.github.com/repos/TanStack/query')
if (!result.ok) throw new Error('Failed to fetch data')
return result.json()
},
staleTime: 1000 * 60 * 5, // 5 minutes
throwOnError: true, // Throw an error if the query fails
}))
return (
<div>
<div>Static Content</div>
{/* An error while fetching will be caught by the ErrorBoundary */}
<ErrorBoundary fallback={<div>Something went wrong!</div>}>
{/* Suspense will trigger a loading state while the data is being fetched */}
<Suspense fallback={<div>Loading...</div>}>
{/*
The `data` property on a query is a SolidJS resource
so it will work with Suspense and transitions out of the box!
*/}
<div>{repositoryQuery.data?.updated_at}</div>
</Suspense>
</ErrorBoundary>
</div>
)
}
const root = document.getElementById('root')
const client = new QueryClient()
render(
() => (
<QueryClientProvider client={client}>
<App />
</QueryClientProvider>
),
root!,
)
嗯，这看起来像是用更多代码来做同样的事情？
是的，确实如此！但是，这几行代码开启了一个全新的可能性世界。在上面的示例中，您的查询缓存了 5 分钟，这意味着如果在您的应用程序中的任何位置挂载了一个新组件，该组件在 5 分钟内使用了相同的查询，则它不会重新获取数据，而是使用缓存的数据。这只是 Solid Query 开箱即用的众多功能之一。其他一些功能包括
- 自动重新获取：当查询变得“陈旧”（根据 staleTime 选项，即过时）时，查询会在后台自动重新获取
- 自动缓存：查询默认情况下会被缓存并在您的应用程序中共享
- 请求去重：多个组件可以共享同一个查询并发出一个请求
- 自动垃圾回收：当不再需要查询时，查询会被垃圾回收
- 窗口焦点重新获取：当应用程序回到焦点时，查询会自动重新获取
- 分页：内置分页支持
- 请求取消：自动取消过时或不需要的请求
- 轮询/实时：通过简单的 refetchInterval 选项，可以轻松地为您的查询添加轮询或实时更新
- SSR 支持：Solid Query 与服务器端渲染完美配合
- 乐观更新：轻松使用乐观更新更新您的缓存
- 以及更多...
