使用 vue 3 从前端处理查询中的图形参数不使用 axios 或 apollo

如何解决使用 vue 3 从前端处理查询中的图形参数不使用 axios 或 apollo

大家，提前感谢你们阅读我的文章。自从我开始这个小项目以来，我一直在寻找这个，我已经用 vue i18n 设置了我的前端，并且选择了语言切换器，一切正常，现在我想根据用户的选择显示查询图，所以如果用户在应用下拉菜单中选择 de_DE 或 fr_FR，我的图表将获取参数 ($i18n.locale) 并以正确的语言获取内容。

我读了这个 this post，大约 2 年了，最后一个答案来自 mat_jack 这基本上是我想要做的，但是，我不确定如何操作或访问查询参数 locale 更改值 $locale，由于我是 graphql 的新手，我正在使用他们在他们拥有的唯一 vue 项目示例中提供的查询示例获取数据，所以我不使用 axios 或 apollo。而且我不知道我是否真的需要安装它来获取 $locale 以及这是否会影响我的项目。

这里是我用来做的例子：

<template> 
<div v-if="response">
 {{ response }}
</div>

</template>

<script>

//Here instead of de_DE I need to pass  $locale containing the value of $i18n.locale
const HOMEPAGE_QUERY = `
 {
 allArticles(locale: de_DE){  
   id
   articleTitle
   articleDate
   articleContent
   categoryName {
     categoryName
   }
   articleTags {
     articleTag
   }
 }
}
`;

export default {

 data(){
   return {
     
     response: null,}
 },async mounted() {
  try {
    this.response = await request({
      query: HOMEPAGE_QUERY,variables: {
        limit: 15,}
    });
  } catch (e) {
    this.error = e;
  }
  this.loading = false;
},}
</script>

位于帖子的链接中，但这里是指向区域设置 documentation provided by dato

部分的链接

提前感谢您的帮助