Question

我一直在阅读Apollo文档，找不到关于q[a]=1&q[b]=foo HOC传递的client道具发生突变后如何重新提取的示例。

我的组件

withApollo

我想在每次删除帖子时重新获取帖子。

Answer 1

您呈现的posts数据处于组件状态，但是您仅查询componentDidMount中的帖子。仅在首次渲染组件时调用此方法。

class PostList extends React.Component {

    fetchPosts() {
        this.props.client.query({
                query: getPosts,
            }).then(({ data }) => {
                this.setState({ posts: data.posts });
            });
    }

    componentDidMount() {
        this.fetchPosts();
    }

    deletePost = postId => {
        this.props.client
            .mutate({
                mutation: deletePost,
                variables: {
                    _id: postId
                },
            })
            .then(({ data }) => {
                this.fetchPosts()
            });
    };


    render() {
        const {posts} = this.state;    
        if (!posts) {
            return <div>Loading....</div>
        }

        return (
            <div className="post">
                ...stuff...
            </div>
        )
    }
}

实际上，您甚至不需要本地状态，就可以依赖Apollo客户端本地缓存并使用Query组件和Mutation组件。

突变后反应Apollo客户支持refetchQueries

1 个答案: