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

只有在浏览器中刷新页面时,数据才会在apollo客户端的使用请求中变得未定义

基础概念

Apollo Client 是一个用于 JavaScript 应用的 GraphQL 客户端,它提供了缓存、状态管理和实时更新等功能。当你在浏览器中刷新页面时,Apollo Client 的缓存会被重置,导致之前缓存的数据变为未定义。

相关优势

  1. 缓存管理:Apollo Client 提供了强大的缓存机制,可以减少对服务器的请求次数,提高应用性能。
  2. 状态管理:除了 GraphQL 数据,Apollo Client 还可以管理应用的状态。
  3. 实时更新:通过 WebSocket,Apollo Client 可以实现实时数据更新。

类型

Apollo Client 主要有以下几种类型:

  1. 本地状态管理:用于管理应用的内部状态。
  2. 远程数据获取:通过 GraphQL 查询从服务器获取数据。
  3. 实时数据更新:通过 WebSocket 实现实时数据推送。

应用场景

  • 单页应用(SPA):适用于需要频繁更新数据的 Web 应用。
  • 移动应用:通过 React Native 等框架,Apollo Client 也可以用于移动应用开发。
  • 物联网应用:用于管理和监控物联网设备的数据。

问题原因及解决方法

问题原因

当浏览器刷新页面时,Apollo Client 的缓存会被重置,导致之前缓存的数据变为未定义。这是因为 Apollo Client 的缓存是基于内存的,刷新页面会导致内存中的缓存丢失。

解决方法

  1. 持久化缓存:使用持久化缓存库(如 apollo3-cache-persist)将缓存数据存储在本地存储(如 localStorage 或 sessionStorage)中,这样即使页面刷新,缓存数据也不会丢失。
代码语言:txt
复制
import { ApolloClient, InMemoryCache } from '@apollo/client';
import { persistCache, AsyncStorageWrapper } from 'apollo3-cache-persist';

const cache = new InMemoryCache();

persistCache({
  cache,
  storage: new AsyncStorageWrapper(window.localStorage),
});

const client = new ApolloClient({
  uri: 'https://api.example.com/graphql',
  cache,
});
  1. 使用本地状态管理:将一些不经常变化的数据存储在本地状态中,而不是完全依赖 Apollo Client 的缓存。
代码语言:txt
复制
import { ApolloClient, InMemoryCache, gql } from '@apollo/client';

const GET_USER = gql`
  query GetUser {
    user @client {
      name
      email
    }
  }
`;

const client = new ApolloClient({
  uri: 'https://api.example.com/graphql',
  cache: new InMemoryCache({
    typePolicies: {
      Query: {
        fields: {
          user: {
            read() {
              return {
                name: 'John Doe',
                email: 'john.doe@example.com',
              };
            },
          },
        },
      },
    },
  }),
});
  1. 错误处理:在数据请求失败时,提供默认值或错误提示。
代码语言:txt
复制
import { useQuery } from '@apollo/client';
import { GET_USER } from './queries';

function UserComponent() {
  const { loading, error, data } = useQuery(GET_USER);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <div>
      <h1>{data.user.name}</h1>
      <p>{data.user.email}</p>
    </div>
  );
}

参考链接

通过以上方法,可以有效解决在浏览器刷新页面时数据变为未定义的问题。

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

相关·内容

秒杀系统设计:你系统可以应对万人抢购盛况吗?

Apollo 核心挑战是:如何应对突然出现数百倍高并发访问压力,并保证用户只有秒杀开始才能下单购买秒杀商品?接下来我们就看看 Apollo 需求与技术架构吧。...秒杀商品页面如图: 商品页面购买按钮只有秒杀活动开始变亮,在此之前以及秒杀商品卖出后,该按钮都是灰色,不可以点击。...此外,秒杀系统为了提高用户参与度和可玩性,秒杀开始时候,浏览器或 App 并不会自动点亮购买按钮,而是要求用户不停刷新页面使用户保持一个高度活跃状态。...首先,浏览器尽可能在本地缓存当前页面页面本身 HTML、JavaScript、CSS、图片等内容全部开启浏览器缓存,刷新页面的时候,浏览器事实上不会向服务器提交请求,这样就避免了服务器访问负载压力...当用户刷新页面,新 JavaScript 文件会被用户浏览器加载,根据 JavaScript 参数控制秒杀按钮点亮。

