问题标签 [react-apollo-hooks]

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 回答
597 浏览

typescript - 如何在 TypeScript 中使用 Apollo Client 自定义钩子?

我正在尝试在以下形状的 TypeScript 项目中创建自定义 Apollo Client 突变挂钩:

一切似乎都很好,但是当我将自定义挂钩导入到另一个文件中时,如下所示:

...所有解构的道具都会产生 TypeScript 错误,例如Property 'loading' does not exist on type '((options?: MutationFunctionOptions<any, OperationVariables> | undefined) => Promise<FetchResult<any, Record<string, any>, Record<string, any>>>) | { ...; }'.ts(2339).

知道我做错了什么吗?我需要添加一些特定的类型吗?我没有正确解构/调用钩子吗?

0 投票
0 回答
545 浏览

reactjs - 轮询“useQuery”会导致 React 组件中不必要的重新渲染

我有一个看起来像这样的钩子

然后在我的组件中,我正在做这样的事情;

我正在使用startPollingandstartPolling函数来动态轮询查询。这种方法的问题在于,每当我开始轮询时,假设间隔为 3 秒,组件将每 3 秒重新渲染一次。我希望组件仅在服务器发送更新的响应时呈现。这是我尝试调试的几件事;

  • 我尝试使用 React Dev Tools 分析组件,它显示hooks changed为重新渲染的原因。
  • useEffect在我的组件中使用了多个 s,所以我的下一个想法是检查是否有任何一个useEffect导致重新渲染。我尝试在useEffect调用中添加和删除每个依赖项,但似乎没有帮助。
  • 我也没有存储状态中返回的任何值。
  • 子组件调用mutation.
  • 我也尝试过使用React.memo,但它导致的问题多于解决的问题。

任何关于可能导致问题的想法将不胜感激。

0 投票
1 回答
204 浏览

react-native - 使用带有 apollo react-hooks 的 graphql 查询时缺少字段 __typename

我在 GRAPHQL 中遇到查询问题

这是我的查询

我正在使用反应钩子。
从“@apollo/react-hooks”导入 { useQuery };

我得到的错误

0 投票
0 回答
62 浏览

javascript - 如何从 GraphQL 查询中删除重复数据?

您好,我正在尝试从 item?.node?.used 返回非重复数据。在这种情况下,最好的方法是什么? 1

在此处输入图像描述

0 投票
0 回答
22 浏览

reactjs - 如果 ME_ 查询返回数据,我需要显示用户名和注销按钮,否则我想显示“未登录”。我怎样才能实现它?

我正在使用来自 apollo/react-hooks 的 useQuery。单击注销按钮时,我正在执行 client.resetStore()。但是正文或用户和注销按钮没有被删除。我不得不对 client.resetStore() 使用 try-catch,因为没有它我会收到 GraphQL 错误。

如果 ME_ 查询返回数据,我想显示用户名和注销按钮,否则我想在单击注销按钮时显示“未登录”。我怎样才能实现它?

下面是我的组件代码:-

0 投票
1 回答
71 浏览

graphql - Apollo GraphQL 连接失败

我的根组件已经用 ApolloProvider 标签包装了,但错误消息告诉我不是。

错误信息

问题是我的根组件已经用 ApolloProvider 标签包装了

反应本机代码

导入语句

与 GraphQL 的连接

测试查询

默认应用

这是抛出错误的地方

const { data, loading } = useQuery(USER_QUERY) 是回溯显示的行

0 投票
1 回答
1093 浏览

reactjs - 无效的挂钩调用。当我在 useEffect 中调用 useQuery 时,只能在函数组件的主体内部调用钩子

我在我的反应项目中使用 apollo-graphql,我得到了错误

无效的挂钩调用。Hooks 只能在函数组件的主体内部调用

这是我的代码

一旦我运行这个我得到错误,我知道 useQuery 本身是一个钩子,我不能从 useEffect 内部调用它,但是应该有什么解决方法,因为我首先需要我的 redux 状态的 insuranceId 并将它发送到查询.

谢谢 !

0 投票
1 回答
137 浏览

reactjs - Apollo 客户端 - 为相同的字段名称分离分页查询但使用不同的过滤器

我能够相当轻松地使用 relayStylePagination 为我的应用程序上的用户创建 Post 对象的分页提要。但是,我想使用相同的字段和分页过程,但在访问特定用户的页面时使用过滤器。只显示他们的帖子而不是所有人。

内存缓存将这两个响应合并在一起。当我访问用户页面时,来自提要的帖子会填充初始列表,当我向下滚动时,fetchMore 策略会正确检索单个用户的帖子。当我单击返回时,主页提要在列表底部附加了特定用户的帖子。当我继续在主页上向下滚动时,它会继续以应有的方式从所有用户那里获取帖子。

有没有办法修改每个查询的请求/缓存/字段策略/或类型策略,以便它们不会合并到一个大列表中?我宁愿有一个“主页”列表,并在我访问他们的页面时为每个用户提供一个列表。如果我错过了文档中可以更好地解释这个用例的地方,那将是一个巨大的帮助。

这是默认提要页面上的基本查询和 fetchMore 实现,显示所有用户的帖子:

这是我在用户页面上的 fetchMore 实现:

0 投票
1 回答
330 浏览

reactjs - Apollo 客户端使用 GET 请求的查询反应钩子

我试图从中提取的 API 资源需要一个 GET 请求。如何使用 useQuery 钩子发送 GET 请求,它似乎只发送 POST 请求。

在我对 GraphQL 的有限理解中,是否应该更改服务器以便 GET_ALL_MODELS 的端点是一个 POST 请求,或者我是否需要在前端更改某些内容以便我的查询发送一个 GET 方法请求。

0 投票
0 回答
70 浏览

reactjs - React Apollo (GraphQL):如何阻止查询组件在每次状态更改时重新获取

我有一个 React 组件,其中有一个 react-apollo Query 组件,它使用 graphql 基于一些过滤器(钩子)获取数据,这些过滤器(钩子)在包含查询组件的同一组件内进行管理。所需的功能是仅在与查询组件关联的状态之一发生更改(即应用过滤器)时重新获取数据,但目前,在我提到的包装器反应组件内的任何状态更改时,查询组件都重新获取数据并进入加载状态以执行此操作。例如。假设查询组件依赖于钩子 A、B、C。现在有第四个钩子 D 会更改页码,在该钩子更改时,查询组件不应重新获取数据。

以上是实际代码的结构。我面临的问题是,虽然更改 A、B、C 或 D 应该使查询组件相应地重新获取数据,但不应该更改页面。但是在更改页面时,查询组件会进入加载状态。