reactjs - apollo graphql UI 重新获取后未更新

Question

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

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。