TanStackT
TanStack•4y ago•
9 replies
dead-brown

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

Hi, I am working on a project in which some data of a user is intended to be fetched after a specific button is clicked. I defined an arrow function in composition API and it looks like the following:
<script setup lang="ts">
const fetchUserRelatedProgram = (uid: number) => {
  return useQuery(["reviewerProgram", uid], async () => {
    try {
      return await api.getReviewerPrograms(uid);
    } catch (e: any) {
      if (e instanceof InvalidSessionError) {
        console.error(
          "Session has already expired while querying reviewerProgram"
        );
        router.push("/");
        return;
      }
    }
  });
};
</script>

I wrap 
useQuery
 inside the arrow function to pass variables , and the function is to be triggered by button via v-on. However, clicking the button only leads to the error message: Uncaught Error: vue-query hooks can only be used inside setup() function. So my questions are:
1. Is it prohibited to call 
useQuery
 in functions that are not immediately executed in Vue setup function?
2. Is there other workaround to pass variable into 
useQuery
?
Was this page helpful?