Vue.js で tanstack query を扱う際、*vue
ファイルではなく、*.ts
ファイルに処理を切り出したいときがある。
単なるグローバル変数+リアクティブで便利に使いたい。
その場合例えば"message"というクエリキャッシュに同期的に文字列を埋め込む時、*.ts
に処理を切り出したい。
message.ts
import { useQueryClient } from '@tanstack/vue-query';
export const setMessage = (message: string): void => {
const queryClient = useQueryClient();
queryClient.setQueryData(['message'], message);
};
として、これを使おうと思ってもうまくいかない。
vue-query hooks can only be used inside setup() function or functions that support injection context.
というエラーが出ると思う。useQueryClient()
は <script setup lang="ts">
内でやれと。
これをエラーなく実現するには
https://tanstack.com/query/v5/docs/framework/vue/guides/custom-client
参照のこと。このドキュメントを探すのに骨が折れた。
以下サンプル
main.ts
import { VueQueryPluginOptions, QueryClient } from ‘@tanstack/vue-query’;
export const queryClient = new QueryClient();
export const vueQueryPluginOptions: VueQueryPluginOptions = {
queryClient,
queryClientConfig: {
// オプション色々
},
};
app.use(VueQueryPlugin, vueQueryPluginOptions);
message.ts
import { queryClient } from '@/main';
export const setMessage = (message: string): void => {
queryClient.setQueryData(['message'], message);
};