reactjs - 通过 GRAPHQL 订阅传递数据仅在其中一个参数上给出 null

Question

我有以下 GRAPHQL 订阅:

Schema.graphql
    type Subscription {
      booking: SubscriptionData
    }

    type SubscriptionData {
      booking: Booking!
      action: String
    }

这是解析器订阅文件

Resolver/Subscription.js
const Subscription = {
  booking: {
    subscribe(parent, args, { pubsub }, info) {
      return pubsub.asyncIterator("booking");
    }
  }
};

export default Subscription;

然后我有以下关于有问题的突变的代码

pubsub.publish("booking", { booking: { booking }, action: "test" });

我在前端(React)有跟随订阅文件

const getAllBookings = gql`
  query {
    bookings {
      time
      durationMin
      payed
      selected
      activity {
        name
      }
    }
  }
`;

const getAllBookingsInitial = {
  query: gql`
    query {
      bookings {
        time
        durationMin
        payed
        selected
        activity {
          name
        }
      }
    }
  `
};

class AllBookings extends Component {
  state = { allBookings: [] }

  componentWillMount() {
    console.log('componentWillMount inside AllBookings.js')
    client.query(getAllBookingsInitial).then(res => this.setState({ allBookings: res.data.bookings })).catch(err => console.log("an error occurred: ", err));
  }

  componentDidMount() {
    console.log(this.props.getAllBookingsQuery)
    this.createBookingsSubscription = this.props.getAllBookingsQuery.subscribeToMore(
      {
        document: gql`
          subscription {
            booking {
              booking { 
                time
                durationMin
                payed
                selected
                activity {
                  name
                   }
              }
              action
            }
          }
        `,
        updateQuery: async (prevState, { subscriptionData }) => {
          console.log('subscriptionData', subscriptionData)
          const newBooking = subscriptionData.data.booking.booking;
          const newState = [...this.state.allBookings, newBooking]
          this.setState((prevState) => ({ allBookings: [...prevState.allBookings, newBooking] }))
          this.props.setAllBookings(newState);
        }
      },
      err => console.error(err)
    );
  }
  render() {
    return null;
  }
}

export default graphql(getAllBookings, { name: "getAllBookingsQuery" })(
  AllBookings
);

我得到以下响应:

data: {
booking: {booking: {...} action: null}}

我知道我可能以某种方式错误地设置了订阅，但我没有看到问题。

Answer 1

根据您的架构，返回的所需 data 应如下所示:

{
  "booking": {
    "booking": {
      ...
    },
    "action": "test"
  }
}

第一个booking是Subscription上的字段，第二个booking是SubscriptionData上的字段。您传递给 publish 的对象应该具有相同的形状(即它应该始终包含根级订阅字段)。

pubsub.publish('booking', {
  booking: {
    booking,
    action: 'test',
  },
})