0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

vue-query hooks can only be used inside setup() function or functions that support injection context.

Posted at

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?