从数据库中useQuery gql一次，然后在第一次请求后从缓存中执行一次。 - 腾讯云开发者社区

文章/答案/技术大牛

发布

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

编写前端组件现在，我们在React组件中使用Apollo Client执行查询和变更：// App.jsimport React from 'react';import { gql, useQuery,...层次结构允许一次请求获取多个级别的数据。...客户端代码示例（使用Apollo Client）import { gql, useQuery } from '@apollo/client';const GET_USERS_AND_POSTS = gql...我们使用useQuery从GraphQL服务器获取数据，并渲染用户和他们的帖子信息。...这就是GraphQL查询、类型系统和层次结构在实际应用中的体现。

1.4K1 0

Nest 实现 GraphQL 版 TodoList

用 docker 把 mysql 跑起来：从 docker 官网下载 docker desktop，这个是 docker 的桌面端：跑起来后，搜索 mysql 镜像（这步需要科学上网），点击 run...然后还会生成 client 代码，用来连接数据库操作这个表。...可以看到，这次执行的 sql 就是 create table 建表语句：这时候数据库就就有这个表了：接下来我们就可以在代码里做 CRUD 了。...@Body() 注入请求体，@Query 拿路径中的参数：把服务跑起来试一下： npm run start:dev 首先是 list，现在没有数据：然后添加一个：服务端打印了 insert into...然后在 App.tsx 里用 useQuery 发请求： import { gql, useQuery } from '@apollo/client'; const getTodoList = gql

8451 0

您找到你想要的搜索结果了吗？

是的

没有找到

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

这将使它们在将来需要的任何地方都可以使用，无论是用于 Service Worker、缓存 API 还是其他处理或修改请求和响应的类似功能，或者任何可能需要您编写程序来生成响应的地方。...在大多数 React 应用程序中，通常需要计算数据或从 API 获取数据。...有几种方法可以在 React 中实现数据缓存。...简单来说，Memoization 是指将结果存储在内存中。Memoization 函数通常更快，因为如果使用相同的参数再次调用函数，则不会重新执行函数，而是从缓存中获取结果。...从 API 缓存的数据可以存储在我们的状态管理中，然后在我们的应用程序中全局使用。尽管数据被缓存，但在刷新页面时，它将丢失数据，需要重新获取。

2.1K2 0

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

在本指南中，我们将介绍如何将 GraphQL 无缝集成到您的 React.js 项目中。什么是 GraphQL？GraphQL 是用于 API 的查询语言，也是用于执行那些查询的运行时。...React 应用程序中管理状态并进行 GraphQL 请求。...React 组件中使用 GraphQL 获取数据现在，让我们使用 GraphQL 在 React 组件中获取数据。...创建一个新组件，例如 PostList.js：// src/components/PostList.jsimport React from 'react';import { useQuery, gql...我们使用 @apollo/client 中的 useQuery 钩子执行 GET_POSTS 查询。

1.8K4 0

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

文章系翻译，原文见阅读原文你肯定看过（或写过）这样的渲染模式：通过AJAX请求数据时渲染一个loading占位图标当数据返回后重新渲染组件让我们一个使用Fetch API的简单例子： import...为了减少重复请求，我决定使用LocalStorage缓存服务端数据。这是否意味着同样的渲染逻辑要重复写n次呢？...同样，只需要简单修改useSomeData而无需改动业务组件： import { gql, useQuery } from '@apollo/client'; const FETCH_SOME_DATA...就像经典的依赖倒置原则（SOLID中的D）。尽管并非面向对象，但我们定义了一个抽象接口，并基于其实现了该接口的类。 useSomeData实际上为使用他的业务组件提供了一个接口。...理论上来说，只要定义合适的接口，就能将UI从数据层解耦出来，并随时迁移到任何数据层上。 ? 点击这里留言

8782 0

你的useEffect真的在「同步」吗？为什么React开发者集体掉进了状态管理的陷阱

数据缓存策略：用户访问过某个列表后离开再回来，你得自己决定是重新请求还是用之前的数据缓存过期判断：什么时候算数据"太旧了"需要重新获取？...更关键的是： ✅ 自动去重：同时多个组件请求同一个categoryId的数据？只发一次请求 ✅ 自动缓存：用户切换分类再切回来？...直接使用缓存，不会闪加载中 ✅ 智能刷新：5分钟内数据被认为是新鲜的，不会重新请求；超过5分钟后会后台刷新 ✅ Tab激活刷新：用户从其他Tab回来时会自动检查数据是否需要更新 ✅ 没有竞态条件：内部自动处理了请求的顺序问题...gcTime: 10 * 60 * 1000, // 「生存期」：未使用的数据10分钟后从内存删除 } 这两个概念经常被混淆： staleTime：从查询执行完毕开始计时，在这个时间内如果再次请求同一数据...超过这个时间后，标记为「陈旧」，下次有组件请求时会在后台重新获取。 gcTime：内存中的缓存何时被彻底清理掉。如果用户3分钟都没有用到某个查询，那么在gcTime过期后，这份缓存就会被垃圾回收。

