Apollo 2.1中完成Mutation后如何调用browserHistory.push？

嘿，我来帮你搞定这个问题！作为Apollo 2.1的新手，结合react-router在Mutation完成后跳转页面其实挺 straightforward 的，我给你分享几种实用的方式：

1. 用Mutation组件的onCompleted回调（最适合Apollo 2.1的写法） #

首先，你需要让组件能拿到react-router的history对象——可以用withRouter高阶组件包裹你的组件，这样就能通过props获取到history了。然后在Mutation组件的onCompleted属性里调用history.push就行，这个回调会在Mutation成功执行完成后触发。

举个实际的代码例子：

import { Mutation } from 'react-apollo';
import { withRouter } from 'react-router-dom';
import gql from 'graphql-tag';

// 定义你的Mutation
const CREATE_ITEM = gql`
  mutation CreateItem($name: String!) {
    createItem(name: $name) {
      id
      name
    }
  }
`;

const CreateItemForm = ({ history }) => (
  <Mutation 
    mutation={CREATE_ITEM}
    // Mutation成功后跳转
    onCompleted={() => history.push('/items-list')}
    // 可选：处理错误，避免出错时跳转
    onError={(error) => console.error('创建失败:', error.message)}
  >
    {(createItem) => (
      <form 
        onSubmit={(e) => {
          e.preventDefault();
          const name = e.target.name.value;
          createItem({ variables: { name } });
        }}
      >
        <input type="text" name="name" placeholder="输入名称" />
        <button type="submit">创建并跳转</button>
      </form>
    )}
  </Mutation>
);

// 用withRouter包裹，让组件拿到history prop
export default withRouter(CreateItemForm);

2. 如果你用函数组件+Hooks（可选，需确认版本兼容） #

如果你的项目已经支持React Hooks，也可以用useMutation和useHistory钩子来实现，代码会更简洁：

import { useMutation } from '@apollo/react-hooks';
import { useHistory } from 'react-router-dom';
import gql from 'graphql-tag';

const CREATE_ITEM = gql`
  mutation CreateItem($name: String!) {
    createItem(name: $name) {
      id
      name
    }
  }
`;

const CreateItemForm = () => {
  const history = useHistory();
  const [createItem] = useMutation(CREATE_ITEM, {
    onCompleted: () => history.push('/items-list'),
    onError: (error) => console.error('创建失败:', error.message)
  });

  const handleSubmit = (e) => {
    e.preventDefault();
    const name = e.target.name.value;
    createItem({ variables: { name } });
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="name" placeholder="输入名称" />
      <button type="submit">创建并跳转</button>
    </form>
  );
};

export default CreateItemForm;

3. 类组件的写法（如果你的项目用类组件） #

如果是类组件，同样用withRouter包裹，然后在onCompleted里调用this.props.history.push：

import { Mutation } from 'react-apollo';
import { withRouter } from 'react-router-dom';
import gql from 'graphql-tag';
import React, { Component } from 'react';

const CREATE_ITEM = gql`
  mutation CreateItem($name: String!) {
    createItem(name: $name) {
      id
      name
    }
  }
`;

class CreateItemForm extends Component {
  handleSubmit = (createItem) => (e) => {
    e.preventDefault();
    const name = e.target.name.value;
    createItem({ variables: { name } });
  };

  render() {
    return (
      <Mutation 
        mutation={CREATE_ITEM}
        onCompleted={() => this.props.history.push('/items-list')}
        onError={(error) => console.error('创建失败:', error.message)}
      >
        {(createItem) => (
          <form onSubmit={this.handleSubmit(createItem)}>
            <input type="text" name="name" placeholder="输入名称" />
            <button type="submit">创建并跳转</button>
          </form>
        )}
      </Mutation>
    );
  }
}

export default withRouter(CreateItemForm);

额外小技巧 #

如果需要根据Mutation返回的数据来动态决定跳转路径，还可以在onCompleted里接收返回结果：

onCompleted={(data) => {
  // 比如跳转到刚创建的资源详情页
  history.push(`/items/${data.createItem.id}`);
}}

内容的提问来源于stack exchange，提问作者schingeldi