开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

在Apollo中提交表单后，如何从useQuery钩子获取数据？

在Apollo中提交表单后，可以通过以下步骤从useQuery钩子获取数据：

确保你已经在应用程序中正确配置了Apollo Client，并且已经创建了相应的GraphQL查询。
在表单提交后，你可以使用Apollo Client提供的mutate函数来发送GraphQL变异。例如，你可以使用useMutation钩子来定义一个处理表单提交的函数。
在表单提交函数中，使用mutate函数发送GraphQL变异，并传递相应的变异参数。例如，如果你的变异接受一个表单输入作为参数，你可以将其作为mutate函数的参数传递。
在变异成功后，Apollo Client会自动更新缓存，并触发相关的查询更新。这意味着你可以在useQuery钩子中获取最新的数据。
在useQuery钩子中，你可以通过解构赋值来获取查询结果。例如，你可以使用const { data, loading, error } = useQuery(HOOK_QUERY)来获取数据、加载状态和错误信息。
通过data属性，你可以访问查询结果的数据。根据你的查询定义，数据可能会以不同的形式存在。你可以根据需要进行处理和展示。

总结：通过使用Apollo Client的mutate函数发送GraphQL变异，并在变异成功后使用useQuery钩子获取最新的数据，你可以从useQuery钩子中获取表单提交后的数据。

腾讯云相关产品推荐：腾讯云云开发（Tencent Cloud CloudBase）是一款全托管的云原生应用开发平台，提供了丰富的后端服务和开发工具，帮助开发者快速构建和部署云原生应用。了解更多信息，请访问腾讯云云开发官网：https://cloud.tencent.com/product/tcb

相关搜索:如何从Apollo客户端的useQuery中获取响应头提交后从表单输入中获取值在React中隐藏提交按钮后，如何提交表单如何从网络钩子中获取数据？在新数据提交后使用React中的钩子映射数据如何在表单提交后在输入字段中显示表单提交值如何在Django中从表单提交中获取所有数据如何在提交后的钩子脚本中获取项目路径？(git)如何从传递的令牌中获取提交的表单数据在Django中批准付款后从Paypal脚本提交表单如何在codeigniter中获取表单提交后的成功消息使用C#从表单堆栈中获取提交的数据？在laravel中如何在表单提交后重新加载数据表？如何从html表单中获取数据？如何从输入表单中获取数据在返回之前从react钩子中获取更新后的变量 Symfony表单和实体数据，表单提交后在实体中显示额外属性如何在提交后将表单值显示在表中？如何在jquery中从表单提交中获取所有切换值？在redux表单中单击提交后，如何不重置字段中的数据？

相关搜索:

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

有帮助

没帮助

相关·内容

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

学习如何轻松构建可伸缩的 React 应用程序：数据获取 # React 中服务端数据获取的方式在大多数 React 应用程序中，应用程序需要来自 API 或服务器的数据才能正常运行。...也会将数据从应用程序提交到服务器以接收某种响应。有几种方法可以将此数据发送/获取到 API 或服务器，可以使用内置的 API 或外部 npm 包来实现。...在大多数 React 应用程序中，通常需要计算数据或从 API 获取数据。...从 API 缓存的数据可以存储在我们的状态管理中，然后在我们的应用程序中全局使用。尽管数据被缓存，但在刷新页面时，它将丢失数据，需要重新获取。...此外，您可以获取数据并将其存储在 React 应用程序状态中。 # React Query React Query 是一个库，用于处理 React 应用程序中的数据获取和管理。

1.2K2 0

如何在 React.js 项目中使用 GraphQL

在本指南中，我们将介绍如何将 GraphQL 无缝集成到您的 React.js 项目中。什么是 GraphQL？GraphQL 是用于 API 的查询语言，也是用于执行那些查询的运行时。.../client@apollo/client 软件包是 Apollo Client，这是一个强大的库，用于在 React 应用程序中管理状态并进行 GraphQL 请求。...在项目的 src 文件夹中创建一个名为 client.js 的文件，并设置 Apollo Client：// src/client.jsimport { ApolloClient, InMemoryCache...: new InMemoryCache(),});export default client;在 React 组件中使用 GraphQL 获取数据现在，让我们使用 GraphQL 在 React 组件中获取数据...我们使用 @apollo/client 中的 useQuery 钩子执行 GET_POSTS 查询。

4544 0

浅谈laravel-admin form中的数据,在提交后,保存前,获取并进行编辑

所以，需要在保存前根据提交的审核状态和设置的方式得到商品状态再保存，而通过$form- model()- attribute_name只能获取提交后的值，不能更改。...Google之后发现了已经有解决方案：可以修改提交表单时的逻辑吗 #375 在模型中添加如下方法： public static function boot() { parent::boot();...static::saving(function ($model) { // 从$model取出数据并进行处理 }); } 以上这篇浅谈laravel-admin form...中的数据,在提交后,保存前,获取并进行编辑就是小编分享给大家的全部内容了，希望能给大家一个参考。

