问题

我试图使用`useQuery`函数（来自`'@vue/apollo-composable'`包）。

这个函数不返回一个Promise，只是`result`、`loading`等的引用，所以我不能直接在我的store（Pinia）中使用这些数据。

__目前我有这段代码：__

```js
fetchArticle: function (id: string) {
      // 检查文章是否已经在缓存中
      const cache = this.articles.find(a => a.id == id);
      if (cache && !cache.partial) return cache;
      // 从服务器获取文章
      const { result: article } = useQuery<{ article: Article }>(GET_ARTICLE, { id });
      // 更新状态，但是...当`article`包含数据时？
    },

当我在store中时，我不知道如何等待请求结束。

我尝试将useQuery转换为返回Promise，但是这样做不起作用，在服务器上使用这段代码时，Nuxt.js会冻结：

fetchArticle: async function (id: string) {
      // 检查文章是否已经在缓存中
      const cache = this.articles.find(a => a.id == id);
      if (cache && !cache.partial) return cache;
      // 从服务器获取文章
      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;
    },

信息

• Store: Pinia
• 版本: Nuxt 3.1.2; @vue/apollo-composable 4.0.0-beta.2

<details>
<summary>英文:</summary>

I&#39;m trying to use the `useQuery` function (from package `&#39;@vue/apollo-composable&#39;`).

This function doesn&#39;t return a promise, just refs to `result`, `loading` etc. so I can&#39;t directly use this data in my store (Pinia).

__Currently I have this code:__

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

When I'am in a store I don't know how to wait for request end.

I tried to transform useQuery to return promise but that doesn't work, Nuxt.js freeze on server with this code:

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;
    },

Informations

• Store: Pinia
• Versions: Nuxt 3.1.2; @vue/apollo-composable 4.0.0-beta.2

答案1

得分: 0

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

// 客户端的创建
// 这部分在一个基类上，我所有的Service都继承自这个基类
this.apolloClient = new ApolloClient({
  link: //链接,
  cache: new InMemoryCache(),
  name: "我的应用名称",
  version: `v${version.toString()}`,
  defaultOptions: defaultOptions //我自定义的一些选项
});
provideApolloClient(this.apolloClient);

// 查询操作
// 这部分在Service类中
return this.apolloClient.query({ query: query, variables: { id: id }}).then((result) => {
  return result.data.myData;
});

我一直都是这样使用的，从来没有使用过 useQuery。在链接部分，我使用了三个组合，一个用于身份验证，一个用于处理错误，还有一个用于基本URL。

// 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;
});