Amplify-js: Multiple clients cannot share the same keyPrefix.

Created on 7 Jun 2019 · 5Comments · Source: aws-amplify/amplify-js

* Which Category is your question related to? *
Usage

* What AWS Services are you utilizing? *
Amplify, AppSync

* Provide additional details e.g. code snippets *
Hello, I am completely new to Amplify & AppSync. I have an electron app that creates a new AWSAppSyncClient in componentDidMount(), then stores it in local state. When I make a change and the app hot reloads, componentDidMount() fires again and I get the following error: Error: The keyPrefix reduxPersist: is already in use. Multiple clients cannot share the same keyPrefix. Provide a different keyPrefix in the offlineConfig object.

It appears that AppSync provides the 'reduxPersist' keyPrefix, as my application does not do so. I have tried a.) adding my own keyPrefix, and b.) removing the offlineConfig settings and adding disableOffline: true but I still get the same error. I assume I can dynamically set a keyPrefix, but that doesn't seem right.

We have a similar non-electron web app that clearly shows the keyPrefix data in dev tools, in IndexedDB > localForage - http://localhost:8080. In the electron app, with either offlineConfig settings in place or disableOffline: true, there is no data in IndexedDB, yet I get the same error.

While researching the problem, I found the following related resources:
https://github.com/aws-amplify/amplify-js/issues/3372
https://aws-amplify.github.io/docs/js/api#aws-appsync-multi-auth-1

Any direction you can offer would be greatly appreciated!

AppSync to-be-reproduced

Source

huntzu

👍1

Most helpful comment

disabling offline cant be solution, it must be another fix.

here is my code sample having the same issue
AppSync is the file which contains my config
Demo is just a component

const client = new Client({
  url: AppSync.ApiUrl,
  region: AppSync.Region,
  auth: {
    type: "API_KEY",
    apiKey: AppSync.ApiKey
  }
});

console.log(client);

const WithProvider = () => (
  <ApolloProvider client={client}>
    <Rehydrated>
      <Demo />
    </Rehydrated>
  </ApolloProvider>
);

const rootElement = document.getElementById("root");
ReactDOM.render(<WithProvider />, rootElement);

minaairsupport on 5 Jan 2020

👍2

All 5 comments

The reduxPersist keyPrefix was provided by redux-persist, which our starter project code used to configure an offline store. This caused a conflict that resulted in the issue above. I was able to resolve the issue by configuring our AppSyncClient to disable the offline store (disableOffline: true) for the development environment. It's not an ideal fix, but it works.

huntzu on 10 Jun 2019

Im going to resolve this issue since you were able to solve it yourself. Please feel free to reopen if need be.

sammartinez on 30 Aug 2019

👎1

Same problem here. @sammartinez not sure why you close this?

magnymap on 7 Dec 2019

👍1

disabling offline cant be solution, it must be another fix.

here is my code sample having the same issue
AppSync is the file which contains my config
Demo is just a component

const client = new Client({
  url: AppSync.ApiUrl,
  region: AppSync.Region,
  auth: {
    type: "API_KEY",
    apiKey: AppSync.ApiKey
  }
});

console.log(client);

const WithProvider = () => (
  <ApolloProvider client={client}>
    <Rehydrated>
      <Demo />
    </Rehydrated>
  </ApolloProvider>
);

const rootElement = document.getElementById("root");
ReactDOM.render(<WithProvider />, rootElement);

minaairsupport on 5 Jan 2020

👍2

Any update on this?