如何使用Apollo Client按顺序链接两个GraphQL查询 [英] How to chain two GraphQL queries in sequence using Apollo Client
问题描述
我在前端使用Apollo Client,在后端使用Graphcool.有两个查询firstQuery
和secondQuery
,我希望它们在页面打开时依次被调用.这是示例代码(此处未列出TestPage组件的定义):
I am using Apollo Client for the frontend and Graphcool for the backend. There are two queries firstQuery
and secondQuery
that I want them to be called in sequence when the page opens. Here is the sample code (the definition of TestPage component is not listed here):
export default compose(
graphql(firstQuery, {
name: 'firstQuery'
}),
graphql(secondQuery, {
name: 'secondQuery' ,
options: (ownProps) => ({
variables: {
var1: *getValueFromFirstQuery*
}
})
})
)(withRouter(TestPage))
我需要从firstQuery
的结果中获取secondQuery
中的var1
.我该如何使用Apollo Client进行撰写?还是有其他方法可以做到?提前致谢.
I need to get var1
in secondQuery
from the result of firstQuery
. How can I do that with Apollo Client and compose? Or is there any other way to do it? Thanks in advance.
推荐答案
由firstQuery
组件添加的道具将可用于其下方(内部)的组件,因此您可以执行以下操作:
The props added by your firstQuery
component will be available to the component below (inside) it, so you can do something like:
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
跳过第二个查询.
Notice that we use skip
to skip the second query unless we actually have data from the first query to work with.
如果您使用的是Query
组件,则还可以利用skip
属性,尽管您还可以选择在第一个render props函数内返回其他内容(例如null
或加载指示器) :
If you're using the Query
component, you can also utilize the skip
property, although you also have the option to return something else (like null
or a loading indicator) inside the first render props function:
<Query query={firstQuery}>
{({ data: { someQuery: { someValue } = {} } = {} }) => (
<Query
query={secondQuery}
variables={{var1: someValue}}
skip={someValue === undefined}
>
{({ data: secondQueryData }) => (
// your component here
)}
</Query>
使用useQuery挂钩
您也可以将skip
与useQuery
挂钩一起使用:
Using the useQuery Hook
You can also use skip
with the useQuery
hook:
const { data: { someQuery: { someValue } = {} } = {} } = useQuery(firstQuery)
const variables = { var1: someValue }
const skip = someValue === undefined
const { data: secondQueryData } = useQuery(secondQuery, { variables, skip })
突变
与查询不同,变异涉及专门调用一个函数以触发请求.此函数返回一个Promise,它将用突变的结果来解决.这意味着,在处理突变时,您可以简单地链接产生的Promises:
Mutations
Unlike queries, mutations involve specifically calling a function in order to trigger the request. This function returns a Promise that will resolve with the results of the mutation. That means, when working with mutations, you can simply chain the resulting Promises:
const [doA] = useMutation(MUTATION_A)
const [doB] = useMutation(MUTATION_B)
// elsewhere
const { data: { someValue } } = await doA()
const { data: { someResult } } = await doB({ variables: { someValue } })
这篇关于如何使用Apollo Client按顺序链接两个GraphQL查询的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!