Support for vue-apollo smart queries?

[locopati]

This is more question than issue but maybe it deserves documenting. If you were using vue-apollo's smart queries instead of asyncData, how would you integrate the payload-extractor? Would you set the skip property from a method? Use middleware to control Apollo?

[DreaMinder]

I'd use a middleware to make axios-requests to payloads, but since you can't return data from middleware, you'd had to use vuex for that. It would be too much hassle and no guarantee that it would work. Maybe nuxt full-static mode will handle it when released? Native implementation has far less limitations.

[mapsgeek]

@DreaMinder i'm new to graphql and was just trying it then i got hit by the payload issue and trying to implement your solution

apollo: {
    article: {
      query: article,
      variables() {
        return { id: this.$route.params.id }
      }
    }
  }

this is what a smart query means right ?

[DreaMinder]

@mapsgeek I guess... I don't use apollo in nuxt-powered projects, but I have enough understanding to conclude that this smart-thing won't work well with payload-extracting hacks. Maybe try a graphql request inside of asynData instead?

Or maybe try using variables() as asyncData (make axios-request for a payload inside)? I don't think it will work though.

[mapsgeek]

@DreaMinder thanks, since there's no guarantee for it to work i guess i will look for using gridsome since it's already does that out of the box

[DreaMinder]

@mapsgeek makes sense, at least until Nuxt releases native full-static feature.

[locopati]

After much smashing and gnashing, I think I found an ugly solution to this which I'll share in case anyone finds this question and can benefit by it...

In the Smart Query, create an error handler that reloads the page. The localhost check is to keep there from being an infinite loop during development. This loop doesn't happen in the static site.

error: function(error, vm) {
          let loc = vm?.$el?.ownerDocument?.location;
          if(loc?.hostname !== "localhost") {
            loc?.reload();
          }
        }