问题标签 [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.
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
我缺少的应用程序是否有包装器?
typescript - 来自数据加载器的关系数据的 URQL GraphQL 缓存问题
我正在实现光标分页以创建无限滚动的帖子,基于文档中 URQL 的简单分页示例。它工作得很好,我得到了我想要的所有信息的帖子......直到缓存通过在我的函数中设置info.partial
为无效。然后我得到.true
cursorPagination()
project: null
我想知道我是否需要做一些特别的事情来缓存来自字段解析器(数据加载器)的结果?我还有其他关系,除了post.project
它们的行为符合预期,所以它必须是这个字段解析器特有的东西......它是唯一可以为空的,也许它与这个事实有关,但为什么它最初会返回值和然后在info.partial
设置为时丢失它true
?
这是我的代码,如果我应该分享更多内容以阐明问题,请告诉我。提前致谢。
createProjectLoader.ts
解析器/post.ts
...
创建UrqlClient.ts
javascript - 无法解析从“src/routes/$layout.svelte”导入“@urql/exchange-graphcache”。文件是否存在?
我有一个我一直在处理的 sveltekit 项目,并在不久前使用 @urql/exchange-graphcache 配置了图形缓存。但是我刚刚安装了一个新的依赖项(dayjs,虽然我认为它无关紧要),现在它抛出了错误:
当我在安装 dayjs 之前回滚并安装新的 yarn 时,我得到了同样的错误。我尝试浏览graphcache 错误页面,但没有找到任何帮助。任何人都可以帮助解决可能的错误吗?
如果有帮助,这些是我的依赖项
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
。我该如何解决这个问题?
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 一样显示它,只需单击一个按钮。
javascript - 评论缓存是一种好的做法,我应该如何正确地做呢?
我正在尝试基于 Ben Awad 课程的类似 reddit 的网络应用程序。我在单个帖子页面中添加了评论部分。我对帖子和评论都有光标分页。这就是它的外观:
由于某种原因,它工作起来很奇怪 - 它缓存了我访问的每个帖子页面中的每条评论,并在我访问的下一篇文章中显示所有缓存的评论所以我决定添加这个:
它工作正常。但它现在只缓存一个帖子中的评论,所以如果我去另一个帖子,缓存会重置,如果我返回并转到同一个帖子,缓存工作正常。现在我不确定,我是否需要缓存评论,或者有什么办法可以缓存所有评论,只在页面上只需要那些评论?
vue.js - 在突变之前从 urql 查询结果中删除 __typename 字段
当从 GraphQL Server 查询数据时,urql 添加一个 _typename 字段来跟踪缓存:
我想更新这个对象并将其保存回数据库。当useMutation
函数被调用时__typename
也会被传递,因为它不是服务器模式的一部分,所以会导致错误:
我知道在调用 useMutation 之前我可以做这样的事情:
但我想知道在 urql 中是否有更好的全局处理方法?例如,在 apollo-client 中,您可以使用 ApolloLink 在更新之前从所有变量中删除 __typename
reactjs - @urql/exchange-auth 不在标头中发送令牌
我在我的项目中使用 urql GraphQL 客户端。登录后,它不会自动在授权标头中添加令牌,因为它应该。我必须刷新一次页面,然后在标题中设置令牌。我已经阅读了文档,似乎无法弄清楚我做错了什么。
这是我的实现:
我在这里做错了什么?谢谢
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* 函数?