Vue Apollo-composableでqueryをシーケンシャルに実行する方法メモ

#1番目のqueryのレスポンスを2番目のqueryのvariablesに渡したかった
##単なる知っているか知らないかだけの問題で、良く読むと公式にも書かれていました。

ポイントは一つだけでuseQueryに渡せるオプションの中に
enabledというプロパティが存在していました。
このプロパティはデフォルトではtrueで、そのままだと即時リクエスト発行の挙動となりますが
falseに指定してやる事で、trueに変更するまでリクエストを発行しなくなります。
この仕組みを利用して、シーケンシャルにQueryを発行できるというわけです。

以下の例は1つ目のqueryで文字列uuidを受け取り
その値を2つ目のqueryのvariablesに条件として指定した場合の例示です。

おまけの情報としてuseQueryのレスポンスに含まれるloadingの値を利用した方が良いのではないか？
という意見もあるかと思いますが、
私自身当初はそれを試みたのですが、loadingはその名前が示す通り
現在読み込み中かという意味合いで、読み込みを開始する前はfalseとなっており
今回のような用途には利用できませんでした。

自分自身enabledの存在に気がつけず、少しハマったので備忘として記録を残します。

import * as VueApolloComposable from '@vue/apollo-composable'
import * as VueCompositionApi from '@vue/composition-api'
import { FirstQueryDocument, SecondQueryDocument, ThirdQueryDocument } from './graphql/queries.graphql'

const useFirstQueryResponse = () => {
  const isLoaded = ref<boolean>(false)
  const uuid = ref<string>('')
  const { onResult } = VueApolloComposable.useQuery(FirstQueryDocument)

  onResult((result) => {
    isLoaded.value = true,
    uuid = result?.data?.firstQueryResponse?.uuid
  }

  return {
    isLoaded,
    uuid,
  }
}
const useSecondQueryResponse = (
  firstQueryLoaded: Ref<boolean>,
  uuid: Ref<string>,
) => {
  const secondQueryResponse = ref<SecondQueryResponse>([])
  const isLoaded = ref<boolean>(false)

  const conditions = {
    page: ref(1), // 改ページ処理などのページ数の例
    uuid, // 最初のQueryで受け取ったレスポンスの値を2つ目のQueryの条件として渡す
  }

  const variables = computed(() => ({
    per: 20,// 1ページあたりに何件表示するかのパラメータの想定
    page: conditions.page.value,
    uuid: conditions.uuid.value,
  }))

  const options = computed(() => ({enabled: firstQueryLoaded.value }))
  const { onResult } = VueApolloComposable.useQuery(SecondQueryDocument, variables, options)
  onResult((result) => {
    secondQueryResponse.value = result?.data?.secondQueryResponse
    isLoaded.value = true
  })

  return {
    secondQueryResponse,
    isLoaded,
  }
}

const useThirdQueryResponse = (secondQueryLoaded: Ref<boolean>,) => {
  const thridQueryResponse = ref<thridQueryResponse>([])
  const variables = {}
  const options = computed(() => ({enabled: secondQueryLoaded.value }))
  const { onResult } = VueApolloComposable.useQuery(ThirdQueryDocument, variables, options) 
  onResult((result) => {
    thirdQueryResponse.value = result?.data?.thirdQueryResponse
  })

  return {
    thirdQueryResponse.value = result?.data?.thirdQueryResponse
  }
}

export default defineComponent({
  name: `SequentialQueryComp`
  setup(){
    const firstQueryResponse = useFirstQueryResponse()
    const secondQueryResponse = useSecondQueryResponse(
      firstQueryResponse.isLoaded,
      firstQueryResponse.uuid,
    )
    const thirdQueryResponse = useThirdQueryResponse(secondQueryResponse.isLoaded)
  }
})

// 以下FirstQueryDocumentの参考例
import gql from 'graphql-tag'

export const FirstQueryDocument = gql`
  query firstQuery {
    firstQueryResponse {
      uuid
    }
  }
`