我有问题通过查询用新数据补充组件 . 为了设置前提,我有两个兄弟姐妹组件,如下所示:
<Container>
<Navbar />
<Login /> || <Home />
</Container
基本上在我的登录组件中,当我点击登录时,我有一个像这样运行的变异:
this.props.mutate({
variables: { token },
refetchQueries: () => ['isAuthenticated']
}).then((data) => {
console.log(data);
this.props.history.push(`/`);
})
所以结果最终没有任何重新渲染,我是我的导航组件中的console.log(),以查看它的道具是否已更改但它没有,但是在我的网络选项卡和缓存中是它的数据应该回来了 .
我的导航项组件如下所示:
import React, { Component } from "react";
import { Link, withRouter } from "react-router-dom";
import gql from "graphql-tag";
import { graphql, compose } from "react-apollo";
import { withStyles } from "@material-ui/core/styles";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import Button from "@material-ui/core/Button";
import headerLinksStyle from "./HeaderLinksStyle";
import { LockOpen, GetApp, Info } from "@material-ui/icons";
const isLoggedInQuery = gql`
query isLoggedInQuery {
token @client
}
`;
const loggedInMutation = gql`
mutation authToken($token: String!) {
assignAuthToken(token: $token) @client {
token
}
}
`;
const userQuery = gql`
query isAuthenticated {
currentUser {
id
firstName
lastName
gender
location
password
email
permissions {
id
name
displayOrder
description
}
roles {
id
name
description
displayOrder
}
}
}
`;
class HeaderLinks extends Component {
logout = () => {
localStorage.removeItem("auth_token");
this.props.mutate({
variables: { token: null }
});
this.props.history.push(`/`);
};
refetch = () => {
console.log("refetch")
this.props.user.refetch();
}
render() {
const { classes } = this.props;
const { token } = this.props.data;
const isLoggedIn = token;
console.log(this.props);
return (
<List className={classes.list}>
{!isLoggedIn && (
<ListItem className={classes.listItem}>
<Link to="/login" style={{ color: "inherit" }}>
<Button color="inherit" className={classes.navLink}>
<LockOpen className={classes.icon} />Login
</Button>
</Link>
</ListItem>
)}
{!isLoggedIn && (
<ListItem className={classes.listItem}>
<Link to="/signup" style={{ color: "inherit" }}>
<Button color="inherit" className={classes.navLink}>
<GetApp className={classes.icon} />Sign up
</Button>
</Link>
</ListItem>
)}
<ListItem className={classes.listItem}>
<Button color="inherit" className={classes.navLink} onClick={() => { this.refetch();}}>
<Info className={classes.icon} />About
</Button>
</ListItem>
{isLoggedIn && (
<ListItem className={classes.listItem}>
<Button
color="inherit"
className={classes.navLink}
onClick={event => {
this.logout();
}}
>
<LockOpen className={classes.icon} />Logout
</Button>
</ListItem>
)}
</List>
);
}
}
export default compose(
graphql(isLoggedInQuery),
graphql(loggedInMutation),
graphql(userQuery, { name: "user", options: {fetchPolicy: 'network-only'}}),
withStyles(headerLinksStyle),
withRouter
)(HeaderLinks);
解雇this.props.user.refetch()工作正常,但我的道具回来时陈旧的信息/错误或数据 .
1 回答
这可能无法回答您关于重新获取查询的问题,但在登录操作中使用
client.resetStore()
是一个很好的做法 . 由于您可能希望在用户登录后重新获取在Apollo Store中缓存的任何结果 .这还应该修复依赖于查询数据的组件上的任何重新呈现问题 .
组件只有在将这些查询结果作为props接收时才会重新呈现 .