时间戳

首页 > 解决方案 > Apollo 客户端从服务器无缝加载和合并数据

reactjs - Apollo 客户端从服务器无缝加载和合并数据

问题描述

查看示例代码：https ://www.apollographql.com/docs/tutorial/mutations/

假设登录表单突变返回 JWT 令牌以及用户配置文件。有没有办法将用户配置文件保存到客户端缓存，以便我们可以立即显示包含这些数据的“主页”页面？

换句话说，因为我们已经去服务器进行身份验证，服务器返回数据开始立即向用户显示一些东西。

我不想编写纯粹的客户端数据，例如isLoggedIn. 我想以主页可以从缓存或服务器读取的方式写入整个配置文件数据，就像我们通常使用的那样useQuery(...)

标签： reactjsgraphqlapollo-client

解决方案

我想到了。这很简单。

  const client = useApolloClient();

  const [loginUser, { loading }] = useMutation(LOGIN_USER, {
    onCompleted(result) {
      const membership = _.get(result, 'loginUser.`profile`');
      const loginUserResult = _.get(result, 'loginUser');

      sessionStorage.setItem(
        'auth', '...'
      );
      client.writeData({ data: { profile } });
    },
  });

然后当主页呈现时，配置文件数据在本地缓存中可用，graphql 不会再次请求配置文件

推荐阅读