2321 0

react-query从拒绝到拥抱

其次他并不限定你使用发起请求的库，所以你可以使用任何你想使用的请求方式，再次强调，他是一个管理高手，他把数据获取从混乱变成秩序，从复杂变成简单，从讨厌变成喜欢。...当我第一次开始使用的时候，就对他有了偏见，难学！上手并不是很友好，不符合我过去获取数据的直觉和经验，但奇怪的是却极受开发者欢迎。由于过去的经验和靠表面的直觉差点就让我错过了如此棒的库。...QueryClient非常强大，它也可以对query进行全局配置，操作缓存，移除或重置query等等重点我在项目中，一般只需要用到Queries和Mutations，这两个足以满足大部分网络请求的需求...下面来看下Queries的配置对象 Queries options 配置对象就是第3个参数，它是一个对象，这个配置对象在useQueries，useInfiniteQuery中也相同,这个对象有数十个参数可供配置...,{ enabled, //默认为true，表示自动请求，false的话则需要你手动 retry, //请求失败后，请求的重试次数，也可以为boolean，true为无数次重试，false

3.2K3 1

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

你将在本系列中发现更多关于它的内容，学习如何使用它，并欣赏其在 React 应用程序中的简洁性。 useQuery 第一个核心概念是 useQuery。...通过它，你可以以一种非常简单的方式从源中检索数据并处理此请求的所有状态。...然后是配置项，这些很简单啦 :) 有许多可能的选项用于以不同的方式运行查询（重试次数、何时刷新数据、如何缓存数据等等..）。...请注意数据也可能为 undefined；这是因为在第一次调用时，当请求处于等待状态时，data 尚未呈现。 isLoading：这个标志表示 React Query 正在加载数据。...这些 hooks 可用于了解应用程序中是否存在获取请求或突变请求正在进行。如果需要创建一个全局的加载器，在存在一个或多个请求进行时出现，它们就会很有用。但是你如何使用它们呢？

6.6K4 2

这几个为 vue 设计的 vite 插件，你一定要知道！

vite-plugin-vue-gql vite-plugin-vue-gql 允许在 Vue SFC 中使用 gql> 标签定义 GraphQL 查询、变更和订阅。...npm install -D vite-plugin-vue-gql npm install @urql/vue graphql 在 vite.config.ts 中： import { defineConfig...组件导入，同时支持在 Markdown 中嵌入 Vue 组件，适合文档密集型项目。...vite-plugin-style-vw-loader'; export default defineConfig({ plugins: [vitePluginStyleVwLoader(), vue()], }); 这样配置后内联样式中的...vite-plugin-vue-style-in-template'; export default defineConfig({ plugins: [vue(), styleInTemplate()], }); 配置后支持在模板中定义样式并提取

5211 0

边缘服务的一致性、耦合和复杂性

由于解析器位于属性级别，而且获取底层数据的机制可能一次性获取多个属性，因此存在重复获取相同数据的可能性，造成了浪费。这就是所谓的 N+1 问题。后端代码应该用某种类型的请求缓存来缓解这个问题。...基于生存时间值 (TTL)、最近最少使用原则 (LRU) 的缓存在 GQL 中的作用是有限的。因为有效载荷是可以灵活指定的，所以很难实现高命中率和低脏读率的高效缓存。...Apollo GraphQL 框架支持在 schema 中使用缓存提示注解或在解析器中动态设置，这可以通过浏览器端缓存或内存缓存或外部缓存 (如 Memcached 或 Redis) 来实现。...在 RESTful API 中，客户端指定路径，可能是查询字符串参数，可能是身份验证，仅此而已。而在 GQL 中，客户端必须指定有效载荷是什么样子的。...在生产环境中，后端软件通常运行在数据中心（如公有云）的服务器上。后端又被进一步分为数据、边缘和集成服务。数据服务为数据库提供保护、执行业务规则、维护一致性，并专注于可伸缩性、性能和潜在的弹性问题。

1.3K1 0

基于 actix、async-graphql、rbatis、pgsqlmysql 构建 GraphQL 服务（4）-变更服务

前 3 篇文章中，我们初始化搭建了工程结构，选择了必须的 crate，并成功构建了 GraphQL 查询服务，以及对代码进行了第一次重构。...表名可以自定义的，然后在 rbatis 中指定即可。...再者，我们将 NewUser 结构体插入 mysql/postgres 数据库后，应当返回插入结果。...第二次验证打开方式和注意事项和第一次验证相同。正常启动后，如果你此时通过 graphiql/playgound 界面的 docs 选项卡查看，将看到查询和变更服务的列表都有了变化。...此实例源码仓库在 github，欢迎您共同完善。下篇计划变更服务开发完成后，后端我们告一阶段。

1.5K3 0

干货 | 携程基于 GraphQL 的前端 BFF 服务开发实践

只有面向内部用户的服务，才允许 GraphQL 服务直接访问数据库或者缓存。对 RESTful API 服务来说，每次接口调用的开销基本上是稳定的。...我们在一次 GraphQL 查询中，通过这些关联字段，获取到所需的数据，而不必再次发起请求。...如果需要一次性获取，我们一般要设计一个批量接口。但利用 GQL 合并多个查询请求的特性，我们可以用更好的方式一次获取。...即在 GQL 内单独实现查询，然后由客户端发起一次“总查询”实现服务端聚合，这样的方式避免了 BFF 层因为前端需求变更不停跟随修改的困境。...在这个过程中可以实现相同的请求合并只发一次。六、工程化实践 6.1 异常处理在 GQL 关联查询中父节点失败导致子节点异常的情况很常见。

3.2K2 0

前端性能优化实用方案（二）：并行加载让接口响应速度提升3倍

} // 合并多个小接口到一个请求 async batchFetch(requests) { return new Promise((resolve) => { // 将请求添加到批次中...一次查询就能拿到所有需要的数据。...// 使用GraphQL一次性获取多种数据import { gql } from '@apollo/client';// 合并查询const DASHBOARD_QUERY = gql` query...接口合并能减少网络请求数量，但要注意不要过度合并，影响缓存策略。虚拟滚动和分批渲染在处理大量数据时性能提升很明显，可以支持数万条数据流畅滚动。...下一篇我们会讲缓存策略和资源预加载，这些技术在提升用户体验方面效果更加明显。

