RTK Query：能否安全修改useQuery返回的data数据？

示例代码 #

export const PostsList = () => {
  const {
    data: posts = [],
    isLoading,
    isSuccess,
    isError,
    error
  } = useGetPostsQuery()

  const sortedPosts = useMemo(() => {
    const sortedPosts = posts.slice()
    // Sort posts in descending chronological order
    sortedPosts.sort((a, b) => b.date.localeCompare(a.date))
    return sortedPosts
  }, [posts])

教程原文解释 #

我们不能直接调用posts.sort()，因为Array.sort()会修改原数组，因此需要先创建一个副本。

我的疑问 #

• 上述教程的说法是否准确？
• 修改data是否会实际改变缓存中的值，进而影响其他useGetPostsQuery调用？
• 这只是基于最佳实践的建议，还是有强制机制约束？

补充说明：尝试直接修改数组时出现错误：Uncaught TypeError: 0 is read-only，希望了解背后的运行机制。

解答 #

1. 教程说法完全准确，且并非只是最佳实践，而是RTK Query的强制机制要求
2. 你根本无法修改缓存中的原数据：RTK Query返回的data（即示例中的posts）是被Redux Toolkit内部通过immer库冻结（frozen）的不可变对象，所有直接修改原数组的操作（比如sort、push、splice）都会触发"read-only"错误——因为原数据的内存空间被标记为只读，不允许原地修改。
3. 假设没有冻结机制的后果：如果允许直接修改原数组，确实会污染RTK Query的缓存，导致所有使用useGetPostsQuery的组件拿到被篡改后的数据，引发不可预测的渲染异常和状态混乱。

背后的运行机制 #

Redux生态（包括RTK和RTK Query）的核心设计原则是状态不可变性：只有通过创建新的状态对象来更新数据，Redux才能精准追踪状态变化，触发组件的正确重渲染。

RTK Query作为基于Redux的异步数据管理层，会自动将缓存中的数据冻结，强制开发者遵守不可变规范。如果你需要修改数据，正确的方式有两种：

• 像示例那样，创建原数组的副本（比如用slice()、[...posts]），在副本上进行修改
• 使用RTK Query提供的官方API（如updateQueryData）来更新缓存中的数据

内容的提问来源于stack exchange，提问作者Nathan