如何使用 Apollo 客户端按顺序链接两个 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 挂钩使用:

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 客户端按顺序链接两个 GraphQL 查询的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！