Question

我正在使用Apollo Client作为前端，使用Graphcool作为后端。有两个查询firstQuery和secondQuery，我希望在页面打开时按顺序调用它们。下面是示例代码（此处未列出TestPage组件的定义）：

export default compose(
        graphql(firstQuery, {
            name: 'firstQuery'
        }),
        graphql(secondQuery, { 
            name: 'secondQuery' ,
            options: (ownProps) => ({
                variables: {
                   var1: *getValueFromFirstQuery*
                }
            })
        })
)(withRouter(TestPage))

我需要从var1的{{1}}结果secondQuery获取firstQuery。我如何使用Apollo Client和编写？或者还有其他方法吗？提前致谢。

Answer 1

firstQuery组件添加的道具将可供以下（内部）组件使用，因此您可以执行以下操作：

export default compose(
        graphql(firstQuery, {
            name: 'firstQuery'
        }),
        graphql(secondQuery, { 
            name: 'secondQuery',
            skip: ({ firstQuery }) => !firstQuery.data,
            options: ({firstQuery}) => ({
                variables: {
                   var1: firstQuery.data.someQuery.someValue
                }
            })
        })
)(withRouter(TestPage))

请注意，我们使用skip跳过第二个查询，除非我们实际拥有第一个查询中的数据。

Answer 2

对于使用react apollo hooks的任何人，都可以使用相同的方法。

您可以使用两个useQuery挂钩并将第一个查询的结果传递到第二个查询的skip option

示例代码：

const AlertToolbar = ({ alertUid }: AlertToolbarProps) => {
  const authenticationToken = useSelectAuthenticationToken()

  const { data: data1 } = useQuery<DataResponse>(query, {
    skip: !authenticationToken,
    variables: {
      alertUid,
    },
    context: makeContext(authenticationToken),
  })

  const { data: data2, error: error2 } = useQuery<DataResponse2>(query2, {
    skip:
      !authenticationToken ||
      !data1 ||
      !data1.alertOverview ||
      !data1.alertOverview.deviceId,
    variables: {
      deviceId:
        data1 && data1.alertOverview ? data1.alertOverview.deviceId : null,
    },
    context: makeContext(authenticationToken),
  })

  if (error2 || !data2 || !data2.deviceById || !data2.deviceById.id) {
    return null
  }
  const { deviceById: device } = data2
  return (
    <Toolbar>
    ...
    // do some stuff here with data12

如何使用Apollo Client按顺序链接两个GraphQL查询

2 个答案: