首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

通过apollo react使用useMutations重定向后,UseQuery不工作

首先,让我们了解一下问题的背景。Apollo是一个流行的GraphQL客户端,它提供了一套用于在前端应用程序中管理GraphQL数据的工具和库。在React应用程序中,我们可以使用Apollo React来集成Apollo客户端。

在这个问题中,我们使用了useMutations钩子来执行GraphQL的mutation操作,并在操作完成后进行重定向。然而,重定向后,我们发现useQuery不再工作。

这个问题可能是由于重定向后组件的重新渲染导致的。当我们重定向时,组件会被卸载并重新挂载,这可能会导致useQuery钩子的重新初始化。由于Apollo客户端的缓存机制,重新初始化后的useQuery可能无法正确地从缓存中获取数据。

为了解决这个问题,我们可以尝试以下几个步骤:

  1. 确保在重定向之前,将需要的数据保存到Apollo客户端的缓存中。可以使用Apollo客户端提供的cache.writeQuery方法手动将数据写入缓存。
  2. 在重定向后的组件中,使用Apollo客户端的cache.readQuery方法从缓存中读取数据。这样可以确保在重新初始化useQuery钩子之前,我们可以从缓存中获取到之前保存的数据。
  3. 在重新初始化useQuery钩子之前,可以使用Apollo客户端的cache.restore方法将之前保存的数据恢复到缓存中。这样可以确保useQuery钩子能够正确地从缓存中获取数据。

以下是一个示例代码,演示了如何在重定向后正确使用useQuery钩子:

代码语言:txt
复制
import { useQuery, useMutation } from '@apollo/react-hooks';
import { gql } from 'apollo-boost';

const GET_DATA = gql`
  query GetData {
    // 查询数据的GraphQL查询语句
  }
`;

const SAVE_DATA = gql`
  mutation SaveData($input: DataInput!) {
    // 执行保存数据的GraphQL mutation语句
  }
`;

