Aws-mobile-appsync-sdk-js: InMemoryCache?? Is this feature of Apollo supported?

[wzup]

Apollo provides configurable cache InMemoryCache. I can customize cache and supply it to my client (https://www.apollographql.com/docs/react/advanced/caching.html#smooth-scroll-top)

import { InMemoryCache } from 'apollo-cache-inmemory';
import ApolloClient from 'apollo-client';

const cache = new InMemoryCache();

const client = new ApolloClient({
  cache
});

Does your AWSAppSyncClient wrapper support this? AFAIKT it doesn't. Here is my code with Apollo's InMemoryCache, but your wrapper doesn't recognize custom cache. It doesn't throw errors but it doesn't see my custom cache either. Why?

import Amplify, { Auth } from 'aws-amplify';
import AWSAppSyncClient from 'aws-appsync';
import { InMemoryCache, defaultDataIdFromObject } from 'apollo-cache-inmemory';
import AppSync from './AppSync.js';

const cache = new InMemoryCache({
  dataIdFromObject: object => {
    console.log('[InMemoryCache][dataIdFromObject][object]', object);
    return defaultDataIdFromObject(object);
  }
});

class App extends Component {
  render() {
    const client = new AWSAppSyncClient({
      url: AppSync.graphqlEndpoint,
      disableOffline: false,
      region: AppSync.region,
      shouldBatch: true,
      auth: {
        type: AppSync.authenticationType,
        jwtToken: async () => (await Auth.currentSession()).getAccessToken().getJwtToken()
      },
      cache // herre is my custom InMemoryCache. Why AWSAppSyncClient doesn't see it?
    });
    return (
      <ApolloProvider client={ client }>
        <Rehydrated>
          <FullAppStack/>
        </Rehydrated>
      </ApolloProvider>
    );
  }
}

So
Does your wrapper support this?
How to enable?

[stock1232]

any awesome to this?

[manueliglesias]

Hi @wzup,

Internally, this SDK uses/extends InMemoryCache. The way you pass options to that cache is using the cacheOptions param like this:

const client = new AWSAppSyncClient({
  url: appSyncConfig.graphqlEndpoint,
  region: appSyncConfig.region,
  auth: {
    type: appSyncConfig.authenticationType,
    apiKey: appSyncConfig.apiKey,
  },
  cacheOptions: {
    dataIdFromObject: (obj) => {
      let id = defaultDataIdFromObject(obj);

      if (!id) {
        const { __typename: typename } = obj;
        switch (typename) {
          case 'Comment':
            return `${typename}:${obj.commentId}`;
          default:
            return id;
        }
      }

      return id;
    }
  }
});

Let us know how it goes

[sandeepbalouria]

Hi @manueliglesias

I am trying to use Apollo cache for local data and would like to do this

const client = new ApolloClient({
  cache,
  link: new HttpLink({
    uri: 'http://localhost:4000/graphql',
    headers: {
      authorization: localStorage.getItem('token'),
    },
  }),
});

cache.writeData({
  data: {
    isLoggedIn: !!localStorage.getItem('token'),
    cartItems: [],
  },
});

Thanks