如何使用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屋！