DEV Community

Play Button Pause Button
Vladimir Novick for Hasura

Posted on

Move subscribeToMore to be more declarative by moving it to the template

In this lesson we will see how we can use ApolloSubscribeToMore component to move all our query and subscriptions syntax to the template being more declarative.

Discussion (4)

Collapse
alexflorea2 profile image
Alexandru Florea

Hi Vladimir, nice series. I will admit I'm not that that familiar with GraphQL but I have a more general question.

This form of writing code, from my perspective at least, goes against any separation of concerns teachings. You are basically writing queries in a template as I understand, not services layer, not business model.

I will admit that this might seem faster, but would you mind explaining the benefits of doing this? From my knowledge, the web strived for years to compartmentalize any db or login from templates in any language, and If I were to, for example, write a query and some html in a PHP file, I believe people would set me on fire :)

My apologies If I misunderstood something here, but I felt it was necessary to ask.

Thanks!

Collapse
vladimirnovick profile image
Vladimir Novick Author

Hey. So let me elaborate on that.
GraphQL is a query language to your APIs so nothing to do with queries to database.

In our single page app on a client, we have a VueJS component file with template where we can embed other components. Whenever we want to query GraphQL endpoint basically what we do under the hood is call POST request and pass specific query GraphQL syntax to our server. In our use case it's Hasura GraphQL endpoint. Now this definitely needs abstraction as you mentioned and this abstraction is what ApolloClient is about. So it is sending requests to the server. Now ApolloSubscribeToMore or ApolloQuery component are basically components that under the hood use ApolloClient to execute this query to the server. So also an abstraction. The benefits of doing this is because you have your component as a Unit. it handles view updates and queries the server. ApolloClient handles the cache and everything.

For GraphQL in general I suggest you to check my GraphQL bootcamp where I explain what GraphQL is all about here: youtube.com/channel/UCxiXx-gMssQnY...

Collapse
alexflorea2 profile image
Alexandru Florea

Thank you for clarifying that! I definitely need to read more about the subject

Collapse
acatzk profile image
acatzk

Because of this course i build this website using only this technology the link is here twitter-vue.netlify.app/ btw i clone the twitter you can signup, login, post, follow, unfollow, comments and react. Now im ready for more complex website