问题标签 [react-apollo]
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 - 为什么这个使用 Jest 和 react-test-renderer 的测试会抛出错误,因为它试图解析 .graphql 文件?
我正在尝试运行一个简单的测试来使用 Jest,它似乎正在解析整个应用程序。服务文件引用了引发错误的文件。
如果我不包含graphql
在moduleNameMapper
Jest 的正则表达式中,则会尝试解析.graphql
文件本身。
app-container
解析文件时,graphql.js
来自 apollo-client 的尝试解析导入的.graphql
文件时抛出错误。
编辑:如果我使用这些错误将查询内联gql
停止。使用导入的查询有什么想法吗?
来自package.json
:
网络包配置:
测试:
错误:FAIL src/app/ tests /store.test.js ● 测试套件未能运行
第 74 行来自graphql.js
:
graphql - Apollo GraphQL:SSR 后延迟加载数据
我有以下代码:
在迁移到 Apollo 之前,我将 ALL_LOCATIONS_QUERY 作为同构获取客户端(基本上是 AJAX 请求)加载。但我正在寻找阿波罗的方式,我不确定我是否有它。我有几个问题。
- 使用
graphql(QUERY_NAME, { options })
,因为我完全分开加载 Home 数据和 Locations 数据,它们是否应该放置在高阶组件中的单独的多个graphql
函数中?withApollo(compose([...here])
- 目前为了从
fetchMore
函数中获取数据,我正在执行以下操作,但有些事情告诉我它应该在状态内完成,所以 Apollo 知道它可以进行缓存。对此有什么想法吗?我是否朝着正确的方向前进?
非常感谢您!
reactjs - react-apollo - 如何从包装组件设置查询变量?
react-apollo
提供将组件道具转换为查询变量的能力:
但我需要使用包装组件中的变量开始查询。
就像是:
更新
QUERY
看起来MyComponent
像
filter
不可为空。所以第一个请求应该有有效的变量filter
,并且这个变量应该在包装的组件中创建。
logging - Apollo GraphQL 和 React 相当于 redux-logger
我正在学习graphql
并想知道是否存在针对apollo-client
.
我发现redux-logger
它是调试 React/Redux 应用程序的绝佳工具,我想知道是否存在类似的东西appolo-client
?
我想store
在任何给定时间查看我的状态。
javascript - 未捕获的错误:react-apollo 仅支持每个 HOC 的查询、订阅或突变
我正在尝试Chat
使用两个查询和一个突变来包装我的组件compose
。
但是,我仍然在控制台中收到以下错误:
未捕获的错误:
react-apollo
仅支持每个 HOC 的查询、订阅或突变。[object Object]
有 2 个查询、0 个订阅和 0 个突变。您可以使用 'compose
' 将多个操作类型连接到一个组件
这是我的查询和导出语句:
显然,问题出在findConversations
查询上。如果我将其注释掉,我不会收到错误消息并且组件会正确加载:
谁能告诉我我错过了什么?
顺便说一句,我还在 上设置了订阅allMessagesQuery
,以防相关:
javascript - Apollo 中的自动 UI 更新问题:`updateQuery` 不能与 `subscribeToMore` 一起正常工作
我正在为我的聊天应用程序使用GraphQL 订阅,但我遇到了 UI 更新问题。
这是我正在使用的查询和突变:
然后,在导出时,我Chat
像这样包装我的组件:
我订阅了allMessagesQuery
in componentDidMount
:
通过聊天发送消息后,订阅成功触发,我看到两个日志语句也包含预期的数据。所以里面的内容messages
肯定是正确的updateQuery
!
但是,UI 不会自动更新,实际上,之前显示的所有消息都会消失。
我的render
方法如下所示:
中的日志记录语句render
显示最初this.props.allMessagesQuery
具有数组allMessages
,因此在初始加载后一切正常。
收到订阅后,就会allMessages
消失,this.props.allMessagesQuery
这就是为什么给一个空数组ChatMessages
而没有渲染任何内容的原因。
订阅触发前✅</p>
订阅触发后❌</p>
graphql - 分页组件不需要初始查询
我希望一个组件从其父组件接收其初始数据,同时仍然能够自行对数据进行分页。
例如,考虑
会是什么样<DynamicChild>
子?我的理解是,为了能够访问 fetchMore (用于分页),您必须包装<DynamicChild>
函数graphql
(来自 react-apollo)。但是该graphql
功能需要初始查询,而<DynamicChild>
无需进行。我的选择似乎是:
a) 有<Parent>
句柄分页。这意味着我必须将 shouldComponentUpdate 方法添加到<StaticChild>
.
b)<DynamicChild>
进行了类似的初始查询,<Parent>
并依赖 Apollo 从 Redux 存储中提取第二个查询(假设这两个查询没有被批处理在一起)。
c)<Parent>
进行初始查询并将 fetchMore() 回调传递给<DynamicChild>
. 我担心在<DynamicChild>
使用回调时,它仍然会尝试重新渲染<Parent>
.
虽然这些解决方案很简单,但有没有办法在<DynamicChild>
不定义自己的初始查询的情况下定义自己的分页查询?
reactjs - 使用 Apollo 客户端为 React 组件动态设置 GraphQL 查询
我正在构建一个 React 前端,它允许用户从静态查询列表中选择一个“活动”查询,并将结果展平为要在表格中显示的结果。将 GraphQL 查询从高阶组件传递到嵌套子组件的最佳方法是什么?
我见过的大多数文档/解决方案都侧重于将静态查询与从组件状态到组件的动态条件绑定,这不适用于我的目的,因为不同的静态查询具有不同的字段并查询不同的节点类型。
这里的最佳实践/推荐方法是什么?我觉得这不是一个非常独特的用例,但我似乎找不到任何可以做类似事情的例子。
我使用 Apollo-Client/Redux 作为我的客户端商店。
下面是组件的大致轮廓:
javascript - GraphQL 突变后的 updateQueries 无法与 Apollo 客户端一起使用
在我的应用程序中发送createMessage
突变后,我想ApolloStore
使用updateQueries
.
我的设置如下所示:
我createMessageMutation
在我的代码中这样调用:
有了这个设置,我希望我在值中指定的函数updateQueries
被执行,但是,这似乎没有发生(日志语句从不打印)。
作为参考,这是allConversation
查询中的ApolloStore
样子:
此外,这在我的 JS 代码中是如何定义的:
有没有人发现我做错了什么?
javascript - 在 GraphQL 中删除突变前的只读字段
Article
我的架构中有一个类型:
对于它的更新,updateArticle(id: ID!, article: ArticleInput!)
突变使用了相应的输入类型:
突变本身如下所示:
文章总是作为一个整体保存(而不是一个一个字段),所以当我将一篇文章传递给我之前获取的那个突变时,它会抛出像Unknown field. In field "updated"
,Unknown field. In field "__typename"
和Unknown field. In field "id"
. 这些有根本原因,这些字段没有在输入类型上定义。
根据规范,这是正确的行为:
(...) 此无序映射不应包含名称未由此输入对象类型的字段定义的任何条目,否则应引发错误。
现在我的问题是处理这些情况的好方法是什么。我应该在我的应用代码中列出输入类型允许的所有属性吗?
如果可能的话,我想避免这种情况,并且可能有一个实用函数为我切掉它们,它知道输入类型。但是,由于客户端不知道架构,这必须发生在服务器端。因此,不必要的属性将被转移到那里,我想这就是为什么它们不应该首先被转移的原因。
有没有比维护属性列表更好的方法?
我正在使用apollo-client
,react-apollo
和graphql-server-express
.