[AFTER PATCH] Did you forget to call useClient?

[kingkong404]

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]

I tried rolling Vue back to 3.0.1 and still seems to be an issue, so could be something i'm doing wrong.

[logaretm]

You can't use useQuery or any composition API function outside the setup function. You are doing so in watchEffect, which I don't think is a good idea.

[kingkong404]

@logaretm Are you able to offer any advice as to how would I then go about calling useQuery at a later date. I tried several versions of this code over a couple of hours yesterday and couldn't get anything to work.

I originally used an async function with @change

<template>
  <div>
    Home
    <input v-model="datePage" @change="getReport" 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);

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

    getReport();

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

[kingkong404]

Found this in DOCs seems to be relevant. Will try this.

import { computed, ref } from 'vue';
import { useQuery } from 'villus';

// computed id that will be used to compute the query
const id = ref(1);

// Create a computed query
const FetchTodo = computed(() => {
return query FetchTodo { todo (id: ${id.value}) { text } } ;
});

const { data } = useQuery({
query: FetchTodo,
});

// later on, changing the id ref will automatically refetch the query because it is computed
id.value = 2;

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

[kingkong404]

@logaretm Thanks a lot. That really helped.

[kingkong404]

@logaretm In the example below when dateCurrent.value changes it does not update the Query variables and the same original request using 2020-10-19 is sent. Is this a bug or do I need to compute the query field to get it to regenerate variable as well.

import { defineComponent, ref, computed, watchEffect } from "vue";
import { useQuery } from "villus";

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

export default defineComponent({
  name: "HelloWorld",
  setup() {
    // computed id that will be used to compute the query
    const datePage = ref("2020-10-19");
    const dateCurrent = computed(() =>
      datePage.value.toString().split("-").join(""),
    );
    const { execute } = useQuery({
      query: CostDocument,
      variables: { date: dateCurrent.value },
      fetchOnMount: false,
    });

    async function getReport() {
      console.log(
        "date value changed:",
        datePage.value.toString().split("-").join(""),
      );
      const { data, error } = await execute();
      console.log("Data Returned ", data);
    }

    return { datePage, getReport };
  },
});

[kingkong404]

Simpler example

<template>
  <div>
    Home
    <input v-model="datePage" type="date" />
    <p v-if="data">
      {{ data }}
    </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 datePage = ref("2020-10-13");

    const dateCurrent = computed(() =>
      datePage.value.toString().split("-").join(""),
    );

    const { data } = useQuery({
      query: CostDocument,
      variables: { date: dateCurrent.value },
      fetchOnMount: true,
    });

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

[kingkong404]

Fixed with reactive. No more help needed.

Thanks again or all your hard work on Villus!