【Vue/Apollo】useResultとは？

useResultとは？

vue-apolloのuseResultは、Apollo Clientを使用したGraphQLのクエリを実行し、その結果を受け取るためのVue.js向けのフックです。useResultは、useQueryやuseSubscriptionなどのフックと組み合わせて使用されます。

使い方/挙動

useResultは、以下のように使用します。

import { useQuery } from '@vue/apollo-composable'

const { result } = useQuery(GET_TODOS)

const { data, loading, error } = useResult(result, null, { loadingKey: 'loading' })

useResult は、以下の3つの引数を受け取ります。

• result: useQueryやuseSubscriptionなどのフックから返されるresultオブジェクト。
• dataKey: クエリの結果から取得したいデータのキー。省略可能です。
• options: オプションオブジェクト。以下の様なプロパティをサポートしています。
  • loadingKey: loading ステートが更新される際に使用されるキー。デフォルトは 'loading' です。

useResultは、指定されたresultオブジェクトに含まれるdataKeyにアクセスして、そのデータを返します。resultオブジェクトにエラーが含まれている場合には、errorステートが更新されます。また、クエリが実行中である場合には、loadingステートが更新されます。

コード例

例えば、以下のようなクエリがあったとします。

query {
  todos {
    id
    title
    description
  }
}

この場合、 useResult(result, 'todos')を使用することで、クエリから取得したtodosデータにアクセスできます。

const { data, loading, error } = useResult(result, 'todos')

dataステートには、以下のようなデータが含まれます。

{
  todos: [
    { id: 1, title: 'Task 1', description: 'Description 1' },
    { id: 2, title: 'Task 2', description: 'Description 2' },
    { id: 3, title: 'Task 3', description: 'Description 3' }
  ]
}

loadingステートには、クエリが実行中であるかどうかが含まれます。errorステートには、クエリの実行中に発生したエラーが含まれます。