Create Subscription and Render Result
Add subscription query
So let's define the graphql subscription to be used.
Open src/components/OnlineUsers.vue
and add the following code, below the other import.
<script>import gql from 'graphql-tag'+ const SUBSCRIPTION_ONLINE_USERS = gql`+ subscription getOnlineUsers {+ online_users(order_by: {user: {name: asc }}) {+ id+ user {+ name+ }+ }+ }+ `;
We are defining the graphql subscription query to fetch the online user data. Now let's define a smart subscription.
export default {data() {return {online_list: [{ user: { name: "someUser1" }},{ user: { name: "someUser2" }}]};},mounted() {...},+ apollo: {+ // Subscriptions+ $subscribe: {+ // When a user is added+ online_users: {+ query: SUBSCRIPTION_ONLINE_USERS,+ // Result hook+ result (data) {+ // Let's update the local data+ this.online_list = data.data.online_users+ },+ },+ },+ },}
Remove mock data
Now that we have the real data, let's remove the mock online user state
<script>import gql from 'graphql-tag'const SUBSCRIPTION_ONLINE_USERS = gql`subscription getOnlineUsers {online_users(order_by: {user: {name: asc }}) {iduser {name}}}`;export default {data() {return {online_list: [- { user: { name: "someUser1" }},- { user: { name: "someUser2" }}]};},
How does this work?
We are using the apollo
object to define the subscription query, which functions similar to queries. The online_users
prop gives the result of the real-time data for the query we have made.
Refresh your vue app and see yourself online! Don't be surprised ;) There could be other users online as well.
Awesome! You have completed basic implementations of a GraphQL Query, Mutation and Subscription. Easy isn't it?