2782 0

Nebula 架构剖析系列（二）图数据库的查询引擎设计

摘要上文（存储篇）说到数据库重要的两部分为存储和计算，本篇内容为你解读图数据库 Nebula 在查询引擎 Query Engine 方面的设计实践。...客户端第一次连接到 Query Engine 时需作认证，当认证成功之后 Query Engine 会创建一个新 session，并将该 session ID 返回给客户端。...图数据库目前没有统一的查询语言国际标准，一旦 ISO/IEC 的图查询语言（GQL）委员会发布 GQL 国际标准，nGQL 会尽快去实现兼容。...当抽象树 AST 被转换成执行计划时，所有 ID 信息会被抽取出来以便执行计划的复用。这些 ID 信息会放置在当前请求 context 中，context 也会保存变量和中间结果。...执行层的每个执行器一次只处理一个执行计划，计划中的 action 会挨个一一执行。执行器也会一些有针对性的局部优化，比如：决定是否并发执行。

1.1K2 0

构建 Rust 异步 GraphQL 服务：基于 tide + async-graphql + mongodb（4）- 变更服务

在构建 Rust 异步 GraphQL 服务：基于 tide + async-graphql + mongodb（3）- 第一次重构之后，因这段时间事情较多，所以一直未着手变更服务的开发示例。...依赖项更新自构建 Rust 异步 GraphQL 服务：基于 tide + async-graphql + mongodb（3）- 第一次重构之后，已经大抵过去一个月时间了。...示例中，我们以模型 -> 服务 -> 总线的顺序来开发。这个顺序并非固定，在实际开发中，可以根据自己习惯进行调整。...cred 是计划使用 PBKDF2 对密码进行加密（salt）和散列（hash）运算后的鉴权码，需要定义，但无需在新增是填写。...第二次验证打开方式和注意事项和第一次验证相同。正常启动后，如果你此时通过 graphiql/playgound 界面的 docs 选项卡查看，将看到查询和变更服务的列表都有了变化。

1.9K3 1

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

我们将学习如何在客户端和服务器上获取数据，对于 HTTP 客户端，我们将使用 Axios，并使用 React Query 库来处理获取到的数据，它允许我们在 React 应用程序中处理 API 请求和响应...它支持在浏览器和服务器端使用，并且具有创建实例、拦截请求和响应、取消请求等功能的 API。我们首先要创建一个 Axios 实例，其中包含一些我们希望在每个请求上执行的通用操作。...React Query 的另一个好处是它的缓存机制。对于每个查询，我们需要提供相应的查询键，用于将数据存储在缓存中。这也有助于请求的去重。...如果我们从多个地方调用相同的查询，它将确保 API 请求仅发生一次。...对于每个 API 请求，我们都将有一个文件，其中包含并导出 API 请求定义函数和用于在 React 中使用请求的 hook。

