Zenn
🚏

【Vue】useQueryのenabledオプションを活用する

2023/04/28に公開
GraphQL
Nuxt
Vue.js
Apollo
tech

useQueryとは？

useQueryは、REST APIまたはGraphQL APIからデータを取得するために使用されます。

enabledオプション

ブール値で、trueに設定すると、コンポーネントがマウントされるとすぐにクエリを実行します。falseに設定すると、クエリは実行されません。デフォルト値はtrueです。

enabledオプションの活用例

例えば、あるページで、ユーザーが何らかのアクションを起こすまで、APIからのデータの取得を遅延したい場合を考えてみましょう。このような場合、useQueryのenabledオプションを使用することで、ページがロードされたときにクエリを実行せず、ユーザーがアクションを起こしたときにクエリを実行するように設定できます。

<template>
  <div>
    <button @click="loadData">Load Data</button>
    <div v-if="isLoading">Loading...</div>
    <div v-else>
      <ul>
        <li v-for="user in data" :key="user.id">{{ user.name }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
import { useQuery } from 'vue-query';

export default {
  setup() {
    const { data, isLoading, isFetching, refetch } = useQuery('users', async () => {
      const response = await fetch('https://jsonplaceholder.typicode.com/users');
      const data = await response.json();
      return data;
    }, {
      enabled: false, // クエリを無効にする
    });

    const loadData = () => {
      refetch(); // クエリを再実行
    };

    return {
      data,
      isLoading,
      isFetching,
      loadData,
    };
  },
};
</script>

上記の例では、最初にenabledオプションをfalseに設定して、ページのロード時にクエリを実行しないようにしています。代わりに、ユーザーが "Load Data" ボタンをクリックすると、refetchメソッドを呼び出して、クエリを実行します。isFetchingは、データをフェッチしているかどうかを示します。isLoadingは、データがロード中であるかどうかを示します。

このようにして、ページがロードされたときにクエリを実行せず、ユーザーが "Load Data" ボタンをクリックしたときにクエリを実行するように設定できます。

参考資料

https://v4.apollo.vuejs.org/api/use-query.html

Discussion