跳到主要内容

 

RTK 查询示例

示例概述

我们有各种示例,展示了使用 RTK Query 的各个方面。

这些示例并不意味着你应该以此为基础来构建你的应用程序,而是存在于展示你在应用程序中可能不需要或不想要的非常特定的行为。对于大多数用户来说,查询变异部分的基本示例将覆盖你的大部分需求。

提示

请注意,当你在 CodeSandbox 中尝试示例时,可能会遇到奇怪的行为,特别是当你复制它们并开始编辑文件时。热重载、CSB 服务工作者和 msw 有时会有问题,无法进入正确的页面 -- 当发生这种情况时,只需在 CSB 浏览器窗格中刷新即可。

完整示例

React 乐观更新

在下面的示例中,你会注意到一些事情。侧边栏上有两个 Posts 列表。顶部的那个只有在成功的变异和与服务器重新同步之后才会更新。订阅的那个由于乐观更新会立即更新。在出现错误的情况下,你会看到这个操作被回滚。

信息

示例中有一些故意设置的奇怪行为... 当编辑帖子的名称时,你很可能会遇到随机错误。

React 与 GraphQL

认证

有多种方式可以使用 RTK Query 处理认证。这是一个非常基础的示例,从登录变异中获取 JWT,然后将其设置在我们的存储中。然后我们使用 prepareHeaders 将认证头注入到每个后续请求中。

分发一个动作来设置用户状态

这个示例分发一个 setCredentials 动作来存储用户和令牌信息。

使用 extraReducers

这个示例使用了 authSlice 中的 extraReducers 和端点的匹配器。

React 类组件

查看 PostDetail 组件,了解类组件的使用示例。

Svelte