问题标签 [urql]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
78 浏览

reactjs - 如何在 URQL 中确定数据是从缓存还是服务器返回

例如,我有:

和:

我按顺序和同步地执行这些请求。我的问题是,URQL 会从缓存中获取帖子的作者实体吗?如果是,如何确定?控制台或 devtools 上是否有任何日志显示:“这部分我从缓存中获得”?

PS我正在使用图形缓存

0 投票
0 回答
4 浏览

reactjs - 来自 urllib 的 Usequery 仅查询一次

我对反应的了解相当有限。我有一个CatListQuery已设置的查询,以便它支持分页。我已经设置了 useQuery 以便它查询

我可以看到它返回一个查询,hasNextPage = true但它不会再次查询。有什么想法可能导致问题吗?

0 投票
1 回答
171 浏览

reactjs - Urql useQuery - 如何清除查询/变量更改的数据?

如何配置钩子,使其在从网络或缓存中获取新数据时不会返回上一个查询中的数据?
类似参数的东西keepPreviousData: false

如果您动态更改钩子的变量或查询,useQuery()则在获取新数据时,结果仍将包含以前的数据。虽然它对于无限滚动模式非常有用,但对于像搜索界面那样动态变化的查询来说它就不太有用了。在这样的界面中,用户不希望看到不再符合他的搜索查询的弃用结果。

样品:

PS:如果它不存在,我也会奖励为此类功能进行 PR 的人。

0 投票
1 回答
150 浏览

typescript - 如何使用 Graphql Codegen 设置类型

我有一个使用 Urql 查询 Hasura graphql 端点的 Vue 3 组件。我已经设法使相当简单的查询工作,现在正试图使组件类型安全。

我正在使用 graphql Codegen 来构建类型,它正在生成一个 Types 文件,但是在生成的文件中抛出了错误。

我对 Typescript 有点陌生,所以希望有人能够纠正我。我很想解决生成的 Types 文件中报告的问题。

我提供了以下内容:

  1. 工作 ListTodos.vue 组件的副本。
  2. 生成的类型文件 (graphql.d.ts) 的缩写副本。错误发生在第 975 - 989 行,因此我提供了文件的简短版本,仅包含相关行。
  3. 报告的错误副本
  4. 我的 codegen.js 配置文件的副本。

任何建议表示赞赏。

1.ListTodos.vue

2. Generated Types(略)显示错误下划线 2. Generated Types 显示错误下划线

3. 错误

在此处输入图像描述

4.codegen.js配置文件

0 投票
0 回答
17 浏览

graphql - 在其他片段中使用片段使对象为空;查询中的同一个片段没有,为什么?

如果我使用下面的代码它不起作用:第二个查询 ( team()) 使播放器null处于缓存中。

下面的代码解决了这个问题(这是我在代码库中所做的唯一更改):

我的问题是:为什么它适用于查询而不是片段?

0 投票
1 回答
77 浏览

typescript - Vite 热加载显示不一致的结果。为什么

我有一个使用“脚本设置”的 Vite + Typescript + Vue 3 SPA。该应用程序使用 Urql 来查询 GrapgQL 端点。

我有一种情况,查询工作并仅在带有组件的组件被热加载后才显示

事件顺序:

  1. 在我的浏览器中使用 http://localhost:4000 加载应用程序。页面加载正常,但查询中的数据是“未定义的”。加载指示器暂时显示,但 result.data.value 未定义
  2. 重新加载页面 - 没有变化,加载指示器暂时显示,但 result.data.value 未定义
  3. 在 VS Code 中保存组件 (Ctrl + s) - 结果与 1 和 2 相同。
  4. 对组件代码做一个无关紧要的小改动,然后保存。(我换个评论)组件是根据控制台热加载的,加载指示器没有显示,但这次 result.data.value 有预期的两个元素,页面显示它们。
  5. 重新加载页面 - 再次加载页面,但查询结果未定义。

代码可见github:这里

/src/components/TodoPrivateList.vue 是返回数据的地方(第 29 行)。在第 71 行,它使用子组件 TodoItem.vue 来渲染每个 Todo。

我现在可以看到,使用 Vue DevTools 始终会检索数据,但不会渲染 Todos。只有当我强制对 TodoPrivateList.vue 进行热加载(通过更新其评论之一)时,才会呈现 Todos。

所以我现在同意@wittgenstein 的观点,这似乎是一个反应性问题。但我还不确定该怎么做。

提前致谢

0 投票
1 回答
26 浏览

svelte - 从 URQL Svelte 存储中获取嵌套数据 - 无法读取属性

使用 URQL 从 GraphCMS 中获取一个帖子 - URQL 创建一个如下所示的商店:

我想隔离 post 变量之后的部分。

当我尝试通过以下方式访问它时: $post.data 一切正常,但我仍然在输出中得到了“post”变量。
在我使用 $post.data.post 的那一刻,我得到了 500 错误 - 无法读取未定义的属性“帖子”

如何访问这个嵌套值?

0 投票
0 回答
44 浏览

jestjs - 在设置 Jest/Babel 时我应该如何处理 graphql 文件?

我正在为我工​​作的 Web 应用程序的反应端设置 Jest 和 Enzyme 测试。我遇到了 graphql 文件的问题,当我尝试运行测试时收到此错误

我们使用... react, graphql + urql, babel, webpack

GraphQLError: Syntax Error: Unexpected Name "export" 我相当确定这是我的 graphql 文件的第一行,看起来像这样......

我不确定问题是什么,因为我目前已经遵循了大约 100 条指南。我什至不在乎这些是否加载,它们在后端进行了测试,所以就我而言,我可以忽略 graphql 文件,但我似乎也不能这样做。

我在我的 webpack 配置文件中使用 babel-loader 和 graphql-tag/loader。

这是我的 package.json 中的 babel 配置...

0 投票
0 回答
25 浏览

graphql - NextJS unable to map array of products from graphql query after page reload

Im using URQL as my graphql client. I am trying to pass a variable called handle and map through an array of products from my shopify storefront. It works the first time but after I reload the page, I get cannot read property of "products" undefined error.

//[handle].js

0 投票
1 回答
98 浏览

javascript - 如何使用 es6 解构语法减少代码?

我将urqlSvelte一起使用,我很高兴。

我想改进一件事,但我不知道如何改进。

很多时候我有这样的代码:

$entertainmentPlayer.data.entertainmentPlayer我在我的代码中使用了很多很多次。

有没有办法减少这种情况?

我尝试了这段代码:

但正如您从代码中看到的那样,我现在不知道如何调用query(entertainmentPlayer)

如果我使用下面的代码,我会丢失打字稿定义entertainmentPlayer

你能帮助我吗?