Possible Redux/caching error - renders AppSync unusable

[ffxsam]

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.

[manueliglesias]

Hi @ffxsam , where are you using the sdk? Is it Node.js, Web or React Native?

And to confirm, are you using the latest version in npm? (1.0.6 as of today)

[ffxsam]

I'm using web (front-end), with vue-apollo. I can submit a reproduction repository if it helps.

[manueliglesias]

That would be great!

[ffxsam]

@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!

[ffxsam]

@manueliglesias Here you go: https://github.com/ffxsam/try-appsync

[ffxsam]

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

[ffxsam]

Hi @manueliglesias, just wanted to check in to see how this is going. Do you need anything else from me? Is there some way I can help?

[ffxsam]

Well, that's strange! My API endpoint suddenly doesn't resolve. "Could not resolve host". I guess I'll need to delete my whole API and recreate it to get a new URL. I'll post again if this issue still persists.

EDIT: Tried a new API, the same error still occurs.

[ffxsam]

@manueliglesias I found the problem!

vue-apollo is not waiting for client.hydrated() to resolve. But using vue-apollo with another provider than AppSync works just fine. Any suggestions on how to fix this? This is obviously specific to vue-apollo. Probably the best thing would be for me to open a PR for that project that adds AppSync support, and checks for a client.hydrated function.. and if it exists, call it and wait for it to resolve before proceeding with any queries.

[ffxsam]

Solution (in Vue's main.js or main.ts):

client.hydrated().then(() => {
  new Vue({
    el: '#app',
    apolloProvider,
    i18n,
    router,
    store,
    components: { App },
    template: '<App/>',
  });
});

Turns out it was really simple once I figured out the issue! This delays the Vue app from setting up until the data has been hydrated.

[ffxsam]

BTW, could I contribute a Vue guide similar to this one? https://docs.aws.amazon.com/appsync/latest/devguide/building-a-client-app-reactnative.html

[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.

[manueliglesias]

Awesome, thanks for sharing your solution here @ffxsam !

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

[manueliglesias]

Hey @ffxsam can you send me a DM on twitter @menyao ?

We would love to chat with you about that guide :)

[ffxsam]

@manueliglesias Yep, I just followed you a few second ago. I can DM after you follow me. Thanks!

[nicokruger]

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

[lupus2k]

Hello guys...i'm working with something like this and i have the same problem...did you resolve it???

Thanks