开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

使用useMutations重定向后，useQuery返回undefined [Apollo/React挂钩]

问题描述：在使用Apollo/React挂钩时，当使用useMutations进行重定向后，useQuery返回undefined。

解决方案：

首先，需要确保在使用useMutations进行重定向之前，已经成功执行了相应的mutation操作。可以通过在重定向之前使用console.log打印相关数据，以确保mutation操作已经成功。
如果确保mutation操作已经成功，但是useQuery返回undefined，可能是由于重定向后组件重新渲染导致的。可以尝试在组件重新渲染时重新执行useQuery，以获取最新的数据。
另外，还可以检查是否正确设置了useQuery的查询参数。确保查询参数与后端接口的要求一致，并且正确传递了必要的参数。
如果以上方法都无法解决问题，可以尝试使用Apollo Client Devtools进行调试。该工具可以帮助检查GraphQL查询和响应的详细信息，以便更好地定位问题所在。

推荐的腾讯云相关产品和产品介绍链接地址：腾讯云提供了丰富的云计算产品和服务，包括云服务器、云数据库、云存储等。以下是一些相关产品和介绍链接：

云服务器（CVM）：提供弹性计算能力，支持多种操作系统和应用场景。详情请参考：https://cloud.tencent.com/product/cvm
云数据库MySQL版（CDB）：提供高性能、可扩展的关系型数据库服务。详情请参考：https://cloud.tencent.com/product/cdb_mysql
云对象存储（COS）：提供安全可靠的大规模数据存储和处理服务。详情请参考：https://cloud.tencent.com/product/cos

请注意，以上链接仅供参考，具体的产品选择应根据实际需求和情况进行决策。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

GraphQL在现代Web应用中的应用与优势

前端设置（使用Apollo Client）接着，我们需要在前端应用中配置Apollo Client，与我们的GraphQL服务器通信：npm install apollo-boost @apollo/client...编写前端组件现在，我们在React组件中使用Apollo Client执行查询和变更：// App.jsimport React from 'react';import { gql, useQuery,...运行应用启动后端服务器：node server.js然后启动前端应用，假设使用Create React App：npm startGraphQL基本查询1....客户端代码示例（使用Apollo Client）import { gql, useQuery } from '@apollo/client';const GET_USERS_AND_POSTS = gql...组件中，我们使用useQuery从GraphQL服务器获取数据，并渲染用户和他们的帖子信息。

601 0

Nest 实现 GraphQL 版 TodoList

浏览器访问 http://localhost:3000/graphql 就是 playground，可以在这里查询：左边输入查询语法，右边是执行后返回的结果。...as ReactDOM from 'react-dom/client'; import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo...然后在 App.tsx 里用 useQuery 发请求： import { gql, useQuery } from '@apollo/client'; const getTodoList = gql...import { gql, useMutation, useQuery } from '@apollo/client'; const getTodoList = gql` query Query...前端用 React + @apollo/client。后端用 Nest + GraphQL + Prisma + MySQL。

1161 0

React Query 指南，目前火热的状态管理库！

你将在本系列中发现更多关于它的内容，学习如何使用它，并欣赏其在 React 应用程序中的简洁性。 useQuery 第一个核心概念是 useQuery。...UseQuery 是一个 React hook，它需要三个参数： 1.查询关键字 2.查询函数 3.配置项让我们从第一个参数开始。查询关键字是 React Query 用于识别你的查询的关键字。...通过该关键字，React Query 能够存储结果并在应用程序的不同部分中使用它。该关键字用于标识查询，你还可以使用 React Query 客户端通过代码重置查询或更改值。...请注意数据也可能为 undefined；这是因为在第一次调用时，当请求处于等待状态时，data 尚未呈现。 isLoading：这个标志表示 React Query 正在加载数据。...你可以从库中导入该 hook 并在组件中使用。该 hook 仅返回一个布尔值，表示应用程序中是否存在一个或多个获取请求。因此，你可以根据这些数据决定是否显示加载器。Easy peasy！

3K4 2

使用React-Query解决接口请求的麻烦事

”不会触发，需要使用其返回的“refetch”来触发操作 queryFn：全局定义请求方法，其他地方使用时只需要直接传入请求参数 useQuery useQuery是React-Query提供的用于请求接口并管理请求状态等信息的...queryFn：用于请求的方法，如果在QueryClient中配置了，这里可以不必再写，需要返回请求完成后所处理的数据。...然后useQuery会返回一个对象，里面包含着请求相关的所有信息，这些信息会随着请求的进度而改变，就无须我们再使用一组state变量来进行管理了，常用的包括: isLoading：请求是否正在进行 error...除此之外，使用useQuery拉取回来的数据，会被默认缓存起来，然后可以通过配置过期时间，重新拉取等策略来进行管理。...undefined, }, ) devTools配套开发工具导入开发工具 import { ReactQueryDevtools } from 'react-query/devtools'

