⚗️ Vue Query Nuxt

🚀 Vue Query Nuxtへようこそ！

このNuxtモジュールは、NuxtアプリケーションにVue Queryを自動的にインストールして設定します。設定不要ですぐに使用でき、非常に軽量です。

機能

設定不要ですぐに使用可能
すべての設定オプションが利用可能
Vue Queryコンポーザブルの自動インポート

Vue Queryの詳細については、Vue Queryドキュメントを参照してください。

📦 使い方

1. npm、pnpm、またはyarnを使用して依存関係をインストールします。

# npm
npm i @hebilicious/vue-query-nuxt @tanstack/vue-query  
# pnpm
pnpm i @hebilicious/vue-query-nuxt @tanstack/vue-query  
# yarn
yarn add @hebilicious/vue-query-nuxt @tanstack/vue-query

2. Nuxtモジュールにモジュールを追加します

nuxt.config.ts にて

export default defineNuxtConfig({
  modules: ["@hebilicious/vue-query-nuxt"]
})

3. すぐに使用できます

vueコンポーネントにて

<script setup lang="ts">
// Access QueryClient instance
const queryClient = useQueryClient()

// Query
const { isLoading, isError, data, error } = useQuery({
  queryKey: ['todos'],
  queryFn: () => $fetch("/api/todos"), // Use $fetch with your api routes to get typesafety 
})

// Mutation
const { mutate } = useMutation({
  mutationFn: (newTodo) => $fetch("/api/todos", { method: "POST", body: newTodo })
  onSuccess: () => {
    // Invalidate and refetch
    queryClient.invalidateQueries({ queryKey: ['todos'] })
  },
})

function onButtonClick() {
   mutate({
    id: Date.now(),
    title: 'Do Laundry',
  })
}
</script>

<template>
  <span v-if="isLoading">Loading...</span>
  <span v-else-if="isError">Error: {{ error.message }}</span>
  <!-- We can assume by this point that `isSuccess === true` -->
  <ul v-else>
    <li v-for="todo in data" :key="todo.id">{{ todo.title }}</li>
  </ul>
  <button @click="onButtonClick">Add Todo</button>
</template>

4. 詳細設定

nuxt.config.tsファイルのvueQueryキーの下にオプションを指定できます。すべて型指定されています。

nuxt.config.ts にて

export default defineNuxtConfig({
  modules: ["@hebilicious/vue-query-nuxt"],
  vueQuery: {
    // useState key used by nuxt for the vue query state.
    stateKey: "vue-query-nuxt", // default
    // If you only want to import some functions, specify them here.
    // You can pass false or an empty array to disable this feature.
    // default: ["useQuery", "useQueries", "useInfiniteQuery", "useMutation", "useIsFetching", "useIsMutating", "useQueryClient"]
    autoImports: ["useQuery"],
    // Pass the vue query client options here ...
    queryClientOptions: {
      defaultOptions: { queries: { staleTime: 5000 } } // default
    },
    // Pass the vue query plugin options here ....
    vueQueryPluginOptions: {}
  }
})

vue queryをインストールするプラグインを変更する必要がある場合は、プロジェクトのルートにvue-query.config.tsファイルを作成します。

vue-query.config.ts にて

import { library } from "@example/libray"

export default defineVueQueryPluginHook(({ queryClient, nuxt }) => {
  console.log(queryClient, nuxt) // You can access the queryClient here
  return {
    pluginReturn: { provide: { library, test: console } }, // nuxt plugin return value
    vueQueryPluginOptions: { queryClient } // You can pass dynamic options
  }
})

このフックは、モジュールによってインストールされたnuxtプラグイン内で実行されるため、何かをprovideしたり、vue queryオプションを置き換えたりするために使用できます。これは、queryClientがインストールされているときにカスタムロジックを実行する必要がある場合に役立ちます。

📦 貢献

コントリビューション、Issue、機能リクエストは大歓迎です！

このリポジトリをフォークする
node と pnpm をインストールする *corepack enable && corepack prepare pnpm@latest --activate を使用すると、pnpmを簡単にインストールできます*
モノレポのルートでpnpm iを使用します。
変更を加え、Conventional Commitsに従ってください。
プルリクエストを開く 🚀🚀🚀