const MyComponent = () => {
  const { loading, error, data } = useQuery(GET_DATA);
  const [saveData] = useMutation(SAVE_DATA);

  const handleSave = async () => {
    try {
      await saveData({
        variables: {
          input: // 要保存的数据
        },
      });

      // 保存数据后进行重定向
      // 重定向代码...

    } catch (error) {
      // 处理保存数据失败的情况
    }
  };

  if (loading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  return (
    <div>
      {/* 渲染数据 */}
      {data && data.someData}
      {/* 其他组件代码 */}
    </div>
  );
};

export default MyComponent;

在这个示例中,我们使用了Apollo React的useQuery和useMutation钩子来执行GraphQL查询和mutation操作。在保存数据后,我们可以进行重定向操作。在重定向后的组件中,我们重新初始化了useQuery钩子,并从缓存中读取之前保存的数据。

需要注意的是,这只是一个示例代码,具体的实现方式可能因项目的具体情况而有所不同。但是通过这个示例,你可以了解到如何在重定向后正确使用useQuery钩子。

希望这个答案能够帮助到你,如果你有任何其他问题,请随时提问。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • 为什么我不再用Redux了

    React Query 我已经在自己的多数个人和工作项目中使用 React Query 几个月了。这个库有一个非常简单的 API 和几个 hooks,用于管理查询(获取数据)和突变(更改数据)。...下面是使用 React Query 实现的相同示例: import React from "react"; import { useQuery } from "react-query"; import...你可以在全局级别设置缓存配置,然后就可以忘掉它了——一般来说它足以完成你期望的工作。有关其幕后工作机制的更多信息,请通过下方链接查看 React Query 文档。...Apollo Client SWR 和 React Query 专注于 REST API,但如果你在 GraphQL 上需要类似的东西,就可以考虑 Apollo Client。...处理完应用程序的数据获取 / 缓存部分,前端几乎没有全局状态可处理。可以使用 Context 或 useContext+useReducer 处理剩下的少量内容,代替 Redux 的作用。

    2.6K20

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

    React 是一个专注的组件库。因此,它对如何请求远程数据没有什么建议。如果要通过 HTTP 请求数据并将其发送到 Web API,可以考虑下面四种方法。...另外,如果你使用的是 GraphQ L,还可以考虑使用 Apollo 之类的其他不错的选择。这篇文章假设你正在调用传统的 REST API。 方式1:内联 这是最简单,最直接的选择。...看看使用这个 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

    4.1K10

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

    React 是一个专注的组件库。因此,它对如何请求远程数据没有什么建议。如果要通过 HTTP 请求数据并将其发送到 Web API,可以考虑下面四种方法。...另外,如果你使用的是 GraphQ L,还可以考虑使用 Apollo 之类的其他不错的选择。这篇文章假设你正在调用传统的 REST API。 方式1:内联 这是最简单,最直接的选择。...看看使用这个 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.3K30

    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.6K10

    React Query 指南,目前火热的状态管理库!

    你将在本系列中发现更多关于它的内容,学习如何使用它,并欣赏其在 React 应用程序中的简洁性。 useQuery 第一个核心概念是 useQuery。...通过该关键字,React Query 能够存储结果并在应用程序的不同部分中使用它。该关键字用于标识查询,你还可以使用 React Query 客户端通过代码重置查询或更改值。...error:此对象包含请求存在问题的错误;通过使用它,你可以获取错误并为用户创建漂亮的信息提示。...好的,你现在对 useQuery工作方式及其潜力有了一个概念,但是如果你更有兴趣,可以观看我的视频了解更多信息。 好的,就这些!我很快会回到你呈现 React Query 的另一个功能。...React Query 团队知道这一点,并决定构建一个工具来帮助那些想要使用 React Query 进行工作的开发者。

    3.8K42

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

    它对自己的定义也包含状态管理的字样,而是有穷状态机( finite state machines )。暂时没有使用过,不做展开介绍。...Client Apollo-Client,来自ApolloGraphQL的作品,只有React版本是官方团队在维护,Vue版本的被挪到Vue团队了(VueUI有一部分就是基于Apollo-Client-Vue...而且actions市场有各种大神们已经写好的action让你可以快速搭建一个严谨的工作流。...和useMutation抹掉了中间的调用过程(和Apollo的hooks类似但不完全相同,ApollouseQuery接收的是GraphQL Document,BlitzJS中的则接收的是后端方法,其中会直接...但还是推荐了解一下,毕竟我个人是喜欢这种稳定性保障的工作的,并且看着一个个测试用例通过也很有成就感。

    2.9K10

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

    作者:林渡 https://juejin.cn/post/6935670539088461855 最近在知乎看到了这么个问题:学完Vue还有必要学习React和Node吗?...它对自己的定义也包含状态管理的字样,而是有穷状态机( finite state machines[5] )。暂时没有使用过,不做展开介绍。...和useMutation抹掉了中间的调用过程(和Apollo的hooks类似但不完全相同,ApollouseQuery接收的是GraphQL Document,BlitzJS中的则接收的是后端方法,其中会直接...但还是推荐了解一下,毕竟我个人是喜欢这种稳定性保障的工作的,并且看着一个个测试用例通过也很有成就感。...记得关注加我好友,我会不定期分享前端知识,行业信息。2021 陪你一起度过。 点赞并分享给你的朋友是最好的支持~ 参考资料 [1] 学完Vue还有必要学习React和Node吗?

    4.2K10

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

    链接地址:github.com/TanStack/qu… 简单使用 QueryClientProvider 首先,需要在组件外层定义一个queryClient作为组件操作和使用数据的一个共同容器,通过...”不会触发,需要使用其返回的“refetch”来触发操作 queryFn:全局定义请求方法,其他地方使用时只需要直接传入请求参数 useQuery useQueryReact-Query提供的用于请求接口并管理请求状态等信息的...useQuery拉取回来的数据,会被默认缓存起来,然后可以通过配置过期时间,重新拉取等策略来进行管理。...最后 感谢你能看到这里,本文简单介绍了React-Query对服务端数据进行增删改查的功能实现,以及React-Query的一些其他能力,希望对你有用,React-Query的使用场景没有其他状态管理库那么广泛...笔者之后也会继续更新React-Query的其他使用场景,如果可以的话,不妨点个赞再走呢,这对我很重要。

    97930

    React 应用架构实战 0x5:集成 API 到应用中

    在之前,了解了如何设置模拟 API,而在本节中,将学习如何通过应用程序消费 API。当我们提到 API 时,指的是 API 后端服务。...我们将学习如何在客户端和服务器上获取数据,对于 HTTP 客户端,我们将使用 Axios,并使用 React Query 库来处理获取到的数据,它允许我们在 React 应用程序中处理 API 请求和响应...React Query React Query 是一个很好的处理异步数据的库,可以将数据在 React 组件中使用。...useQuery 钩子来处理这些事情: import { useQuery } from "@tanstack/react-query"; const loadData = () => Promise.resolve...对于请求定义函数,我们将使用我们刚刚创建的 axios client,对于 hooks,我们将使用 React Query 的 hooks。

    1.5K20

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

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

    1.5K20

    探索 React 状态管理:从简单到复杂的解决方案

    引言React状态管理在构建动态和交互式的Web应用程序中扮演着至关重要的角色,如果你想在React工作,了解它是非常重要的,实际上是最重要的事情。...通过一个逐步的例子,我们演示了如何将Redux集成到React应用程序中以有效地处理状态更改。...import React from 'react';import { useQuery, useMutation, QueryClient, QueryClientProvider } from 'react-query...在DataComponent中,我们使用useQuery钩子使用fetchData函数获取数据。它返回一个包含数据、isLoading和isError等属性的对象,用于处理加载和错误状态。...通过这个设置,React Query处理了服务器状态、缓存和数据获取的管理,使得更容易在React组件中跟踪、更新和显示服务器数据。

    45731

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

    tRPC这个问题非常好,因为我在了解到 tRPC,并参阅了一些基本示例与实践一段时间发现 trpc 和 http 的应用场景可以说非常相似,完全可以使用 trpc 来替代 http,只不过写法上从...),以及 greeting 函数,服务端的工作就暂且完毕。...举例说明,比如说我们将 appRouter 改写成这样,通过 input 参数指定了 useQuery 需要传递一个 name 为字符串且不为空的对象。...tRPC 针对 react 项目的查询主要依赖于 @tanstack/react-query,你也可以到 tRPC React Query documentation 查看相关 hook。...此时就可以使用 Migrate,通过命令的方式自动为我们生成当前版本下的 sql 文件,而需要用到的也通过命令的形式运行 sql 文件。

    2K20

    129.精读《React Conf 2019 - Day2》

    下面介绍签名机制的工作原理。...增强调试能力 可以通过点击直接跳转到组件源码: 最新版已增强至点击按钮直接通过 Source 打开源码位置,这样可以快速通过 UI 寻找到代码。...使用方式: npx react-codemod React-PropTypes-to-prop-types 可以看到,通过 cli 对文件进行一次性重构处理。...队列加载 假设 Composer 与 NewsFeed 组件内部都通过 useQuery 取数,那么并行取数时加载机制如下: 这可能有两个问题:组件内部加载顺序统一与组件间加载顺序统一。...在设计手势动画时要考虑三个要点: 使用移动增量作为手势动画的基准点。 动画和手势应该随时可以被中断,通过 springs 即可实现。 完成手势的动画速度应该与手势速度相当,这样视觉体验更自然。

    1.2K10
    领券