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);
};