问题标签 [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 投票
2 回答
766 浏览

reactjs - 当我使用服务器端渲染时,为什么 urql 在错误的地址发出请求?

我正在使用 NextJs 构建我的 Web 应用程序的前端。我的客户端正在运行,http://localhost:3000/而我的 graphql 服务器位于http://localhost:5000/graphql. 所以我正在创建 Urql 客户端,我想要服务器端渲染。在我的 index.tsx 中,我使用 withUrqlClient 创建了 urql 客户端,并为我的后端指定了正确的 url:

问题是,当我转到/login页面(或除索引之外的任何页面)并在登录表单上提出提交请求时,它会向http://localhost:3000. 我在控制台上收到警告:

我认为该错误不在 login.tsx 中

登录.tsx

谁能解释发生了什么?我按照原样遵循了文档:https ://formidable.com/open-source/urql/docs/advanced/server-side-rendering/#nextjs

仅供参考,这是我的 _app.tsx

我缺少的应用程序是否有包装器?

0 投票
0 回答
358 浏览

typescript - 来自数据加载器的关系数据的 URQL GraphQL 缓存问题

我正在实现光标分页以创建无限滚动的帖子,基于文档中 URQL 的简单分页示例。它工作得很好,我得到了我想要的所有信息的帖子......直到缓存通过在我的函数中设置info.partial为无效。然后我得到.truecursorPagination()project: null

我想知道我是否需要做一些特别的事情来缓存来自字段解析器(数据加载器)的结果?我还有其他关系,除了post.project它们的行为符合预期,所以它必须是这个字段解析器特有的东西......它是唯一可以为空的,也许它与这个事实有关,但为什么它最初会返回值和然后在info.partial设置为时丢失它true

这是我的代码,如果我应该分享更多内容以阐明问题,请告诉我。提前致谢。

createProjectLoader.ts

解析器/post.ts

...

创建UrqlClient.ts

0 投票
1 回答
787 浏览

reactjs - next-auth / urql - 访问访问令牌以在 urql 客户端中设置授权标头

我正在使用next-auth来管理我的 next.js 应用程序的 JWT 令牌和会话。我还使用urql作为 GraphQL 客户端。我在一个文件中初始化 urql 客户端,如下所示:

然后将其添加_app.tsx如下:

在这个阶段没有什么特别的。

现在我的问题是我希望能够访问访问令牌以Authorization在客户端中添加标头,但是由于这段代码存在于 React 组件之外,因此我无法使用useSessionnext-auth 提供的钩子。

任何人都可以提出解决这个问题的最佳方法吗?谢谢。

0 投票
0 回答
221 浏览

javascript - 无法解析从“src/routes/$layout.svelte”导入“@urql/exchange-graphcache”。文件是否存在?

我有一个我一直在处理的 sveltekit 项目,并在不久前使用 @urql/exchange-graphcache 配置了图形缓存。但是我刚刚安装了一个新的依赖项(dayjs,虽然我认为它无关紧要),现在它抛出了错误:

当我在安装 dayjs 之前回滚并安装新的 yarn 时,我得到了同样的错误。我尝试浏览graphcache 错误页面,但没有找到任何帮助。任何人都可以帮助解决可能的错误吗?

如果有帮助,这些是我的依赖项

0 投票
1 回答
489 浏览

javascript - 在 React.js 中的 urql GraphQL 客户端中执行查询时去抖动输入

我有一个像https://zillow.github.io/react-slider这样的带有min&max值的双滑块。当其中一个滑块发生变化时,它会调用一个查询。

但是由于查询很大,所以需要很多时间,我需要找到一种方法来使用 debounce,这样查询就不会经常被调用。

我确实找到了一个很好的解决方案→ https://stackoverflow.com/a/58594348/6141587仅使用 React.js 但不确定如何使用它urql

主页.tsx

收购清单.tsx

我当前的解决方案将滑块值延迟更改 2 秒,这在我直接调用时是有意义的debounceSetPrice。我该如何解决这个问题?

0 投票
1 回答
385 浏览

javascript - 使用 Prisma、Urql 和 React 加载更多分页?

我正在关注本教程→ https://blog.logrocket.com/pagination-in-graphql-with-prisma-the-right-way/

最后,有一个基于Load More的分页,如下所示:

装载更多...

我尝试像这样实现它:

但是当我单击Load More...按钮时,我失去了所有以前的状态。它还替换了整个 UI,Loading因为我的if (fetching)条件位于显示卡之上。

如何在使用新查询调用 Prisma 时保留以前的状态,以便显示所有显示卡?

所以第一次,我有20张卡,第二次加载它应该有40张卡等等......

目前,它一次只显示 20 张卡片,如果我有Previous&Next按钮,这很好,但我希望它像 Instagram 一样显示它,只需单击一个按钮。

0 投票
0 回答
86 浏览

javascript - 评论缓存是一种好的做法,我应该如何正确地做呢?

我正在尝试基于 Ben Awad 课程的类似 reddit 的网络应用程序。我在单个帖子页面中添加了评论部分。我对帖子和评论都有光标分页。这就是它的外观:

由于某种原因,它工作起来很奇怪 - 它缓存了我访问的每个帖子页面中的每条评论,并在我访问的下一篇文章中显示所有缓存的评论所以我决定添加这个:

它工作正常。但它现在只缓存一个帖子中的评论,所以如果我去另一个帖子,缓存会重置,如果我返回并转到同一个帖子,缓存工作正常。现在我不确定,我是否需要缓存评论,或者有什么办法可以缓存所有评论,只在页面上只需要那些评论?

这是我的仓库:https ://github.com/tmelent/NodejsFullstackTutorial

0 投票
1 回答
1060 浏览

vue.js - 在突变之前从 urql 查询结果中删除 __typename 字段

当从 GraphQL Server 查询数据时,urql 添加一个 _typename 字段来跟踪缓存:

我想更新这个对象并将其保存回数据库。当useMutation函数被调用时__typename也会被传递,因为它不是服务器模式的一部分,所以会导致错误:

我知道在调用 useMutation 之前我可以做这样的事情:

但我想知道在 urql 中是否有更好的全局处理方法?例如,在 apollo-client 中,您可以使用 ApolloLink 在更新之前从所有变量中删除 __typename

0 投票
2 回答
797 浏览

reactjs - @urql/exchange-auth 不在标头中发送令牌

我在我的项目中使用 urql GraphQL 客户端。登录后,它不会自动在授权标头中添加令牌,因为它应该。我必须刷新一次页面,然后在标题中设置令牌。我已经阅读了文档,似乎无法弄清楚我做错了什么。

这是我的实现:

我在这里做错了什么?谢谢

0 投票
1 回答
528 浏览

vue.js - 有没有办法在 vue3 setup() 之外使用来自“@urql/vue”的*函数 graphql?

我正在尝试在 vue3 setup() 之外@urql/vue 执行graphql queries,例如使用 vuex。在 vue2 上,我以这种方式使用了 apollo-client,它工作正常。这是为了能够更轻松地进行查询的重用。但是一个错误返回给我,我不知道是否有任何解决方法,有没有人经历过这个并设法解决它?

这是我的客户定义: client.js

应用程序.js

initpayload.actions.js

这是我的服务:initpayload.service.js

使用的依赖项:

包.json

有没有办法解决这个问题,以便我们可以以这种方式使用 use* 函数?