React Apollo client prop refetchQueries after mutation

Question

I have been reading the Apollo documentation and I can't find any examples on how to refetch after a mutation with the client props that is being passed by withApollo HOC.

My component:

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);

I want to refetch the posts each time one is deleted.

Clément Prévost Clément Prévost · Accepted Answer · 2018-09-12T16:20:27

The posts data that you render is in your component state, but you only query posts in componentDidMount. This method is called only when your component is first rendered.

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>
        )
    }
}

In fact, you do not even need to have a local state, you can rely on Apollo client local cache and use the Query component as well as the Mutation component.

React Apollo client prop refetchQueries after mutation

1 Answers