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

huangapple go评论92阅读模式
英文:

Get result of useQuery with Apollo and Nuxt.js

问题

  1. 我试图使用`useQuery`函数来自`'@vue/apollo-composable'`)。
  2. 这个函数不返回一个Promise只是`result``loading`等的引用所以我不能直接在我的storePinia中使用这些数据
  3. __目前我有这段代码__
  4. ```js
  5. fetchArticle: function (id: string) {
  6. // 检查文章是否已经在缓存中
  7. const cache = this.articles.find(a => a.id == id);
  8. if (cache && !cache.partial) return cache;
  9. // 从服务器获取文章
  10. const { result: article } = useQuery<{ article: Article }>(GET_ARTICLE, { id });
  11. // 更新状态,但是...当`article`包含数据时?
  12. },

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

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

  1. fetchArticle: async function (id: string) {
  2. // 检查文章是否已经在缓存中
  3. const cache = this.articles.find(a => a.id == id);
  4. if (cache && !cache.partial) return cache;
  5. // 从服务器获取文章
  6. const { onResult, result } = useQuery<{ article: Article }>(GET_ARTICLE, { id });
  7. const article = result.value?.article || (await new Promise(r => onResult(({ data }) => r(data.article))));
  8. if (!article) return;
  9. const data = { ...article, partial: false };
  10. this.articles = this.articles.map(a => (a.id == id ? data : a)) as Article[];
  11. // 返回文章
  12. return article;
  13. },

信息

  • Store: Pinia
  • 版本: Nuxt 3.1.2; @vue/apollo-composable 4.0.0-beta.2
  1. <details>
  2. <summary>英文:</summary>
  3. I&#39;m trying to use the `useQuery` function (from package `&#39;@vue/apollo-composable&#39;`).
  4. 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).
  5. __Currently I have this code:__
  6. ```js
  7. fetchArticle: function (id: string) {
  8. // check if article is already in cache
  9. const cache = this.articles.find(a =&gt; a.id == id);
  10. if (cache &amp;&amp; !cache.partial) return cache;
  11. // fetch article from server
  12. const { result: article } = useQuery&lt;{ article: Article }&gt;(GET_ARTICLE, { id });
  13. // update state, but... when `article` contains data?
  14. },

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:

  1. fetchArticle: async function (id: string) {
  2. // check if article is already in cache
  3. const cache = this.articles.find(a =&gt; a.id == id);
  4. if (cache &amp;&amp; !cache.partial) return cache;
  5. // fetch article from server
  6. const { onResult, result } = useQuery&lt;{ article: Article }&gt;(GET_ARTICLE, { id });
  7. const article = result.value?.article || (await new Promise(r =&gt; onResult(({ data }) =&gt; r(data.article))));
  8. if (!article) return;
  9. const data = { ...article, partial: false };
  10. this.articles = this.articles.map(a =&gt; (a.id == id ? data : a)) as Article[];
  11. // return article
  12. return article;
  13. },

Informations

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

答案1

得分: 0

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

  1. // 客户端的创建
  2. // 这部分在一个基类上,我所有的Service都继承自这个基类
  3. this.apolloClient = new ApolloClient({
  4. link: //链接,
  5. cache: new InMemoryCache(),
  6. name: "我的应用名称",
  7. version: `v${version.toString()}`,
  8. defaultOptions: defaultOptions //我自定义的一些选项
  9. });
  10. provideApolloClient(this.apolloClient);
  11. // 查询操作
  12. // 这部分在Service类中
  13. return this.apolloClient.query({ query: query, variables: { id: id }}).then((result) => {
  14. return result.data.myData;
  15. });

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

英文:

I use the apollo client like this:

  1. // The creation of the client
  2. // This part is on a base class, that all of my Service extends
  3. this.apolloClient = new ApolloClient({
  4. link: //the link,
  5. cache: new InMemoryCache(),
  6. name: &quot;My APP name&quot;,
  7. version: `v${version.toString()}`,
  8. defaultOptions: defaultOptions //some options I customize
  9. });
  10. provideApolloClient(this.apolloClient);
  11. //The query
  12. // This part is on the Service class
  13. return this.apolloClient.query({ query: query, variables: { id: id }}).then((result) =&gt; {
  14. return result.data.myData;
  15. });

I always used like this, never used the useQuery. In the link I use a combination of three, one for the Auth, one for Errors and one for the base URL

huangapple
  • 本文由 发表于 2023年2月7日 02:41:25
  • 转载请务必保留本文链接:https://go.coder-hub.com/75365358.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定