How to use variable to re-fetch the querie again?

user_16422567 0
Viewed 28

I'm new at Vue and Graphql and I'm trying to understand how to re-fetch the queries after typing a new value in the input.

I'm trying through props, to change the value of the variable responsible("searchQuerie") for the queries.

But I'm not understanding how to change the value through the input field.

Can someone help me?

<template>
  <div class="app">
    <input type="text" :value="id" @input="changeMessage" />
    <div v-if="loading">Loading...</div>

    <div v-else-if="error">Error: {{ error.message }}</div>

    <ul v-else-if="result && result.popularTitles">
      <li v-for="(item, index) in result.popularTitles" :key="index">
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import gql from "graphql-tag";
import { useQuery } from "@vue/apollo-composable";

export default defineComponent({
  name: "App",
  props: ["id"],

  setup(props) {

    const { result, loading, error, refetch } = useQuery(
      gql`
        query GetSuggestedTitles(
          $country: Country!
          $language: Language!
          $first: Int!
          $filter: TitleFilter
        ) {
          popularTitles(country: $country, first: $first, filter: $filter) {
            edges {
              node {
                ...SuggestedTitle
                __typename
              }
              __typename
            }
            __typename
          }
        }

        fragment SuggestedTitle on MovieOrShow {
          id
          objectType
          objectId
          content(country: $country, language: $language) {
            fullPath
            title
            originalReleaseYear
            posterUrl
            fullPath
            __typename
          }
          __typename
        }
      `,
      () => ({
        country: "DE" as string,
        language: "de" as string,
        first: 4 as number,
        filter: { searchQuery: props.id },
      })
    );
    
    console.log(result);

    return {
      result,
      loading,
      error,
      refetch,
    };
  },
  methods: {
    changeMessage(event: any) {
      this.result = event.target.value;
      this.$emit("messageChanged", this.result);
    },
  },
});
</script>
apollo graphql vuejs3 typescript
1 Answers

You are already destructuring the result and also returning refetch, which according to the docs, you can simply call as a method when needed.

Edit: if you need to change the term and fetch again with a different input, you could wrap your code that fetches data in a function, let's call it something like fetchData() that returns result, error and more if needed.
In your setup() function, after declaring fetchData(), call it so the data get's fetched on page load.
When the user digits something, handle the input and simply call fetchData() again.

I'm trying on a local project, and this works for me:

<template>
  <div>
    <input v-model="maxResults" type="text" placeholder="number of results" @change="fetchData()">
    <pre>{{ output }}</pre>
  </div>
</template>

<script setup>
  const maxResults = ref(2); // example dynamic value: max 2 results by default
  const output = ref([]);

  const fetchData = () => {
    const { result, error } = useQuery(gql`
      query GetSuggestedTitles {
        ... (limit: ${maxResults.value}) {
          ...
        }
      }`
    );

    if (error.value !== null) {
      console.error("error fetching data:", error.value);
    } else {
      output.value = result.value;
    }
  };

  fetchData(); // here you call it on page load
</script>
user_87838180
Related