通过 GRAPHQL 订阅传递数据仅在其中一个参数上给出 null [英] Passing data through a GRAPHQL Subscription gives null on only one of the arguments

查看:17
本文介绍了通过 GRAPHQL 订阅传递数据仅在其中一个参数上给出 null的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我订阅了以下 GRAPHQL:

I have the following GRAPHQL subscription:

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 的以下代码

Then I have the following code on the Mutation in question

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

我在前端有以下订阅文件(React)

I have the follow subscription file in front end (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}}

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

I get that I am probably setting up the subscription wrong somehow but I don't see the issue.

推荐答案

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

Based on your schema, the desired data returned should look like this:

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

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

The first booking is the field on Subscription, while the second booking is the field on SubscriptionData. The object you pass to publish should have this same shape (i.e. it should always include the root-level subscription field).

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

这篇关于通过 GRAPHQL 订阅传递数据仅在其中一个参数上给出 null的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