如何使用 Apollo Client 按顺序链接两个 GraphQL 查询
How to chain two GraphQL queries in sequence using Apollo Client
我在前端使用 Apollo Client,在后端使用 Graphcool。我希望在页面打开时按顺序调用两个查询 firstQuery
和 secondQuery
。下面是示例代码(这里没有列出TestPage组件的定义):
export default compose(
graphql(firstQuery, {
name: 'firstQuery'
}),
graphql(secondQuery, {
name: 'secondQuery' ,
options: (ownProps) => ({
variables: {
var1: *getValueFromFirstQuery*
}
})
})
)(withRouter(TestPage))
我需要从 firstQuery
的结果中得到 secondQuery
中的 var1
。我怎样才能用 Apollo Client 做到这一点并进行创作?或者还有其他方法吗?提前致谢。
您的 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
跳过第二个查询,除非我们确实有来自第一个查询的数据可供使用。
使用查询组件
如果您使用 Query
组件,您也可以使用 skip
属性,尽管您也可以选择 return 其他组件(例如null
或加载指示器)在第一个渲染道具函数中:
<Query query={firstQuery}>
{({ data: { someQuery: { someValue } = {} } = {} }) => (
<Query
query={secondQuery}
variables={{var1: someValue}}
skip={someValue === undefined}
>
{({ data: secondQueryData }) => (
// your component here
)}
</Query>
使用 useQuery Hook
您还可以将 skip
与 useQuery
挂钩一起使用:
const { data: { someQuery: { someValue } = {} } = {} } = useQuery(firstQuery)
const variables = { var1: someValue }
const skip = someValue === undefined
const { data: secondQueryData } = useQuery(secondQuery, { variables, skip })
突变
与查询不同,突变涉及专门调用一个函数来触发请求。此函数 return 是一个 Promise,它将根据突变的结果进行解析。这意味着,在处理突变时,您可以简单地链接生成的 Promise:
const [doA] = useMutation(MUTATION_A)
const [doB] = useMutation(MUTATION_B)
// elsewhere
const { data: { someValue } } = await doA()
const { data: { someResult } } = await doB({ variables: { someValue } })
对于任何使用 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,在后端使用 Graphcool。我希望在页面打开时按顺序调用两个查询 firstQuery
和 secondQuery
。下面是示例代码(这里没有列出TestPage组件的定义):
export default compose(
graphql(firstQuery, {
name: 'firstQuery'
}),
graphql(secondQuery, {
name: 'secondQuery' ,
options: (ownProps) => ({
variables: {
var1: *getValueFromFirstQuery*
}
})
})
)(withRouter(TestPage))
我需要从 firstQuery
的结果中得到 secondQuery
中的 var1
。我怎样才能用 Apollo Client 做到这一点并进行创作?或者还有其他方法吗?提前致谢。
您的 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
跳过第二个查询,除非我们确实有来自第一个查询的数据可供使用。
使用查询组件
如果您使用 Query
组件,您也可以使用 skip
属性,尽管您也可以选择 return 其他组件(例如null
或加载指示器)在第一个渲染道具函数中:
<Query query={firstQuery}>
{({ data: { someQuery: { someValue } = {} } = {} }) => (
<Query
query={secondQuery}
variables={{var1: someValue}}
skip={someValue === undefined}
>
{({ data: secondQueryData }) => (
// your component here
)}
</Query>
使用 useQuery Hook
您还可以将 skip
与 useQuery
挂钩一起使用:
const { data: { someQuery: { someValue } = {} } = {} } = useQuery(firstQuery)
const variables = { var1: someValue }
const skip = someValue === undefined
const { data: secondQueryData } = useQuery(secondQuery, { variables, skip })
突变
与查询不同,突变涉及专门调用一个函数来触发请求。此函数 return 是一个 Promise,它将根据突变的结果进行解析。这意味着,在处理突变时,您可以简单地链接生成的 Promise:
const [doA] = useMutation(MUTATION_A)
const [doB] = useMutation(MUTATION_B)
// elsewhere
const { data: { someValue } } = await doA()
const { data: { someResult } } = await doB({ variables: { someValue } })
对于任何使用 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