apollo-link-state writeQuery 不会更新缓存中的 ROOT_QUERY，防止重新渲染组件答案

【问题标题】：apollo-link-state writeQuery does't update ROOT_QUERY in cache, preventing re-render componentapollo-link-state writeQuery 不会更新缓存中的 ROOT_QUERY，防止重新渲染组件
【发布时间】：2019-02-02 07:23:14
【问题描述】：

我正在使用自定义提供程序实施 OAuth。所以我有Auth 组件在'componentDidMount:

client.mutate({
  mutation: CURRENT_USER_MUTATION,
  variables: {
    token: (response.data.token.value) || null,
   },
});

我的变异看起来像：

gql`
  mutation($token: String!) {
    CurrentUser(token: $token) @client
  }
`;

我有解析器：

defaults: {
  current_user: null,
},
resolvers: {
  Mutation: {
    CurrentUser: (_: any, { token }: { token: string }, { cache }: { cache: Object }): null => {
    const { user } = decodeJWT(token);

    cache.writeQuery({
      query: CURRENT_USER,
      data: {
        current_user: {
          __typename: 'user',
          id: user.id,
          name: user.name,
          level: user.level,
          email: user.email,
        },
      },
    });

    return cache.readQuery({ query: CURRENT_USER });
  },
},

然后发生了一些事情，当我查看 chrome apollo 调试器时，我可以清楚地看到：

所以数据已经在 Apollo 缓存中，但 ROOT_QUERY 仍然有 null 作为当前用户。

当我尝试像这样使用react-apollo Mutation 组件时：

<Mutation mutation={CURRENT_USER_MUTATION}>
  {(mutate: Function,): React.Node => {
    return (
      <button type="button" onClick={(): Function => mutate(({ variables: { token: '123' } }: Object))}>
        Do it
       </button>
     );
   }}
 </Mutation>

然后完美运行。

所以看起来在使用cache.writeQuery 后，其他组件/缓存没有通知正在运行的突变。

感谢您的帮助 :)

【问题讨论】：

标签： reactjs graph oauth-2.0 react-apollo apollo-client

【解决方案1】：

所以最后，我发现问题出在我不同的地方：P 我的朋友 Michał 通过在此处制作我的代码的工作示例来建议我：https://codesandbox.io/s/l57k8v3o67

所以有几个结论： 1. 组件只会在检测到用户交互时重新获取/重新渲染。因此，例如单击，这就是为什么带有可单击按钮的组件可以工作或向服务器发出某些请求的原因。

Apollo 几乎没有错误 :) 我有一个名为 <PrivateRoute /> 的不同组件，主要是检查我们是否有 current_user，然后重定向或渲染路由，这里是：https://gist.github.com/bslipek/b11caefba31599e30d498beaf8644cec 这个组件有一个来自 ere 的问题： https://github.com/apollographql/apollo-link-state/issues/236

所以基本上，如果您使用本地状态的查询渲染组件，并且您没有设置 fetchPolicy='cache-first' Apollo 将回退到默认值。

【讨论】：

【解决方案2】：

您的 CurrentUser 变异似乎是错误的。

这应该工作：

Mutation: {
  CurrentUser: (_: any, { token }: { token: string }, { cache }: { cache: Object 
}): null => {
  const { user } = decodeJWT(token);

  cache.writeQuery({
    query: CURRENT_USER,
    data: {
      current_user: {
        __typename: 'user',
        id: user.id,
        name: user.name,
        level: user.level,
        email: user.email,
      },
    },
  });

  return {
      current_user: {
        __typename: 'user',
        id: user.id,
        name: user.name,
        level: user.level,
        email: user.email,
      },
    }
},

【讨论】：

变异很好，也许返回 cache.readQuery 对性能不好（？）但工作正常。