如何在 Apollo Local State 中触发 React Hook

Question

所以...我在我的 React 应用程序中使用 Apollo 进行本地状态管理。我也在使用 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 和组件状态中复制相同状态的唯一好处（which is what this library does) is reactivity -- doing so will allow your components to update automatically if the cookies change. If you don't need that functionality, you're better off just using some library that doesn't utilize React-specific features, like js-cookie. Even if you need to listen for changes in cookies, you can do so without using hooks using a library like universal-cookie，这是 react-cookie 在幕后使用的。

如果您一心想使用 react-cookie，那么您的 logout 变更将只需要更新本地状态，并且您需要将组合逻辑提取到一个单独的挂钩中。类似于：

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

如何在 Apollo Local State 中触发 React Hook

How to trigger React Hook in Apollo Local State

apollo

apollo-client

react-cookie

react-hooks