在apolloConfig中访问道具(反应)

时间:2018-12-05 19:20:45

标签: javascript reactjs apollo react-apollo

我们曾经依靠Apollo自己的缓存,但是由于我们现在希望对保存的内容拥有更多的控制权,因此我们尝试了React Conext。到目前为止,还算不错,但是我们遇到了障碍。我们确实有解决方案,但是没有任何一个很好的解决方案。

我们的应用程序结构如下:

<ApolloProvider client={apolloClient}>
 <ModalProvider>
    <QoplaProvider>
        <AppRouter />
    </QoplaProvider>
</ModalProvider>

QoplaProvider中,我们获得了logout函数:

    logout = (history = null) => {
    if (history) {
        apolloClient.query({ query: LOGOUT, fetchPolicy: 'network-only' }).then(({ data }) => {
            sessionStorage.clear();
            this.resetState();
            if (data.logout) {
                history.push({ pathname: '/admin', state: { msg: 'Du är nu utloggad' } });
            }
        }).then(() => {
            apolloClient.resetStore();
        }).catch((exception) => {
            sessionStorage.clear();
            this.resetState();
            history.push({ pathname: '/admin', state: { msg: 'Du är nu utloggad' } });
        });
    } else {
        sessionStorage.clear();
        this.setSelectedUser(defaultValues.authenticatedUser)
    }

};

我们想在遇到各种错误时在apolloClient内部调用的方法:

export const apolloClient = new ApolloClient({
link: ApolloLink.from([
    onError(({response, operation, graphQLErrors, networkError}) => {
        console.log(
            'GRAPHQLERREOR',
            graphQLErrors,
            'NETWORKERRROR',
            networkError
        );

        if (graphQLErrors) {
            if (graphQLErrors[0].message === 'Access is denied') {
                console.log('this.props', this.props);
                // In here
            }
        }

我们当前的解决方案是使用window.location.replace("/logout"),在这种情况下,我们在其组件中调用logout函数。但是我们宁愿找到更好的解决方案。

非常感谢您提供的所有提示和帮助。如果需要进一步的解释,请告诉我。

谢谢。

0 个答案:

没有答案