【问题标题】:Passing data through a GRAPHQL Subscription gives null on only one of the arguments通过 GRAPHQL 订阅传递数据仅在其中一个参数上给出 null
【发布时间】:2020-05-24 11:47:34
【问题描述】:

我订阅了以下 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;

然后我有以下关于 Mutation 的代码

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

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

【问题讨论】:

    标签: reactjs graphql subscription graphql-js


    【解决方案1】:

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

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

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

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

    【讨论】:

    • 有道理,这解决了问题,谢谢。我还更改了频道的名称,因为到处都是“预订”,一开始就更加混乱=)
    • 啊,我的错,排序。对这东西有点新意。再次Tnx
    猜你喜欢
    • 2020-08-12
    • 1970-01-01
    • 1970-01-01
    • 2015-10-05
    • 1970-01-01
    • 2022-01-15
    • 2023-04-05
    • 2017-06-06
    相关资源
    最近更新 更多