我正在尝试使用useQuery
函数(来自'@vue/apollo-composable'
包)。
这个函数不返回一个承诺,只是引用result
,loading
等,所以我不能直接在我的商店(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
1条答案
按热度按时间5fjcxozz1#
我使用apollo客户端的方式如下:
我总是这样使用,从来没有使用过useQuery。在链接中,我使用了三个的组合,一个用于验证,一个用于错误,一个用于基本URL