Best way to re-execute query

[stephanedemotte]

Hello, thanks for your great job :)

Small question, i want to re-excute a query when a variable change,

   const lang = _.capitalize(root.lang)

    const { data } = useQuery({
      query: `
      {
        pageBy(pageId: 30) {
          title
          slug
          acf_pages {
            metaDescription: meta${lang}Description
            metaTitle: meta${lang}Title,
            template: adminComponent
          }
        }
      }
      `,
    })

In this case lang change, what the best way to re-excute query ? watch lang and manually fetch the data ?

Thanks

[danrocha]

Not this?
https://logaretm.github.io/villus/guide/queries.html#watching-variables

[stephanedemotte]

I'm not using the "official" graphql variable.
It's juste string concatenation.
Sometime i want to call { query: '{ titi }' } and sometimes { query: '{ toto }' }

I've read your doc, but without success :)

Thanks !

[logaretm]

You could introduce the lang as a query variable, but I don't think that's viable. To me language change involves more than just fetching the data, your entire UI would probably change as well.

You could create a reactive query:

const query = computed(() => {
  if (something) {
    return `{ titi }`
  }

return `{ toto }`
});

const { data } = useQuery({
  query
});

and whenever the query will change the useQuery will automatically execute the query. Note that all the features are available in 1.x alpha releases which is only for Vue 3.x.