web-dev-qa-db-ja.com

Apolloクライアントを使用して2つのGraphQLクエリを順番にチェーンする方法

フロントエンドにApollo Clientを、バックエンドにGraphcoolを使用しています。 2つのクエリfirstQueryとsecondQueryがあり、ページが開いたときに順番に呼び出されるようにします。サンプルコードは次のとおりです（TestPageコンポーネントの定義はここにリストされていません）。

export default compose(
        graphql(firstQuery, {
            name: 'firstQuery'
        }),
        graphql(secondQuery, { 
            name: 'secondQuery' ,
            options: (ownProps) => ({
                variables: {
                   var1: *getValueFromFirstQuery*
                }
            })
        })
)(withRouter(TestPage))

secondQueryの結果からfirstQueryのvar1を取得する必要があります。 Apollo Clientでこれを行うにはどうすればよいですか？それとも他の方法がありますか？前もって感謝します。

graphqlapolloreact-apolloapollo-clientgraphcool
12
afterglowlee

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を使用して2番目のクエリをスキップすることに注意してください。

34
Daniel Rearden

react apollo hooks を使用している場合は、同じアプローチが機能します。

2つのuseQueryフックを使用して、最初のクエリの結果を2番目のskipoptionに渡すことができます。

サンプルコード：

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
3
Damian Green