4.2K6 2

浅谈laravel-admin form中的数据,在提交后,保存前,获取并进行编辑

所以，需要在保存前根据提交的审核状态和设置的方式得到商品状态再保存，而通过$form->model()->attribute_name只能获取提交后的值，不能更改。...Google之后发现了已经有解决方案：可以修改提交表单时的逻辑吗 #375 在模/ /型中添加如下方法： public static function boot() { parent::boot()...; static::saving(function ($model) { // 从$model取出数据并进行处理 }); } 以上这篇浅谈laravel-admin form中的数据,在提交后,保存前,...获取并进行编辑就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持/ /。

3.6K0 0

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

使用useState()进行基本状态管理我们从使用useState()钩子进行最简单形式的状态管理开始。我们将探讨如何在功能组件内初始化和更新状态。...在Child组件中，我们使用useSelector钩子从Redux store中获取count状态。我们还使用useDispatch钩子获取对dispatch函数的引用。...我们首先创建了一个QueryClient实例和一个从服务器端点获取数据的fetchData函数。...我们定义了一个postData函数，用于向服务器保存新数据的POST请求。在DataComponent中，我们使用useQuery钩子使用fetchData函数获取数据。...在handleSubmit函数内部，我们调用mutation.mutateAsync以向服务器发送新数据对象。我们呈现数据和一个提交按钮。在加载时，我们显示加载消息；如果有错误，我们显示错误消息。

4523 1

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

GraphQL是一种现代的API查询语言，它在现代Web应用中得到了广泛的应用，因为它提供了一种高效、灵活且强大的方式来获取数据GraphQL基础快速应用示例：1....编写前端组件现在，我们在React组件中使用Apollo Client执行查询和变更：// App.jsimport React from 'react';import { gql, useQuery,...层次结构允许一次请求获取多个级别的数据。...我们使用useQuery从GraphQL服务器获取数据，并渲染用户和他们的帖子信息。...: Post}在Query类型中，我们定义了获取单个用户、所有用户、单篇帖子和所有帖子的查询。而在Mutation类型中，我们定义了创建新用户和新帖子的操作。

981 0

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

因此，它对如何请求远程数据没有什么建议。如果要通过 HTTP 请求数据并将其发送到 Web API，可以考虑下面四种方法。...在现实世界中， HTTP 调用看起来更像这样。...要点是，所有的 HTTP 调用都是通过纯 JavaScript 函数处理的，存储在一个文件夹中。...那么如何创建一个自定义 useFetch 钩子来简化我们的 HTTP 调用呢？...、如果客户端的连接不可靠，如何重新获取？你想在用户重新调整标签时重新获取新数据吗？如何消除重复查询？你可以不断完善这个自定义Hook来完成所有这些操作。

4.1K1 0

Nest 实现 GraphQL 版 TodoList

用 docker 把 mysql 跑起来：从 docker 官网下载 docker desktop，这个是 docker 的桌面端：跑起来后，搜索 mysql 镜像（这步需要科学上网），点击 run...: Int } 语法比较容易看懂，就是定义数据的结构。在 Query 下定义查询的接口，在 Mutation 下定义增删改的接口。...然后在 App.tsx 里用 useQuery 发请求： import { gql, useQuery } from '@apollo/client'; const getTodoList = gql...dev 这里涉及到的跨域，现在后端服务里开启下跨域支持：可以看到，返回了查询结果：然后加一下新增：用 useMutation 的 hook，指定 refetchQueries 也就是修改完之后重新获取数据...相比 restful 的版本，graphql 只需要一个接口，然后用查询语言来查，需要什么数据取什么数据，更加灵活。业务开发中，你会选择用 GraphQL 开发接口么？

1391 0

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

因此，它对如何请求远程数据没有什么建议。如果要通过 HTTP 请求数据并将其发送到 Web API，可以考虑下面四种方法。...在现实世界中， HTTP 调用看起来更像这样。...要点是，所有的 HTTP 调用都是通过纯 JavaScript 函数处理的，存储在一个文件夹中。...那么如何创建一个自定义 useFetch 钩子来简化我们的 HTTP 调用呢？...、如果客户端的连接不可靠，如何重新获取？你想在用户重新调整标签时重新获取新数据吗？如何消除重复查询？你可以不断完善这个自定义Hook来完成所有这些操作。

2.3K3 0

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

