如何使用 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
组件添加的 props 将可用于它下面(内部)的组件,因此您可以执行以下操作:
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
属性,尽管您也可以选择返回其他内容(例如 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,它将使用突变的结果进行解析.这意味着,在处理突变时,您可以简单地将结果 Promise 链接起来:
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屋!