我们曾经依靠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
函数。但是我们宁愿找到更好的解决方案。
非常感谢您提供的所有提示和帮助。如果需要进一步的解释,请告诉我。
谢谢。