web-dev-qa-db-ja.com

localStorageをapollo-clientおよびreactjsで使用する方法は？

Reactjsとapollo-clientを使用して、オンラインショップ用のカートを作成する必要があります。 localStorageでapolloクライアントを使用してデータを永続化するにはどうすればよいですか？

reactjslocal-storagereact-apolloapollo-client
2
user246328

はい、localStorageを使用してApolloクライアントキャッシュを永続化できます。 apollo-cache-persist は、InMemoryCacheおよびHermesを含むすべてのApollo Client 2.0キャッシュ実装に使用できます。

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：

enter image description here

2
Yuci

ドキュメント： 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,
  ...
});
0
abdelhedi hlel