GraphQL 变异后的 refetchQueries，this.props 未更新

Question

This problem makes no sense to me at all... I am adding an author to a database using a mutation like this:

this.props
      .addAuthorMutation({
        variables: {
          name: this.state.name,
          age: this.state.age
        },
        refetchQueries: [
          {
            query: getAuthorsQuery,
            variables: {
              awaitRefetchQueries: true
            }
          }
        ]
      })
      .then(() => this.submitBookAlso());

Then simply...

  submitBookAlso() {
    console.log(this);
    console.log(this.props);
  }

For some mysterious reason, when I inspect (this) in the console, this.props.getAuthorsQuery.authors contains my added author, however, (this.props) in the console does not. The new author is added to a dropdown in another component successfully, and is in the database, but I cannot seem to get the author after the mutation. I would like to filter it...

let author = this.props.getAuthorsQuery.authors.filter(
  author => this.state.name === author.name
);
console.log(author);

...but this just gives me an empty array. What I am wanting to do is trigger another mutation when that one is finished (adding a book to a separate database collection with the new added author as it's author).

I get the same result without using awaitRefetchQueries, and also using onCompleted instead of.then(). These are my current dependencies:

  "dependencies": {
    "apollo-boost": "^0.1.16",
    "graphql": "^14.0.2",
    "react": "^16.5.2",
    "react-apollo": "^2.2.4",
    "react-dom": "^16.5.2",
    "react-scripts": "2.0.3"
  },

Thanks!

Answer 1

Try passing awaitRefetchQueries in directly to the mutation and not nested inside of refetchQueries like this:

this.props
      .addAuthorMutation({
        variables: {
          name: this.state.name,
          age: this.state.age
        },
        awaitRefetchQueries: true,
        refetchQueries: [
          {
            query: getAuthorsQuery
          }
        ]
      })
      .then(() => this.submitBookAlso());

Answer 2

// Pass Refetch when declaring useQuery example in hooks

const {data, error, loading, refetch} = useQuery("Your query")

const [addAuthorMutation] = useMutation("Your Mutation",{
variables: { "your variables"},
onCompleted: (data) => { "dispatch your action creators"},
refetch()

})