2K2 0

Pinia党福音，Pinia伴侣：pinia-colada

官方的功能介绍如下： ⚡️ 自动缓存：智能的客户端缓存，支持请求去重 ️ 异步状态管理：轻松处理任何异步状态插件系统：强大的插件系统 ✨ 乐观更新：轻松实现乐观更新合理的默认配置：提供合理的默认值...此外，它还提供了 defineQuery 和 defineMutation，用于在 Pinia Store 中定义查询和修改操作。...❝和 vue-use等库提供的useAxios类库不同，pinia-colada是借助 pinia 缓存请求，自带缓存。...） // 便捷别名 error, // 错误信息 data, // 请求成功后的数据 status, // 当前状态（idle、loading...会自动重新获取数据 todoId.value = 2; ❝动态 key 的作用: 当 key 变化时，useQuery 会自动重新执行查询函数。

6271 0

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

用户交互的中间状态服务端状态在陈年的老项目中，通常用Redux、Mobx这样的「全局状态管理方案」无差别对待他们。...不仅如此，React-Query还为我们做了如下工作：多个组件请求同一个query时只发出一个请求缓存数据失效/更新策略（判断缓存合适失效，失效后自动请求数据）对失效数据垃圾清理数据的CRUD由...2个hook处理： useQuery处理数据的查 useMutation处理数据的增/删/改在下面的例子中，点击「创建用户」按钮会发起创建用户的post请求： import { useQuery,...当请求成功后，会触发onSuccess回调，回调中调用queryCache.invalidateQueries，将userData对应的query缓存置为invalidate。...这样，React-Query就会重新请求userData对应query的数据。总结通过使用React-Query（或SWR）这样的数据请求库，可以将服务端状态从全局状态中解放出来。

3.1K1 0

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

key值，也可以在数组中，写入多项如：['repoData', '1'],这样React-Query在使用的时候会自动把它拼接为/repoData/1，这个在缓存用户访问过的页面时，非常有用。...queryFn：用于请求的方法，如果在QueryClient中配置了，这里可以不必再写，需要返回请求完成后所处理的数据。...除此之外，使用useQuery拉取回来的数据，会被默认缓存起来，然后可以通过配置过期时间，重新拉取等策略来进行管理。...onError: 失败的回调返回的数据和useQuery基本是相同的，这里的mutate则是触发更改的方法，如果我们想执行useMutation中传入的方法，我们只需要调用mutate即可，传给mutate...并在屏幕一角提供一个切换按钮以显示和隐藏devtools 在devtools中我们可以直观的看到已经缓存下来的数据和整个项目的配置，以及各个接口的状态等。

1.9K3 0

大厂都在用 @tanstackreact-query 到底有多好用！

以下是 React Query 的详细使用过程准备 pnpm add @tanstack/react-query 然后在根入口处使用 Provider!...请求数据 useQuery 用于数据获取，支持自动缓存、重取和错误处理！...({ queryKey: ["user", userId], // 缓存 key queryFn: () => fetchUser(userId), // 数据在缓存中保持 1...分钟为新鲜，不会重复请求 staleTime: 1000 * 60, // 数据缓存 5 分钟 cacheTime: 1000 * 60 * 5, // 请求失败自动重试...如果文章中存在错误的地方欢迎指正！往期精彩推荐有了它，我放弃了 try-finally 代码块！原来在字节写代码就是这么朴实无华！ Oxc 最新 Transformer Alpha 功能速览！

6851 0

点击加载更多

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

Nest 实现 GraphQL 版 TodoList

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

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

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

你的useEffect真的在「同步」吗？为什么React开发者集体掉进了状态管理的陷阱

react-query从拒绝到拥抱

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

这几个为 vue 设计的 vite 插件，你一定要知道！

边缘服务的一致性、耦合和复杂性

基于 actix、async-graphql、rbatis、pgsqlmysql 构建 GraphQL 服务（4）-变更服务

干货 | 携程基于 GraphQL 的前端 BFF 服务开发实践

前端性能优化实用方案（二）：并行加载让接口响应速度提升3倍

Nebula 架构剖析系列（二）图数据库的查询引擎设计

构建 Rust 异步 GraphQL 服务：基于 tide + async-graphql + mongodb（4）- 变更服务

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

Pinia党福音，Pinia伴侣：pinia-colada

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

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

大厂都在用 @tanstackreact-query 到底有多好用！

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