aws-mobile-appsync-sdk-js: Possible Redux/caching error - renders AppSync unusable

I take it back, the above solution is no good. It causes problems with Vue DevTools because it expects the DOM to be there and it’s not right away.

So I went with this solution:

In App.vue, in the script block:

  data() {
    return {
      hydrated: false,
    };
  },

  async mounted() {
    await this.$apollo.provider.defaultClient.hydrated();
    this.hydrated = true;
  },
});

Then simply make sure the root div in App is <div v-if="hydrated"> so that nothing mounts until hydration is complete.

Thanks @manueliglesias, you saved me from pulling my hair out 😃

Awesome, thanks for sharing your solution here @ffxsam !

Regarding contributing a guide, let me check if it is possible and how would that work

I changed the API key and made the repo private (but invited you)… didn’t want that out there for the world. 😉

@manueliglesias will do in a few minutes here. Thanks for the prompt response! I’m rebuilding a major application using AppSync and am really excited to jump in!