Question

我正在开发带有authenticaton的react-relay-graphql应用，我想显示Header组件中的新消息计数（导航）。这是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}，但是当页面手动刷新时，它可以正常工作并且返回新的邮件计数。

Answer 1

我知道了。万一有人遇到这个问题，<form class="" method="POST"> {{form}} {% csrf_token %} <input type="submit" name="" placeholder="Submit"> </form>中的“我的缓存配置”是错误的。因此，它试图为每个请求从缓存中读取数据。

中继fetchQuery在历史记录后不起作用.push BUT在手动刷新中工作正常

1 个答案: