vue.js 使用Apollo和Nuxt.js获取useQuery的结果

7lrncoxx  于 2023-02-09  发布在  Vue.js
关注(0)|答案(1)|浏览(256)

我正在尝试使用useQuery函数(来自'@vue/apollo-composable'包)。
这个函数不返回一个承诺,只是引用resultloading等,所以我不能直接在我的商店(Pinia)使用这些数据。

目前我有这个代码:

fetchArticle: function (id: string) {
      // check if article is already in cache
      const cache = this.articles.find(a => a.id == id);
      if (cache && !cache.partial) return cache;
      // fetch article from server
      const { result: article } = useQuery<{ article: Article }>(GET_ARTICLE, { id });
      // update state, but... when `article` contains data? 
    },

当我在商店里时,我不知道如何等待请求结束。
我尝试转换useQuery以返回promise,但不起作用,Nuxt.js在服务器上冻结,代码如下:

fetchArticle: async function (id: string) {
      // check if article is already in cache
      const cache = this.articles.find(a => a.id == id);
      if (cache && !cache.partial) return cache;
      // fetch article from server
      const { onResult, result } = useQuery<{ article: Article }>(GET_ARTICLE, { id });
      const article = result.value?.article || (await new Promise(r => onResult(({ data }) => r(data.article))));
      if (!article) return;
      const data = { ...article, partial: false };
      this.articles = this.articles.map(a => (a.id == id ? data : a)) as Article[];
      // return article
      return article;
    },

信息

  • 店铺:Pinia
  • 版本:Nuxt 3.1.2;@vue/apollo-可组成4.0.0-β 2
5fjcxozz

5fjcxozz1#

我使用apollo客户端的方式如下:

// The creation of the client
// This part is on a base class, that all of my Service extends
this.apolloClient = new ApolloClient({
  link: //the link,
  cache: new InMemoryCache(),
  name: "My APP name",
  version: `v${version.toString()}`,
  defaultOptions: defaultOptions //some options I customize
});
provideApolloClient(this.apolloClient);

//The query
// This part is on the Service class
return this.apolloClient.query({ query: query, variables: { id: id }}).then((result) => {
  return result.data.myData;
});

我总是这样使用,从来没有使用过useQuery。在链接中,我使用了三个的组合,一个用于验证,一个用于错误,一个用于基本URL

相关问题