目前，当涉及到管理控制台中的用户身份验证时，应用程序仍然依赖于测试数据。在本节中，我们将构建应用程序的身份验证系统，允许用户认证并访问受保护的资源在管理控制台中。...# 身份验证系统 # 流程梳理大致流程如下：用户通过提交登录表单并携带登录凭证向 /auth/login 发起请求如果用户存在且凭证有效，则返回包含用户数据的响应。...除了响应数据之外，还将附加一个 httpOnly cookie，从此时起用于身份验证请求每当用户进行身份验证时，我们将从响应中的用户对象存储在 react-query 缓存中，并使其对应用程序可用由于身份验证是基于...cookie 的，带有 httpOnly cookie，因此我们不需要在前端处理身份验证令牌，任何后续请求都将自动包括令牌调用 /auth/me 接口将处理页面刷新后的用户数据持久化，该接口将获取用户数据并将其存储在相同的...@/features/auth"; 另外，在 src/pages/dashboard/jobs/index.tsx 中，我们将使用 useUser hook 来获取用户数据： // src/pages

1.5K2 0

使用react的7个避坑案例

当然，我们现在讨论的是React 在React中，我们可以创建一个很多内容的组件，来执行我们的各种任务，但是最好是保证组件精简 -- 一个组件关联一个函数。...直接更改state 在React中，状态应该是不变的。如果你直接修改state，会导致难以修改的性能问题。...如果你在设置一个值之后就去访问它，那么你可能不能立马获取到该值。...频繁使用Redux 在大型的React app中，很多开发者使用Redux来管理全局状态。虽然Redux很有用，但是没必要使用它来管理每个状态。...比如我们想更改组件中的表单按钮状态的时候，我们更多的是优先考虑state方法或者useState钩子。 7. 组件没以大写字母开头命名在JSX中，以小写开头的组件会向下编译为HTML元素。

6412 0

为什么我不再用Redux了

Redux 是 React 生态系统中的革命性技术。它使我们能够在全局范围内存储不可变数据，并解决了在组件树中 prop-drilling 的问题。...现在，异步获取数据意味着数据必须位于两个位置：前端和后端。我们必须考虑如何在全局范围内以最佳方式存储这些数据，以便它们能对我们的所有组件都可用，同时保持数据缓存以减少网络延迟。...、缓存和无效化，只是加载数据并在加载时将其存储在全局存储中而已。...https://react-query.tanstack.com/docs/overview 现在，无论需要什么数据，你都可以将 useQuery hook 与你设置的唯一键（在本例中为“todos”）...https://swr.vercel.app/ 在大多数情况下，选择任何一个库都没什么问题。不管它们谁会在不久的将来成为事实规范，从它们中重构都要比 Redux 那堆乱麻要简单许多。

2.6K2 0

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

你将在本系列中发现更多关于它的内容，学习如何使用它，并欣赏其在 React 应用程序中的简洁性。 useQuery 第一个核心概念是 useQuery。...通过它，你可以以一种非常简单的方式从源中检索数据并处理此请求的所有状态。...这些 hooks 可用于了解应用程序中是否存在获取请求或突变请求正在进行。如果需要创建一个全局的加载器，在存在一个或多个请求进行时出现，它们就会很有用。但是你如何使用它们呢？...你可以从库中导入该 hook 并在组件中使用。该 hook 仅返回一个布尔值，表示应用程序中是否存在一个或多个获取请求。因此，你可以根据这些数据决定是否显示加载器。Easy peasy！...你可以检查状态中保存的数据，不同的查询有多少应用程序部分使用等等。你也可以重置状态或删除部分状态以重新获取数据。

3.8K4 2

使用Django和GraphQL实现前后端分离架构教程

