突变后 React Apollo 客户端道具 refetchQueries

Posted 2023-03-10

【中文标题】突变后 React Apollo 客户端道具 refetchQueries

【英文标题】：React Apollo client prop refetchQueries after mutation

【发布时间】：2019-02-17 03:27:44

【问题描述】：

我一直在阅读 Apollo 文档，但找不到任何关于如何在使用 withApollo HOC 传递的 client 道具发生突变后重新获取的示例。

我的组件：

import React, Fragment from 'react';
import gql from 'graphql-tag';
import  withApollo  from 'react-apollo';
...

const getPosts =  gql`

    posts 
    _id
    title
    description
    user 
        _id
    
  
`;


const deletePost = gql`
    mutation deletePost($_id: String)
        deletePost(_id: $_id)
    
`;

class PostList extends React.Component 
    static propTypes = 
        match: PropTypes.object.isRequired,
        history: PropTypes.object.isRequired,
    ;
    state = posts: null;

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

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

                alert('Post deleted!');
            );
    ;


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

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


export default withApollo(PostList);

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

【参考方案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组件。