T
TanStack•3y ago
rare-sapphire

vue-query hooks can only be used inside setup() function

I have been using solid-query to get effect. Have a project in Vue and wanted to add the Vue version. Started with foo.vue 
<script setup>
import { useMutation, useQuery, useQueryClient } from "@tanstack/vue-query";

// Access QueryClient instance
const queryClient = useQueryClient();

// Query
const { isLoading, isError, data, error } = useQuery(["todos"], async () => {
  return [{ label: "A" }, { label: "B" }, { label: "C" }];
});

// Mutation
const mutation = useMutation(
  async (args) => {
    console.log("mutation");
  },
  {
    onSuccess: () => {
      // Invalidate and refetch
      queryClient.invalidateQueries(["todos"]);
    },
  }
);

function onButtonClick() {
  mutation.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>
<script setup>
import { useMutation, useQuery, useQueryClient } from "@tanstack/vue-query";

// Access QueryClient instance
const queryClient = useQueryClient();

// Query
const { isLoading, isError, data, error } = useQuery(["todos"], async () => {
  return [{ label: "A" }, { label: "B" }, { label: "C" }];
});

// Mutation
const mutation = useMutation(
  async (args) => {
    console.log("mutation");
  },
  {
    onSuccess: () => {
      // Invalidate and refetch
      queryClient.invalidateQueries(["todos"]);
    },
  }
);

function onButtonClick() {
  mutation.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>
and in main.ts 
import { VueQueryPlugin } from "@tanstack/vue-query";
...
app.use(VueQueryPlugin);
import { VueQueryPlugin } from "@tanstack/vue-query";
...
app.use(VueQueryPlugin);
But getting vue-query hooks can only be used inside setup() function... I don't know how to proceed
5 Replies
plain-purple
plain-purple•3y ago
Looks ok at first glance. Could you bring that down to a minimal reproduction repo? What Vue version are you using?
rare-sapphire
rare-sapphireOP•3y ago
"vue": "^3.2.41", "@tanstack/vue-query": "^4.12.0", i removed the mutation, but this is directly for the example at https://tanstack.com/query/v4/docs/adapters/vue-query
Vue Query | TanStack Query Docs
The vue-query package offers a 1st-class API for using TanStack Query via Vue. However, all of the primitives you receive from these hooks are core APIs that are shared across all of the TanStack Adapters including the Query Client, query results, query subscriptions, etc. Example
rare-sapphire
rare-sapphireOP•3y ago
i would like to flip it, is there a codesandbox that show the vue-query example working?
plain-purple
plain-purple•3y ago
Yes you have an example here: https://codesandbox.io/s/github/tanstack/query/tree/main/examples/vue/basic which comes from here: https://github.com/TanStack/query/tree/main/examples/vue/basic I have added the code you have mentioned and it's working fine
rare-sapphire
rare-sapphireOP•3y ago
thank @MrMentor

Did you find this page helpful?