7043 0

React 设计模式 0x6：数据获取

fetch() 方法接受一个必需参数，即要获取的资源的路径，返回一个 Promise，解析该请求的响应。...GraphQL 查询总是返回可预测的结果，使用 GraphQL 的应用程序速度快且稳定，因为它们控制获取的数据，而不是由服务器来控制。...安装： npm install graphql @apollo/client 使用： import React from "react"; import { ApolloClient, InMemoryCache..., ApolloProvider, gql, useQuery } from "@apollo/client"; const client = new ApolloClient({ uri: "https...# 安装 npm install react-query # 使用 import React from "react"; import { useQuery, QueryClient, QueryClientProvider

1.2K2 0

同学，请专业点，用Hooks解耦UI组件吧

文章系翻译，原文见阅读原文你肯定看过（或写过）这样的渲染模式：通过AJAX请求数据时渲染一个loading占位图标当数据返回后重新渲染组件让我们一个使用Fetch API的简单例子： import...，假设有n个组件要使用同样的数据。...为了减少重复请求，我决定使用LocalStorage缓存服务端数据。这是否意味着同样的渲染逻辑要重复写n次呢？...同样，只需要简单修改useSomeData而无需改动业务组件： import { gql, useQuery } from '@apollo/client'; const FETCH_SOME_DATA...{ # some fields } } `; const useSomeData = () => { const { data, loading, error } = useQuery

6432 0

Hooks + TS 搭建一个任务管理系统（六）-- 看板页面展示

[1] return Number(id) } 3. useProjectInUrl 有了我们的 projectId ，我们就可以使用通过它来获取我们的项目数据，这样我们就能获取到我们的项目的名称...，显示到页面上 // 通过 id 获取项目信息 export const useProjectInUrl = () => useProject(useProjectIdInUrl()) 使用 const...重置按钮在这里勇个比较有意思的按钮，清楚筛选器，它实现的方法请求非常的简单，我们只需要将所有的数据重置为 undefined ，我们的 clean 函数，就会讲 query 修理为空，这样我们返回的数据就会是全部的数据...const reset = () => { setSearchParams({ typeId: undefined, processId: undefined,...的用法对 modal 组件有了更多的了解了解了 react-query 能够优化请求次数

7004 0

React 中请求远程数据的四种方法

另外，如果你使用的是 GraphQ L，还可以考虑使用 Apollo 之类的其他不错的选择。这篇文章假设你正在调用传统的 REST API。方式1：内联这是最简单，最直接的选择。...看一下我们要解决的一些问题：声明加载状态声明错误状态将错误打印到控制台检查响应是否通过返回 200 response.ok 如果响应正常，将响应转换为 json 并返回 promise 如果响应不正确...看看使用这个 Hook 需要多少代码 : import React from "react"; import useFetch from "....但是，您应该只需要方式4: 方式4：react-query/swr 使用 react-query或swr，可以为我们处理缓存、重试、重复查询等等。我不必维护自己的自定义Hook了。.../services/userService"; import { useQuery } from "react-query"; export default function ReactQueryDemo

4K1 0

为什么我不再用Redux了

下面是使用 React Query 实现的相同示例： import React from "react"; import { useQuery } from "react-query"; import...https://react-query.tanstack.com/docs/overview 现在，无论需要什么数据，你都可以将 useQuery hook 与你设置的唯一键（在本例中为“todos”）...Apollo Client SWR 和 React Query 专注于 REST API，但如果你在 GraphQL 上需要类似的东西，就可以考虑 Apollo Client。...处理完应用程序的数据获取 / 缓存部分后，前端几乎没有全局状态可处理。可以使用 Context 或 useContext+useReducer 处理剩下的少量内容，代替 Redux 的作用。...或者更好的方法是，使用 React 的内置状态作为你的简单前端状态，这样做肯定没问题的。

2.6K2 0

React 中请求远程数据的四种方法

另外，如果你使用的是 GraphQ L，还可以考虑使用 Apollo 之类的其他不错的选择。这篇文章假设你正在调用传统的 REST API。方式1：内联这是最简单，最直接的选择。...看一下我们要解决的一些问题：声明加载状态声明错误状态将错误打印到控制台检查响应是否通过返回 200 response.ok 如果响应正常，将响应转换为 json 并返回 promise 如果响应不正确...看看使用这个 Hook 需要多少代码 : import React from "react"; import useFetch from "....但是，您应该只需要方式4: 方式4：react-query/swr 使用 react-query或swr，可以为我们处理缓存、重试、重复查询等等。我不必维护自己的自定义Hook了。.../services/userService"; import { useQuery } from "react-query"; export default function ReactQueryDemo

2.3K3 0

听说现在都考这些React面试题

目前使用感觉最爽的两个hook，都是关于请求的。一个是 apollo-client 的 useQuery，一个是 swr。...的使用场景 06 使用 react 实现一个通用的 message 组件 07 如何使用 react hooks 实现 useFetch 请求数据更多描述: 比如设计成 `useFetch` 这种形式...: DependencyList): void; type EffectCallback = () => (void | (() => void | undefined)); 根据文档及 ts 的提示来看...，useEffect 的回调参数返回的是一个清除副作用的 clean-up 函数。...因此无法返回 Promise，更无法使用 async/await useEffect(() => { const subscription = props.source.subscribe();

9923 0

React 应用架构实战 0x6：实现用户认证和全局通知

# 身份验证系统 # 流程梳理大致流程如下：用户通过提交登录表单并携带登录凭证向 /auth/login 发起请求如果用户存在且凭证有效，则返回包含用户数据的响应。...cookie 的，带有 httpOnly cookie，因此我们不需要在前端处理身份验证令牌，任何后续请求都将自动包括令牌调用 /auth/me 接口将处理页面刷新后的用户数据持久化，该接口将获取用户数据并将其存储在相同的...我们希望确保任何这样的尝试都将重定向用户到登录页面。为此，我们要创建一个组件，它将包装受保护的资源，并允许用户查看受保护的内容，只有在他们经过身份验证的情况下才能访问。...redirect=${asPath}`, undefined, { shallow: true }); } }, [user, replace, asPath]); if (user.isLoading...-- ... --> ); }; export default DashboardCreateJobPage; 提交成功后可以看到通知：另一个可以利用通知的地方是 API

1.5K2 0

用react-query解决你一半的状态管理问题

这里，推荐使用React-Query管理服务端状态。 ? 另一个可选方案是SWR[1]。...我们可以将刚才的例子用React-Query改写： import { useQuery } from 'react-query' function App() { const {data,...不仅如此，React-Query还为我们做了如下工作：多个组件请求同一个query时只发出一个请求缓存数据失效/更新策略（判断缓存合适失效，失效后自动请求数据）对失效数据垃圾清理数据的CRUD由...所以我们需要告诉React-Query，userData query对应的缓存已经失效，需要更新： import { useQuery, queryCache } from 'react-query';...这样，React-Query就会重新请求userData对应query的数据。总结通过使用React-Query（或SWR）这样的数据请求库，可以将服务端状态从全局状态中解放出来。

2.6K1 0

react-query从拒绝到拥抱

其次他并不限定你使用发起请求的库，所以你可以使用任何你想使用的请求方式，再次强调，他是一个管理高手，他把数据获取从混乱变成秩序，从复杂变成简单，从讨厌变成喜欢。...import axios from "axios"; import { useQuery } from "react-query"; export default function App() {...}颗星 ); } 复制代码在这里使用useQuery，此刻这个请求拥有了自动获取数据，管理请求状态，错误重试，窗口焦点自动获取数据，缓存等，它的第1个参数是一个唯一的key，名字有意义就好...，第2个参数是请求数据的方法，返回Promise，它还有第3个参数是个配置选项的对象（后面会说）。..., useQuery } from "react-query"; import { useQueryClient } from 'react-query'; import { ReactQueryDevtools

2.6K3 1

Hooks + TS 搭建一个任务管理系统（四）-- 搜索功能实现

组件来封装自定义组件，需要继承它的原先的类型，来保持它的 props 正常工作我们先来看看 IdSelect 应当接收的参数类型 // 继承 Select 身上的方法 type SelectProps = React.ComponentProps...: Raw | null | undefined, // onChange 只能传入number onChange?: (value?...(toNumber(value) || undefined)} {...restProps} > { defaultOptionName...export const UserSelect = (props:React.ComponentProps)=>{ const {data:users} =...，这里采用的 useProjects ，是一个封装的 custom hook ，它会在 param 变化时，通过 useQuery 不断的请求数据，这也是我们返回的数据中能够有 isLoading、error

6532 0

Typescript 全栈最值得学习的技术栈 TRPC

当进行网络请求和 API 调用时，你是否知道本次请求的参数类型以及返回的响应数据类型？...tRPC 这个问题非常好，因为我在了解到 tRPC，并参阅了一些基本示例与实践一段时间后发现 trpc 和 http 的应用场景可以说非常相似，完全可以使用 trpc 来替代 http，只不过写法上从...name: 'kuizuo3' }) tRPC 会将这三次函数调用合并成一次 http 请求，并且得到的响应本文也是以多条数据的形式返回分别输出三者 result 也没有任何问题。...tRPC 针对 react 项目的查询主要依赖于 @tanstack/react-query，你也可以到 tRPC React Query documentation 查看相关 hook。...当上述在设置完毕后，点击 Sign in 按钮便可跳转到 next-auth 所提供的简单登录表单。

2.7K5 1

Typescript 全栈最值得学习的技术栈 TRPC

当进行网络请求和 API 调用时，你是否知道本次请求的参数类型以及返回的响应数据类型？...tRPC这个问题非常好，因为我在了解到 tRPC，并参阅了一些基本示例与实践一段时间后发现 trpc 和 http 的应用场景可以说非常相似，完全可以使用 trpc 来替代 http，只不过写法上从...请求，并且得到的响应本文也是以多条数据的形式返回图片图片分别输出三者 result 也没有任何问题。...tRPC 针对 react 项目的查询主要依赖于 @tanstack/react-query，你也可以到 tRPC React Query documentation 查看相关 hook。...当上述在设置完毕后，点击 Sign in 按钮便可跳转到 next-auth 所提供的简单登录表单。

1.9K2 0

基于React和GraphQL的黛梦设计与实现

所以就设计了一个黛梦（demo）------ 打通了GraphQL的接口与前端交互的流程，并且将数据存入MYSQL，分享下React和GraphQL的使用，大致内容如下： GraphQL的增删改查接口设计与实现...CRUD包mysql的使用 React 和 React Hooks的使用因为涉及到React、GraphQL，还有MySQL的一张用户表User，所以我本来是想起一个“搞人实验”的名字，后来斟酌了一下...先定义用户实体和相应的接口，不做细节实现，访问相应的接口能返回相应的预期定义一个全局变量（或者写进一个文件）去模仿数据库操作，返回相应的结果结合数据库去实现细节，访问相应的接口能返回相应的预期全局变量..., // zeroFill: false, // protocol41: true // } // ] // } 在测试完成后，我们就可以放心地引入到express...那么前后端的架构就可以是 react-apollo，vue-apollo, 后端的话比如express-apollo，koa-apollo等等。

1.8K2 0

写在 2021: 值得关注学习的前端框架和工具库

暂时没有使用过，不做展开介绍。 SWR[6]、React-Query[7]、useRequest[8]，网络请求的状态管理、缓存、竞态处理等。...同样是淘系到集团广泛使用的跨端方案。 Remax[19]，小程序跨端框架，基于React，亮点是运行时方案（大部分跨端方案都是编译时，还有Rax这种两套方案都支持的）。...Client Apollo-Client[35]，来自ApolloGraphQL[36]的作品，只有React版本是官方团队在维护，Vue版本的被挪到Vue团队了(VueUI有一部分就是基于Apollo-Client-Vue...和useMutation抹掉了中间的调用过程（和Apollo的hooks类似但不完全相同，Apollo的useQuery接收的是GraphQL Document，BlitzJS中的则接收的是后端方法，其中会直接...记得关注后加我好友，我会不定期分享前端知识，行业信息。2021 陪你一起度过。点赞并分享给你的朋友是最好的支持~ 参考资料 [1] 学完Vue还有必要学习React和Node吗？

4.2K1 0

探索React Hooks：原来它们是这样诞生的！

无状态函数组件在同一时期，React 团队宣布了一种使用函数而不是类来创建组件的新方法。当时的主要想法是拥有一个仅接受属性并可以返回 JSX 的组件。...我们可以使用内置的钩子并编写自己的：内置钩子：这些API（如 useState() ）使功能组件能够“挂钩”到React的所有功能。自定义钩子：这些只是我们编写的实现内置钩子的函数。...因此，我们可以创建自己的 useLocalStorageState() ，它可能的工作方式与 useState() 完全相同，但还将状态保持到 localStorage ，以便在刷新后恢复值。...如果你想要一个获取数据的自定义 Hook，推荐来自 React Query 的自定义钩子，名为 useQuery() 。如今，如果你愿意，你仍然可以使用类。如果你觉得它们更容易使用，那完全取决于你。...代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。

1.5K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