reactjs - 在 history.push 之后中继 fetchQuery 不起作用，但在手动刷新时可以正常工作

Question

Header我正在开发一个带有身份验证的 react-relay-graphql 应用程序，我想在组件（导航）中显示新消息计数。这是Login组件代码：

...

LoginMutation(username, password)
            .then((resp) => {
                if (resp.token) {
                    this._saveUserData(resp.expiredAt, resp.token)
                    fetchQuery(environment, query, {})
                        .then(data => {
                            const me = data.user.me;
                            this.setState({
                                Auth: {
                                    user: {
                                        fullName: me.fullName,
                                        username: me.username,
                                        isSeniorUser: me.isSeniorUser
                                    }
                                }
                            })
                            this.props.setUser(this.state.Auth.user)  // Redux
                            this.props.history.replace('/dashboard')
                        });
                }
            })

_saveUserData = (expiredAt, token) => {
    localStorage.setItem(GC_USER_EXPIRES_AT, expiredAt)
    localStorage.setItem(GC_AUTH_TOKEN, token)
}

...

这是Header组件（它在Dashboard组件内部）

class Header extends Component {

    componentDidMount() {
        this.getMessagesCount()
    }

    getMessagesCount() {
        fetchQuery(environment, NewMessagesQuery, {})
            .then(data => {
                const newMessagesCount = data.message != null ? data.message.countNewMessages.newMessages : '';
                this.props.setNewMessagesCount(newMessagesCount) // Redux
            });
    }

    render() {
        return (
            <>
                {this.props.newMessages}
            </>
        )
    }
}

问题是在History.push它显示仪表板但fetchQuery甚至没有运行并返回data = {messages: null}之后，但是当页面手动刷新时，它可以工作并返回新消息计数。

标签： reactjsgraphqlrelay

Answer 1

我想到了。万一有人遇到这个问题，我的缓存配置Environment.js是错误的。所以它试图为每个请求从缓存中读取数据。