search

vuejs / apollo

🚀 Apollo/GraphQL integration for VueJS
http://apollo.vuejs.org
MIT License
6.03k stars 522 forks source link

Loading state for Subscriptions #640

Open dylanbhughes opened 5 years ago

dylanbhughes commented 5 years ago

This is a very specific feature request, so I'll preface this by saying I'm intending on PRing this myself. This issue is to give the core team a place to say "we don't want to support that because x".

My team is currently using Hasura for services and Apollo Server for our API gateway. We stitch our schema in Apollo. One of the great features that Hasura provides is automatic subscriptions for all tables in our DB. This means that subscriptions send information over websocket instead of just indicating a change to a specific piece of data. Because our data changes very rapidly and up-to-the-second information is important to our users, we've decided to use subscriptions for everything.

Because we're going with this approach, we run into a problem detecting "loading" states when reactive variables change for a subscription.

Desired behavior:

  1. Reactive variables change for a subscription
  2. this.$apollo.subscriptions.subscriptionName.loading = true until a new response is received.
  3. this.$apollo.subscriptions.subscriptionName.loading = false after a new response.

Currently, there is only a this.$apollo.subscriptions.subscriptionName.starting indicator.

If the feedback here is "you should be doing this outside of vue-apollo I'm fine with that too. But, if anyone else thinks this would be useful (or if no one tells me not to) I'd like to take a crack at it.

m0ngr31 commented 5 years ago

I'm actually needing the exact same thing.

dylanbhughes commented 5 years ago

👍 Will attempt

rnenjoy commented 5 years ago

Does this mean $apollo.loading does not work when u use sockets at all?

dylanbhughes commented 5 years ago

That's been my experience @rnenjoy

julia-suarez-deel commented 4 years ago

Do you have any guidance on a workaround for this? For example, I need to know when all the subscriptions finish the first load so I can show the view, otherwise, I should display a global loading banner. I thought I can use the "this.$apollo.subscriptions.subscriptionName.starting" of all the subscriptions to show a loading banner, what do you think about this?