/models.py中定义文章模型。...：python manage.py makemigrationspython manage.py migrate八、定义GraphQL Schema在blog应用中创建schema.py文件，并定义GraphQL...配置Apollo Client：在src目录下创建ApolloClient.js文件。...import React from 'react';import { useQuery, gql } from '@apollo/client';const GET_POSTS = gql` query...本文通过一个简单的博客系统示例，详细介绍了如何使用Django和GraphQL实现前后端分离，希望能对你的项目开发有所帮助。我正在参与2024腾讯技术创作特训营最新征文，快来和我瓜分大奖！

2220 0

Hooks + TS 搭建一个任务管理系统（七）-- 任务组页面实现

数据的获取在这里我们需要获取到我们的任务数据，在这里我们需要写一个获取数据的 custom hook： useEpics ，和其他获取数据的 hook 一样我们接收一个 param 数据对象，通过...useQuery 发送请求再复习一下，它的第二个参数是一个异步事件，第一个参数是元组，当依赖项 param 发生改变时，会重新发送请求，更新缓存中的 epics 数据内容 export const...id }) 这样我们就实现了数据的获取接下来我们来看看如何在组件中使用这两个数据的对于 epics 它作为我们需要渲染的主内容，需要通过 List.Item 进行渲染在 List 组件中，我们可以传入我们的数据源...} 组件，否则在页面第一次加载时会报错在 Drawer 组件中同样的我们采用了 Form 组件，当表单提交时自动调用 onFinish 方法，处理添加请求 const onFinish = async...，但是由于我们采用了乐观更新，这里其实只要写入缓存中就会关闭窗口了同时为了让 Form 表单在窗口关闭时自动清空，这里我们采用了 useEffect 来实现，在依赖项中写入 visible 监听变化

9032 0

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

在之前，了解了如何设置模拟 API，而在本节中，将学习如何通过应用程序消费 API。当我们提到 API 时，指的是 API 后端服务。...我们将学习如何在客户端和服务器上获取数据，对于 HTTP 客户端，我们将使用 Axios，并使用 React Query 库来处理获取到的数据，它允许我们在 React 应用程序中处理 API 请求和响应...，可以将数据在 React 组件中使用。...API 获取数据一次，那么这样做是可以的，但在大多数情况下，我们需要从许多不同的地方获取数据。...对于每个查询，我们需要提供相应的查询键，用于将数据存储在缓存中。这也有助于请求的去重。如果我们从多个地方调用相同的查询，它将确保 API 请求仅发生一次。

1.5K2 0

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

util 文件夹内，这个文件夹中的 hook 都是一些复用性高的，和页面关系不大的 hook 1. useKanbans 这里获取数据的方法和前面获取项目数据的方法一样，我们采用 useQuery 来进行缓存看板数据...data: param })) } 封装好了 usekanbans ,我们已经能够获取项目中的看板数据了，接下来我们在封装一个 custom hook 来获取 projectId ，以实现 useKanBans...useProjectIdInUrl() }) 5. useTasks 接着我们需要来获取 task 数据，也就是我们这个项目的任务数据和获取 kanban 数据一样，我们需要采用 useQuery 来处理...中获取数据，在这里我们需要十分明确，这个我们的这个组件它只是渲染一列，我们通过遍历实现多列，这个很关键我们在 column 中获取所有的 task 数据，通过 filter 方法，将它筛选出来，这样...进行等待执行结果 const onCancel = () => { close() form.resetFields() } const onOk = async () => { // 获取表单数据

7494 0

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

对于大部分前端应用而言，类型往往常被忽略的，这就导致不知道这个请求的提交参数、响应结果有什么数据字段。...tRPC，并参阅了一些基本示例与实践一段时间后发现 trpc 和 http 的应用场景可以说非常相似，完全可以使用 trpc 来替代 http，只不过写法上从发送 http 请求 ⇒ 调用本地函数（...（至于如何创建 Github OAuth Apps，在我之前的文章以及外面诸多文章中都有介绍到，这里不在演示了，附上配置图）图片首先在server/auth.ts 中导入import CredentialsProvider...当上述在设置完毕后，点击 Sign in 按钮便可跳转到 next-auth 所提供的简单登录表单。...如今 Vercel 应该也已经家喻户晓了，因此这里就不演示如何部署，可到 Vercel • Create T3 App 中查看相关步骤。

2K2 0

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

在基于类的组件中，我们会说它在生命周期方法和自定义方法中。在功能组件中，它只是 JSX 之上的东西。在某种程度上，Hooks 的故事与 React 及其先前用于共享代码的 API 的故事密切相关。...我们应该称之为函数组件，因为...他们有计划 2018 Hooks 从本质上讲，Hooks 只是我们可以从函数组件中调用的函数。...下面是一个使用自定义钩子共享数据获取逻辑的示例。你不必完全了解如何使用 useState 和 useEffect ，只需要了解它们为组件执行一些逻辑，我想共享它。...如果另一个组件也想根据 productId 获取产品，那么需要重新编写下面高亮的代码：这里是相同的逻辑移至自定义钩子。...如果你想要一个获取数据的自定义 Hook，推荐来自 React Query 的自定义钩子，名为 useQuery() 。如今，如果你愿意，你仍然可以使用类。如果你觉得它们更容易使用，那完全取决于你。

1.5K2 0

react-query从拒绝到拥抱

其次他并不限定你使用发起请求的库，所以你可以使用任何你想使用的请求方式，再次强调，他是一个管理高手，他把数据获取从混乱变成秩序，从复杂变成简单，从讨厌变成喜欢。...好吧，现在让我来带你一步步卸下他复杂的面具，以及他是如何改变了数据请求的方式。...首先，先来看看过去我们是如何获取请求数据的： import { useEffect, useState } from "react"; import axios from "axios"; export.../tannerlinsley/react-query") ); if (isLoading) return "数据获取中...//true表示数据在获取的路上 error,//错误对象，如果存在则包含相关的错误信息 refetch，//这个还挺实用的，你可以在需要的地方或需要更新数据时调用，则会触发这个请求，比如

2.7K3 1

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