重新获取后，apollo graphql UI 未更新

Question

在反应登录组件中，我想在登录成功后重新获取和更新导航栏组件。

const loginUser = () => {
    props.mutate({
      variables: {
        input: { email, password },
      },
      refetchQueries: [{ query: GET_ME }],
    });
  };

我可以在网络选项卡中看到登录和重新获取，并且都以正确的状态返回 200。但是导航栏仍然显示旧数据。

这是我的导航栏组件。

export const Header = props => {
  return <div>Header {JSON.stringify(props.data)}</div>;
};

export default graphql(GET_ME)(Header);

和 apolloClient：

export const client = new ApolloClient({
  link: createHttpLink({
    credentials: 'include',
    uri: 'http://localhost:8080/api/graphql',
  }),
  cache: new InMemoryCache(),
});

Answer 1

尝试添加

 options: {
      awaitRefetchQueries: true
 },

到 refetchQueries 和变量旁边的 props.mutate。

使用 options.refetchQueries 重新获取的查询是异步处理的，这意味着默认情况下它们不一定在突变完成之前完成。将 options.awaitRefetchQueries 设置为 true 将确保在认为完成（或解决）突变之前完成重新获取的查询。options.awaitRefetchQueries 默认为 false。

Answer 2

约翰所说的可能是某些人的解决方案，但不是我的。

getMe对我来说，如果用户未登录，则查询时通常不会返回任何内容或出现错误。

因此，下一次调用不会重置缓存，这会导致整个系统出现错误。

我的问题的解决方案是errorPolicy没有给出一个。

export const isAuth = compose(
  graphql(GET_ME, {
    options: {
      fetchPolicy: 'cache-first',
      errorPolicy: 'ignore',
    },
  })
);

由于我使用 HOC，所以这就是我的解决方案。