@ convex-dev/ react-query (英语)
而不是投票,您要通过服务器端查询获得更新 用于Convex部署。 Convex 是带有服务器侧的数据库 (db -边? 类似存储程序)的功能,可以被动更新.
将所有相关订阅的新结果推给客户
同时更新数据,所以数据永远不僵化,没有必要打电话
queryClient.invalidateQueries()。 。 。 .
设置
见 ./src/例.tsx (中文(简体) ) 对于一个真正的例子。 将军 样式 :
- 创建 Convex 客户端和 Convex 查询客户端 。 设置全局默认值
queryKeyHashFn改为convexQueryClient.hashFn()财务报告和审定财务报表queryFn改为convexQueryClient.queryFn()连接 Convex 查询中心到反应 出问入道.
const convexClient = new ConvexReactClient(import.meta.env.VITE_CONVEX_URL);
const convexQueryClient = new ConvexQueryClient(convexClient);
const queryClient = new QueryClient({
defaultOptions: {
queries: {
queryKeyHashFn: convexQueryClient.hashFn(),
queryFn: convexQueryClient.queryFn(),
},
},
});
convexQueryClient.connect(queryClient);
- 使用
useQuery()与convexQuery选项厂函数调用 a 一个api导入对象../convex/_generated/server和论点 用于此查询功能。 这两个构成查询密钥.
const { isPending, error, data } = useQuery({
...convexQuery(api.repos.get, { repo: "made/up" }),
gcTime: 10000, // unsubscribe after 10s of no use
});
staleTime 设置为 Infinity 数据从不僵化,而是
服务器上查询结果更新时主动更新 。 (见
tkdodo 的贴文
更多关于这个) 如果你喜欢,自定义 gcTime 时间长度a
查询订阅毕竟应该保持活动 useQuery() 钩子用它
已卸载.
如果你需要使用 Convex 动作作为查询, 它不会是反应; 你会得到 react Query 中的所有普通工具来进行回溯.
使用 TanStack 查询的区别 fetch
从服务器上推出新的查询结果, 所以 a staleTime 联 合 国 Infinity
应当使用.
您的应用程序将一直订阅到查询 gcTime 已经过去了。 调色板
通常使用至少一个值的交换方式
几秒钟.
示例
要运行这个例子:
npm installnpm run dev
变异和行动
如果你把应用包在 ConvexProvider 你会使用螺旋钩
喜欢 useConvexMutation 财务报告和审定财务报表 useConvexAction· :
<ConvexProvider client={convex}>
<QueryClientProvider client={queryClient}>
<App />
</QueryClientProvider>
</ConvexProvider>
您可以直接使用此变异函数, 也可以在 TanStack 查询中将其包裹
useMutation数字 :
const mutationFn = useConvexMutation(api.board.createColumn);
const { mutate } = useMutation({ mutationFn });
const { mutate } = useMutation({
mutationFn: useConvexAction(api.time.getTotal),
});
认证
说明: 例应用包括基本 Convex Auth 执行 参考文献.
TanStack Query 并不是关于认证; 认证代码可能是一个元素 查询密钥。 用Convex不用再加一个 auth 代码的密钥; auth 是所有 Convex 查询和 当认证信息发生变化时,这些查询将被重审.
Convex auth 通常是通过 JWT 完成的: 如果
打电话前请 convexReactClinet.setAuth() 具有
提供标志.
Auth 设置看起来就像推荐在
对流文件,使用
使用本地对流钩. 对于办事员来说,这看起来可能是这样的:a ClerkProvider
用于认证, a ConvexProviderWithClerk 对于对流客户端,和 a
QueryClient。 。 。 .
<ClerkProvider publishableKey="pk_test_...">
<ConvexProviderWithClerk client={convex} useAuth={useAuth}>
<QueryClientProvider client={queryClient}>
<App />
</QueryClientProvider>
</ConvexProviderWithClerk>
</ClerkProvider>
见 Convex Auth 文档 用于设置指令.
开始
- 认证
- 发送查询
- 清除/ 未订阅使用效果; 热重装入可能不是 工作权利
捐款
复制后, 重播运行 npm i 以安装依赖。 此软件包使用
hy 发布无害环境管理。 如果有需要的话
对于一个 CJS 构建, 我们可以在“ dialects” 部分添加“ cjs ”
那个包裹 json.
要发布 alpha 版本, 请在 package.json 中将版本更新为某种内容
喜欢 0.0.0-alpha.1 运行 just rush-pnpm publish --tag alpha。 。 。 .
要发布定期发布, 将版本更新为 package.json 到某样东西
喜欢 0.1.2 运行 just rush-pnpm publish。 。 。 .