如何在 Apollo 本地状态中触发 React Hook

Question

所以...我正在使用 Apollo 在我的 React 应用程序中进行本地状态管理。我也在使用react-cookie(它依赖于内部的反应钩子(。

我想做一些非常基本的事情：

const logout = async (_, args, {cache}) => {
const cookies = new Cookies()
cookies.removeCookie (`auth`)
cache.writeData ({data: {isAuthenticated: false}})
}

问题是因为我在组件外部执行此操作，因此我无法使用useCookies，因此我的组件永远不会收到它已被删除的更新。

思潮？

我真的不想在将我的状态逻辑放入解析器和使用 React 钩子之间做出选择。我猜同样的事情也适用于 redux。

干杯！

Answer 1

在您的 cookie 和组件状态(这是这个库所做的(中复制相同状态的唯一好处是反应性——这样做将允许你的组件在 cookie 更改时自动更新。如果你不需要这个功能，你最好只使用一些不使用 React 特定功能的库，比如 js-cookie。即使你需要监听 cookie 中的更改，你也可以不使用钩子，使用像 universal-cookie 这样的库，这是react-cookie在引擎盖下使用的。

如果你执意要使用react-cookie，那么你的logout突变只需要更新局部状态，并且你需要将组合逻辑提取到一个单独的钩子中。像这样：

function useLogout = () => {
const [updateLocalState] = useMutation(LOGOUT_MUTATION)
const [removeCookie] = useCookies(['auth'])
return async () => {
await updateLocalState()
removeCookie()
}  
}