[AFTER PATCH] Did you forget to call `useClient`?

Versions with Issue : Rc0 + Rc1

Issue happens when getReport() is called on change of a date. When getReport() is called during page load /setup it works fine.

Logic of program is when date input is changed, send useQuery to fetch data using the selected date.

App.VUE

<script lang="ts">
import { SubscriptionClient } from "subscriptions-transport-ws";
import { defineComponent, computed } from "vue";
import DesktopMenu from "./components/DesktopMenu.vue";
import { router } from "./main";
import { useClient } from "villus";

import { ActionTypes, MutationTypes, useStore } from "./store";

export default defineComponent({
  name: "Navigation",
  components: {
    DesktopMenu,
  },
  setup() {
    const store = useStore();

    useClient({
      url: "/graphql",
    });

  },
});
</script>

Home.VUE

<template>
  <div>
    Home
    <input v-model="datePage" type="date" />
    <p v-if="returnData">
      {{ returnData }}
    </p>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, computed, watchEffect } from "vue";
import { useQuery } from "villus";

import { CostDocument } from "../generated/graphql-operations";

export default defineComponent({
  name: "HelloWorld",
  setup() {
    const returnData = ref();
    const datePage = ref("2020-10-18");
    const formattedDate = computed(() =>
      datePage.value.toString().split("-").join(""),
    );

    const data = ref(null);
    watchEffect(async (datePage) => {
      async function getReport() {
        try {
          console.log("date value changed:", formattedDate);

          const { data, error } = await useQuery({
            query: CostDocument,
            variables: { date: formattedDate.value },
          });

          console.log("Query:", data, error);
          returnData.value = data;
        } catch (error) {
          console.log("error", error);
        }
      }
      data.value = await getReport();
    });

    return { returnData, datePage };
  },
});
</script>

[kingkong404]

Fixed with reactive. No more help needed.

Thanks again or all your hard work on Villus!

[logaretm]

Couldn’t you disable fetchOnMount and just execute whenever you need to?

const { execute } = await useQuery({
  query: CostDocument,
  variables: { date: formattedDate.value },
  fetchOnMount: false, 👈
});

async function getReport() {
  try {
    console.log('date value changed:', formattedDate);
    const { data, error } = await execute(); // 👈
    console.log('Query:', data, error);
    returnData.value = data;
  } catch (error) {
    console.log('error', error);
  }
}