【问题标题】:How to use localStorage with apollo-client and reactjs?如何将 localStorage 与 apollo-client 和 reactjs 一起使用?
【发布时间】:2020-03-31 08:38:24
【问题描述】:

我需要使用 reactjs 和 apollo-client 为在线商店制作购物车。 如何使用 apollo-client 和 localStorage 持久化数据?

【问题讨论】:

  • 本地存储只能在客户端工作。如果您在会话之后仍在寻找持久值,那么您必须将其发送到服务器
  • 我可以在 apollo 客户端的帮助下将数据保存到 localStorage 吗?
  • 是的,您可以使用 apollo-cache-persist 来持久化缓存。您可以查看github.com/apollographql/apollo-cache-persist 给出的示例
  • 建议:可以使用 contextAPI reactjs.org/docs/context.html 或者 redux store。

标签: reactjs local-storage react-apollo apollo-client


【解决方案1】:

文档: https://github.com/apollographql/apollo-cache-persist

import { InMemoryCache } from 'apollo-cache-inmemory';
import { persistCache } from 'apollo-cache-persist';

const cache = new InMemoryCache({...});

// await before instantiating ApolloClient, else queries might run before the cache is persisted
await persistCache({
  cache,
  storage: window.localStorage,
});

// Continue setting up Apollo as usual.

const client = new ApolloClient({
  cache,
  ...
});

【讨论】:

    【解决方案2】:

    是的,您可以使用 localStorage 来持久化 Apollo 客户端缓存。 apollo-cache-persist 可用于所有 Apollo Client 2.0 缓存实现,包括 InMemoryCache 和 Hermes。

    这是一个工作示例,展示了如何使用Apollo GraphQL client 管理本地状态以及如何使用apollo-cache-persist 将缓存持久化到localStorage。

    import React from 'react';
    import ReactDOM from 'react-dom';
    
    import { ApolloClient } from 'apollo-client';
    import { InMemoryCache } from 'apollo-cache-inmemory';
    import { createHttpLink } from 'apollo-link-http';
    import { ApolloProvider } from '@apollo/react-hooks';
    import { persistCache } from 'apollo-cache-persist';
    
    import { typeDefs } from './graphql/schema';
    import { resolvers } from './graphql/resolvers';
    import { GET_SELECTED_COUNTRIES } from './graphql/queries';
    
    import App from './components/App';
    
    const httpLink = createHttpLink({
      uri: 'https://countries.trevorblades.com'
    });
    
    const cache = new InMemoryCache();
    
    const init = async () => {
      await persistCache({
        cache,
        storage: window.localStorage
      });
    
      const client = new ApolloClient({
        link: httpLink,
        cache,
        typeDefs,
        resolvers
      });
    
      /* Initialize the local state if not yet */
      try {
        cache.readQuery({
          query: GET_SELECTED_COUNTRIES
        });
      } catch (error) {
        cache.writeData({
          data: {
            selectedCountries: []
          }
        });
      }
    
      const ApolloApp = () => (
        <ApolloProvider client={client}>
          <App />
        </ApolloProvider>
      );
    
      ReactDOM.render(<ApolloApp />, document.getElementById('root'));
    };
    
    init();
    

    您可以在 my GitHub Repo 上找到此示例。

    顺便说一下,应用看起来是这样的:

    它的 localStorage 在 Chrome DevTools 中如下所示:

    【讨论】:

      【解决方案3】:

      我知道我来晚了,但我找到了使用最新版本处理此问题的完美方法:apollo3-cache-persist

      这是我的代码:(记得导入这些模块)

      const cache = new InMemoryCache();
      
      const client = new ApolloClient({
          //your settings here
      });
      
      const initData = {
        //your initial state
      }
      client.writeData({
          data: initData
      });
      
      //persistCache is asynchronous so it returns a promise which you have to resolve
      persistCache({
          cache,
          storage: window.localStorage
      }).then(() => {
          client.onResetStore(async () => cache.writeData({
              data: initData
          }));
          
      });
      

      更多信息请阅读documentation这里,它将帮助您快速设置。

      【讨论】:

        猜你喜欢
        • 2021-01-11
        • 2018-09-05
        • 2018-07-04
        • 2017-12-22
        • 1970-01-01
        • 2021-06-25
        • 1970-01-01
        • 2017-12-25
        • 1970-01-01
        相关资源
        最近更新 更多