26710

H5学习之路之Web存储解决方案

我们都知道,客户端和服务器之间交互一般是请求发送过去,然后服务器端将数据传递回来,这是常规一种处理办法,但是其实我们知道,很多时候,客户端发送请求很多是重复,或者是请求数据量不大,这个时候我们选择将数据暂存在...cookie这里,登录时候常规做法,那么cookie存储只有4K,导致是用户只能请求数据时候可以,那么既然不影响性能情况下,怎么可以尽可能将更多数据存放在客户端称为了一种思路和潮流...3、浏览器隐私模式下是不可使用 4、它存储空间是变得很大,大概5M左右,那么如果什么我们都存在页面上的话,其实我们是不推荐这样使用,这样导致结果是页面变得很卡。...sessionStorage操作限制单个标签页,在此标签页进行同源页面访问都可以共享sessionStorage数据。 3) 只本地存储。...seesionStorage数据不会跟随HTTP请求一起发送到服务器,只会在本地生效,并在关闭标签页后清除数据

70210
  • React 设计模式 0x6:数据获取

    它是同构(即可以浏览器和 nodejs 中使用相同代码库)。服务器端,它使用本地 node.js http 模块,而在客户端浏览器,它使用 XMLHttpRequests。...GraphQL 提供了 API 数据完整且易于理解描述,使客户端能够精确地请求所需数据,避免了不必要数据传输,使得 API 能够随着时间推移更容易地发展,并提供了强大开发者工具。...然而,当组件重新渲染,这些数据并不总是需要重新计算或重新获取。有几种方法可以 React 实现数据缓存。...从 API 缓存数据可以存储我们状态管理,然后我们应用程序全局使用。尽管数据被缓存,但在刷新页面,它将丢失数据,需要重新获取。...它提供了许多有用功能,如数据缓存、自动重试、请求取消和突变。 React Query 目标是提供一个简单 API,让数据获取和管理变得更加容易,并且可以与现有的代码库集成。

    1.2K20

    微服务架构-实现技术之具体实现工具与框架8:Spring Cloud Config原理与注意事项

    总体架构模块分析 (三)Apollo客户端设计与运行环境介绍 参考书籍、文献和资料: ---- 注:主要只做理论性总结与分析,相关实战代码会在后面的博客中和github逐步增加。...#注意:配置多个仓库,Config Server 启动时会直接克隆第一个仓库配置库,其他配置库只有请求才会clone到本地 repos:...(二)客户端自动刷新实现 一些应用上面,不需要在服务端批量推送时候,客户端本身需要获取变化参数情况,这个时候需要使用客户端自动刷新来完成该功能。...),该类主要注入端点类,通过定时任务和刷新时间,进行配置请求刷新,添加配置后,我们将二方包引入到实际客户端应用。...(三)Apollo客户端设计与运行环境介绍 1.Apollo客户端设计 Apollo客户端实现原理: 客户端和服务端保持了一个长连接,从而能第一间获得配置更新推送。

    67610

    apollo客户端通知原理

    ,手动通知C端,然后失效缓存,也就是半自动化刷新 自动失效缓存不展开分析,半自动化刷新实现也很简单,基于Apollo客户端通知机制就可以实现,配置中心发布变更主体,然后应用层监听变更内容并做出响应操作即可...3.客户端Apollo配置中心获取应用最新配置后,会保存在内存 4.客户端会把从服务端获取到配置本地缓存一份 遇到服务不可用,或网络不通,依然能从本地恢复配置 5应用程序可以从...Apollo客户端获取最新配置、订阅配置更新通知 长连接是更新配置主要手段,定时刷新是辅助手段,避免长轮训失败造成数据更新丢失。...五、为什么使用长轮询 关于为什么使用 HTTP 长轮询,估计接触 Apollo 的人看到客户端通知实现方式都会疑惑,为什么使用这种方式,而不是其他方式?...性能足够,结合 Servlet3 异步特性,能够维持万级连接(一个客户端只有一个长连接)。直接使用 Servlet HTTP 协议,比单独用 TCP 连接方便。

    3.2K60

    http超文本协议,让http不再难懂

    缺少状态意味着如果后续处理需要前面的信息,则它必须重传,这样可能导致每次连接传送数据量增大。另一方面,服务器不需要先前信息应答就较快。...HEAD 类似于get请求,只不过返回响应没有具体内容,用于获取报头 POST 向指定资源提交数据进行处理请求(例如提交表单或者上传文件)。数据被包含在请求。...POST请求可能会导致新资源建立和/或已有资源修改。 PUT 从客户端向服务器传送数据取代指定文档内容。 DELETE 请求服务器删除指定页面。...只有解码之后可以得到Content-Type头指定内容类型。利用gzip压 缩文档能够显著地减少HTML文档下载时间。...只有浏览器使用持久HTTP连接需要这个数据

    98870

    开源配置管理中心apollo使用方法

    配置修改后只Apollo界面上变化,不会影响到应用实际使用配置 发布权限允许用户Apollo界面上发布、回滚配置 配置只有发布、回滚动作后才会被应用实际使用Apollo在用户操作发布、回滚动作后实时通知到应用...如果对配置更新时间不是那么敏感的话,可以通过定时刷新来感知配置更新,刷新频率可以视应用自身情况来定,建议30秒以上。...配置访问密钥 Apollo从1.6.0版本开始增加访问密钥机制,从而只有经过身份验证客户端才能访问敏感配置。如果应用开启了访问密钥,客户端发出请求需要增加签名,否则无法获取配置。...项目管理员打开管理密钥页面 为项目的每个环境生成访问密钥,注意默认是禁用,建议客户端都配置完成后再开启 客户端配置访问密钥 适用于1.6.0及以上版本 Apollo从1.6.0版本开始增加访问密钥机制...等优先级高于数据配置 调整ApolloPortalDB配置 配置项统一存储ApolloPortalDB.ServerConfig表,也可以通过管理员工具 - 系统参数页面进行配置,无特殊说明则修改完一分钟实时生效

    2K10

    搞dongWeb基础 看这一篇就够了!

    通过此代码,网站设计人员可设置"您所请求资源无法找到"个性页面 405 客户端请求方法被禁止 406 服务器无法根据客户端请求内容特性完成请求 407 请求要求代理身份认证,与401类似,但请求者应当使用代理进行授权...只有解码之后可以得到Content-Type头指定内容类型。利用gzip压缩文档能够显著地减少HTML文档下载时间。...只有浏览器使用持久HTTP连接需要这个数据。...注意Refresh意义是"N秒之后刷新页面或访问指定页面",而不是"每隔N秒刷新页面或访问指定页面"。...请求 服务器响应http请求浏览器得到html代码 浏览器解析html代码,并请求html代码资源(如js、css、图片等 浏览器页面进行渲染呈现给用户

    33120

    浅谈浏览器HTTP缓存机制

    IE识别到该meta标签含义,并不一定会在请求字段加上Pragma,但的确会让当前页面每次都发新请求(仅限页面页面资源则不受影响)。...如上图红框部分是再次刷新页面生成请求,这说明禁用缓存生效,预计浏览器收到服务器Pragma字段后会对资源进行标记,禁用其缓存行为,进而后续每次刷新页面均能重新发出请求而不走缓存。 2....例如在IE我们可以使用 no-cache 来防止点击“后退”按钮页面资源从缓存加载,但在 Firefox ,需要使用 no-store 才能防止历史回退浏览器不从缓存中去读取数据,故我们响应报头加上如下组合值即可做兼容处理...Chrome即使没发送请求,但只要从本地缓存取,都会在Network面板显示一条状态为200且注明“from cache”请求,其Response内容只是上一次回包留下数据。...每次你刷新页面浏览器都会重新发出这条url请求,你会发现其 Date 值是不断变化,这说明该链接没有命中缓存,都是从原服务器返回过来数据

    71520

    纯JSP实现简单登录跳转

    该对象代表了客户端请求信息,主要用于接受通过HTTP协议传送到服务器数据。(包括头信息、系统信息、请求方式以及请求参数等)。request对象作用域为一次请求。...当一个客户访问一个服务器,可能会在这个服务器几个页面之间反复连接,反复刷新一个页面,服务器应当通过某种办法知道这是同一个客户,这就需要session对象。...out out 对象用于Web浏览器内输出信息,并且管理应用服务器上输出缓冲区。使用 out 对象输出数据,可以对数据缓冲区进行操作,及时清除缓冲区残余数据,为其他输出让出缓冲空间。...待数据输出完毕后,要及时关闭输出流。 page page 对象代表JSP本身,只有JSP页面内才是合法。 ...只有页面是错误处理页面,即编译指令page isErrorPage 属性为true ,该对象可以使用。常用方法有getMessage()和printStackTrace()等。

    2.7K20

    java长轮询「建议收藏」

    服务端向页面主动推送消息业务场景下,有长轮训和websocket两种思路。...A用户打开页面,要求实时刷新数据,B用户操作新增数据,A页面刷新。...1.页面 长轮询做法是,A用户打开页面,就请求一个接口,js ajax请求设置一个超时时间,比如60s。...4.下一次轮询 而js 接口响应后,继续发起一次请求,监听下一次数据变化。 5.长轮询案列 正好看到了Apollo配置中心,配置中心服务端如何通知客户端配置发生了变化,这就用到了长轮询。...客户端从返回结果获取到配置变化namespace后,会立即请求Config Service获取该namespace最新配置。 版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。

    92310

    webpack基本配置详解_vue基础知识

    devServer 默认行为是发现源代码被更新后会通过自动刷新整个页面来做到预览,开启模块热替换功能后,刷新整个页面的情况下通过用新模块替换老模块来实现实时预览。...inline devServer 实时预览功能依赖注入到页面代理客户端去接受来自 devServer 命令和负责刷新网页工作。...devServer 会根据你是否开启 inline 来调整它自动刷新策略: 1. 如果开启inline, DevServer会在构建完变化后代码通过代理客户端控制网页刷新。 2....allowedHosts devServer.allowedHosts 配置一个白名单列表,只有 HTTP 请求 HOST 列表里正常返回,使用如下: allowedHosts: [ //匹配单个域名...overlay devServer.overlay 出现编译器错误或警告浏览器显示全屏覆盖。除了设置为 Boolean 类型之外,我们还可以传入对象进行配置。

    76330

    深入浅出webpack学习2--配置DevServer

    DevServer默认行为是发现源代码被更新后会通过自动刷新整个页面来做到实现预览,开启模块热替换功能后刷新整个页面的情况下通过用心模块替换老模块来实现实时预览。...2. inline DevServer实时预览功能依赖注入到页面代理客户端去接受来自DevServer命令和负责刷新网页工作。...如果开启inline, DevServer会在构建完变化后代码通过代理客户端控制网页刷新。 2. 如果关闭inline, DevServer将无法直接控制要开发网页。...如果你想要局域网其他设备访问你本地服务,可以启动时候带上--host 0.0.0.0.host默认值是127.0.0.1即只有本地可以访问DevServerHTTP服务。...如果8080端口已经被其他程序占有就使用8081.... 8. allowedHosts devServer.allowedHosts配置一个白名单列表,只有HTTP请求HOST列表里正常返回,使用如下

    1.1K30

    3.HTTP报文内HTTP信息

    HTTP报文主体用于传输请求或相应实体主体 .通常,报文主体等于实体主体.只有当传输中进行编码操作,实体主体内容发生变化,导致它和报文主体产生差异.报文和实体这两个术语之后会经常出现,请事先理解两者差别...通信过程,请求编码实体资源尚未全部传输完成之前,浏览器无法显示请求页面....传输大容量数据,通过把数据分割成多块,能够让浏览器逐步显示页面.这种把实体主体分块功能称为分块传输编码(chunked transfer coding)....相应,HTTP协议也采纳了多部分对象集合,发送一份报文主体内可含有多类型实体.通常是图片或文本等上传使用....客户端驱动协商(agent-driven negotiation) : 由客户端进行内容协商方式.用户从浏览器显示可选项列表手动选择.还可以利用JavaScript脚本web页面上自动进行上述选择

    68210

    重学SpringCloud系列四之分布式配置中心---上

    不知道大家有没有看过一条报道,国外某著名公司,开源代码数据库连接配置,携带了其"生产环境"数据库配置信息,导致其核心用户数据泄露。...这样当Git Repository远程仓库无法连接,就直接使用Config Server本地存储配置信息 由于配置文件是存储Git仓库,所以配置文件天然具备版本管理功能,GitHook功能可以实时监控配置文件修改...微服务客户端改造 当config server增加了登录认证之后,我们微服务客户端想要正确获取配置信息,发送请求时候也要携带用户名密码。...第二类是业务运行所需数据,比如:新建用户默认密码,重置用户默认密码。这一类配置发生变更修改就是配置数据本身,它不去影响程序其他对象,不产生其他连锁反应。...我们可以Git仓库配置一个webhook,所谓webhook作用就是每当git仓库有接收到push代码请求,都会去向自定义指定URL发送POST请求

    74610

    校招前端二面高频面试题合集

    标准模式浏览器以其支持最高标准呈现页面。BackCompat:怪异模式(混杂模式)(Quick mode),浏览器使用自己怪异模式解析渲染页面。...短轮询和长轮询目的都是用于实现客户端和服务器端一个即时通讯。短轮询基本思路: 浏览器每隔一段时间向浏览器发送 http 请求,服务器端收到请求后,不论是否有数据更新,都直接进行响应。...这种方式实现即时通信,本质上还是浏览器发送请求,服务器接受请求一个过程,通过让客户端不断进行请求,使得客户端能够模拟实时地收到服务器端数据变化。这种方式优点是比较简单,易于理解。...如果有更新,则进行响应,如果一直没有数据,则到达一定时间限制返回。客户端 JavaScript 响应处理函数会在处理完服务器返回信息后,再次发出请求,重新建立连接。...,也能更好节省函数执行开销,一个刷新间隔内函数执行多次没有意义,因为多数显示器每16.7ms刷新一次,多次绘制并不会在屏幕上体现出来。

    45600

    谈谈前端性能优化--面试版

    使用建议公共库合并:将不经常发生变化公共组件库文件进行合并;将不同页面的js文件单独合并:比如在单页面应用SPA,当路由跳转到具体页面请求页面需要js文件;如何进行文件合并使用在线网站进行文件合并...,标签页关闭之后它存储数据就会被清空,而LocalStorage数据不会被清空,这是二者区别:大小为5~10M左右;仅在客户端使用,不和服务端进行通信;接口封装较好;可对表单信息进行维护;比如添加表单过程中进行了刷新...,可以将刷新前填写信息写入SessionStorage,这样即使刷新数据也不会丢失;还有一种场景:分页表单在进行前进或后退,如果将信息保存在SessionStorage中就不会丢失;设置和获取...(客户端)和CDN服务器;其中浏览器属于private类型缓存设备,表示只有浏览器可以对资源进行缓存;CDN服务器属于public类型缓存设备,这种设备可以对源服务器上资源进行缓存。...只要服务器端资源发生变化Etag值就会改变,相比于Last-Modified字段优先级更高且更有效;当Expires值或者Cache-Control字段max-age值到期客户端会在请求头中携带

    73260

    剖析 HTTP 协议

    缺少状态意味着如果后续处理需要前面的信息,则它必须重传,这样可能导致每次连接传送数据量增大。另一方面,服务器不需要先前信息应答就较快。...HEAD 类似于get请求,只不过返回响应没有具体内容,用于获取报头 POST 向指定资源提交数据进行处理请求(例如提交表单或者上传文件)。数据被包含在请求。...Content-Encoding 文档编码(Encode)方法。只有解码之后可以得到Content-Type头指定内容类型。利用gzip压缩文档能够显著地减少HTML文档下载时间。...只有浏览器使用持久HTTP连接需要这个数据。...所请求资源未修改,服务器返回此状态码,不会返回任何资源。客户端通常会缓存访问过资源,通过提供一个头信息指出客户端希望只返回指定日期之后修改资源 305 Use Proxy 使用代理。

    87470

    怎样使用 apollo-link-state 管理本地数据

    Apollo Client 1.0 时期,这是一个可行方案。但当 Apollo Client 进入 2.0 版本,不再依赖于 Redux,如何去同步本地和远端数据变得比原来更加棘手。...我们可以使用 GraphQL mutation 来表述应用状态变化过程,而不是去发送某个 action。查询应用状态,GraphQL query 也能以一种声明式方式描述出组件所需要数据。...Apollo Link 使得 Apollo Client 管理本地数据成为可能,从一个 GraphQL 服务器获取数据,可以使用 HttpLink,而从 Apollo 缓存请求数据,则需要使用一个新...apollo-link-state 使用 @client 指令来标记只需存在于客户端本地字段,然后,apollo-link-state 会在这些字段上调用相应 resolver 方法。 ....以上这段代码通过 @client 指令将数据修改限制本地。 GraphQL 一个很让人激动功能是单个 query 向多个数据请求数据

    2.4K100
    领券