如何根据反应中其他graphql的响应调用graphql？答案

【问题标题】：How to call graphql based on the response of other graphql in react?如何根据反应中其他graphql的响应调用graphql？
【发布时间】：2020-12-03 01:23:55
【问题描述】：

我正在使用以下版本的 graphql 并做出反应。

"react-apollo": "^1.4.10", "graphiql": "^0.11.2", "graphql": "^14.0.2",

以下是 compose 函数中 graphql 调用的 sn-p。我想使用 async await 调用 graphql，所以第二个调用将等到响应来自第一个。而第三个 graphl 调用将仅在第二个调用之后。

我们怎样才能实现成下面的代码。

export default compose(
  withRouter,
  connect(
    mapStateToProps,
    mapDispatchToProps,
  ),
  graphql(call1, {
    options: props => {
      return {
        fetchPolicy: 'network-only',
        variables: { id },
      };
    },
    props: ({ data }) => {
      return data
    },
  }),
  graphql(call2, {
    options: props => {
      return {
        fetchPolicy: 'network-only',
        variables: { firstcallid },
      };
    },
    props: ({ data }) => {
      return data
    },
  }),
  graphql(call3, {
    options: props => {
      return {
        fetchPolicy: 'network-only',
        variables: { based on the graphql 1 and graphql call 2  },
      };
    },
    props: ({ data }) => {
      return data
    },
  }),
)(Component);

【问题讨论】：

标签： reactjs graphql react-apollo apollo-client

【解决方案1】：

我觉得你可以试试.then

export default compose(
      withRouter,
      connect(
        mapStateToProps,
        mapDispatchToProps,
      ),
      graphql(call1, {
        options: props => {
          return {
            fetchPolicy: 'network-only',
            variables: { id },
          };
        },
        props: ({ data }) => {
          return data
        },
      }).then((res)=>{
          graphql(call2, {
        options: props => {
          return {
            fetchPolicy: 'network-only',
            variables: { firstcallid },
          };
        },
        props: ({ data }) => {
          return data
        },
      }).then((res)=>{ graphql(call3, {
        options: props => {
          return {
            fetchPolicy: 'network-only',
            variables: { based on the graphql 1 and graphql call 2  },
          };
        },
        props: ({ data }) => {
          return data
        },
      })
      })
      })
    )(Component);

如果需要满足条件，也可以查看调用后收到的res对象的字段！

【讨论】：