Possible Redux/caching error - renders AppSync unusable

I’m getting this error

Error sending the query '<name>' Error: Can't find field <name> on object (ROOT_QUERY) undefined

I’m not sure what I’m doing wrong, but I did notice appsync in the Redux store is an empty object. Seems like the cache is trying to read from something that isn’t there.

[ffxsam]

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.

[nicokruger]

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