How to consume a graphql API with Vue - vuejs2

Pretty simple you'd think given the popularity of both, but I am encountering a few hurdles.
I am using scaphold.io to be able to quickly show off a working UI. That is, if Vue can interact with Scaphold.
I have investigated two resources:
https://github.com/kristianmandrup/vue2-apollo-scaphold
Which seems to be a Scaphold production. Tried it. Many, many vague bugs.
Then there is also:
https://github.com/Akryum/vue-apollo
But this is too much. I don't need a server, the server is on Scaphold.
I also tried building the whole thing up by using the tutorial on howtographql, but this one is also outdated.
Ideally I want to instantiate an as up to date Vue 2 app using (I guess) the npm vue-cli, then install only the required apollo (or whatever, but I guess apollo) add-ons that I need. The minimum.
Shouldn't be too hard, I'll figure it out eventually, but some help is more than welcome.

You can consume a graphql api using your favorite regular request module (ajax, fetch, axios). Take the scalphold docs for example, but in the callback do this.vueUserData = body.data.getUser;
instead of
console.log(JSON.stringify(body, null, 2));
(edited to add one gotcha I remembered: if you encounter a problem where the callback doesn't know that this is supposed to be the component, you can do var self = this before the request function, then reference self.vueUserData instead.)

Related

Marshmallow and Flask-RESTPlus, how should they be used along?

I'm using Flask-Restplus to marshal responses in a Flask server. I also began using this package to parse HTTP requests from the client, when I stumbled about this huge warning on their site:
Warning
The whole request parser part of Flask-RESTPlus is slated for removal
and will be replaced by documentation on how to integrate with other
packages that do the input/output stuff better (such as marshmallow).
I then switched to Marshmallow to validate/parse the HTTP client requests. Thus, the workflow in my server is:
Client request (HTTP GET/POST) ...
--> process request with Marshmallow and validate/format data
--> do stuff with DB (read, update, create)
--> Format output response with Flask RESTPLUS
... Client response
So far this works well. However, is this the correct way to use Flask RESTPLUS and Marshmallow along? On the marshmallow website, there is no clear direction towards a specific use of this package. The documentation just says:
Marshmallow is an ORM/ODM/framework-agnostic library for converting
complex datatypes, such as objects, to and from native Python
datatypes.
I have seen examples in the web where people use Marshmallow to format the output response, and Flask to validate expected data (with #api.expect). Which approach is better?
Also, I wonder if this even makes sense to use Flask RESTPLUS at all? It seems the only interest of this library is to have the Swagger UI doc automatically generated. Other than that, Marshmallow can do everything that Flask RESTPLUS does. So maybe I missed out something, can anyone help or comment?
Thanks
Take further notice of the warning displayed on the website:
Don’t worry, if you have code using that now and wish to continue doing so, it’s not going to go away any time too soon.
The developers will post documentation how to integrate best Marshmellow in the future.
So far this works well. However, is this the correct way to use Flask RESTPLUS and Marshmallow along? On the marshmallow website, there is no clear direction towards a specific use of this package
Flask is a microframework: what this means for you is that much of the implementation of your application is up to the programmer because it lacks most of the functionality which is common to expect in a full-fledged web application framework (eg. Django, Pyramid et al.) and there's not "one way and only one way" of doing things in it. Implementation details like data validation are up to you to provide via plugins, libraries or even implementing them yourself (not recommended).
I wonder if this even makes sense to use Flask RESTPLUS at all?
From what I've seen in the Quick start page of Flask-RESTPlus, it provides useful models that facilitates exposing REST verbs for resources, endpoints, arg parsing and data formatting. But again, this question depends mostly on you and your application requirements.

Mobx state tree getting started part 2

Does anyone know if there's a second part of the getting started available?
I can see there is an annotation about the second part but actually there is no link nor any further information about it. At least I can't find it. Anyone knows?
Next up
In part 2 of this tutorial, we will discover how to use MST life cycle hooks and local state to fetch user data from an XHR endpoint, and see how environments will help dealing with dependency injection of the parameters needed to fetch our endpoint. We will implement auto-save using MobX helpers and learn more about patches and actions event streams.
Looks like it's not yet available: https://github.com/mobxjs/mobx-state-tree/commit/877b71c202f5d78b9aff0a5f00173b3634dbb4f6#diff-a39c9f7aa728d5fa3b973bc6ba49228aR596

Why don't apollo-client's GraphQL queries appear in Chrome's XHR Network filter?

I'm using apollo-client, and I've just noticed that my GraphQL queries don't appear on the list of Network calls when the XHR filter is active.
How is this possible? GQL is just a set of semantics on top of regular old HTTP, right? It's not like a JS library can introduce a whole new networking capability.
In the first image below, you see me filtering for requests with "gra" in them; two appear: the OPTIONS call, and then the POST (which is the real meat). In the second image, I additionally filter by XHRs; the POST is gone.
The "XHR" filter says it captures "XHR and Fetch". The only alternative I can think of would be dynamically adding <script> tags to the document, and I very much doubt that's how apollo-client is managing things.
I don't know what the "json" Type is. The docs for the DevTools don't mention that type.
I think the reason for this is that Chrome's fetch capability is not simply sugar on top of the age-old XMLHttpRequest capability, and the filter option in the DevTools (which says "XHR") is either not built or not designed as an umbrella "asynchronous request" filter. I hope they change that, especially since the Type column in the Network panel can still be used to differentiate between the two.
If I had to speculate, I'd say the behavior we observe flows from the way the Network tab hooks into the underlying networking code, and fetch calls don't travel the relevant portion of the codepath that XHR does. As supporting evidence, I offer this SO answer, which highlights functional differences between XHR & fetch that might readily be explained by their being entirely separate code. (It's also possible some of these differences are a result of the fetch spec explicitly calling for behavior different from XHR.)
Finally, I'd add that we probably only noticed this with Apollo's GQL tools because apollo-client was created in a post-XHR world, and may be one of the first libraries we worked with that prefers fetch over XHR rather than using an XHR polyfill.

Using Raw Queries in a Sails App using Sequelize as ORM

I am working with a sails application that uses Sequelize as the ORM tool. Initial integration between the app and Sequelize was established via the sails-hook-sequelize plugin which can be found here. This approach has worked great so far, no problem defining and using models.
However, I hit a road block when I wanted to define a View as a Sequelize object. Sequelize doesn't (yet) have an easy way to do this. The work around I found was to execute a raw query and populate a table with the result.
Now I come to the second road block and the actual question itself. How do I simply execute a sequelize.query inside of my sails application? In stand alone node apps using sequelize I don't have a problem. However, this sails application has gotten away from me to the point where I'm not sure what object to actually call .query from! What I'm looking for is something simple like
Sequelize.query("SELECT * FROM `Document.MyView`", { type: Sequelize.QueryTypes.SELECT})
Sadly the above gives me sequelize.query is not a function
I have a connections.coffee file where the database connection is defined. It is named 'Core', however when I try Core.query I get Core is undefined
Seems like I am missing something simple and fundamental from stacking too many things on top of the other.
Alright my problems arose from the sails-hook-sequelize plugin. Luckily my answer came from that plugin as well!
"sequelize" is a global in this plugin. So don't add a sequelize = require 'sequelize'.
simply call the raw query with sequelize.query as expected (case sensitive).
Then your raw query should work! Thanks from past me.

AngularJS Protractor E2E Mocking

I have an Angular SPA retrieving its data from a node backend.
Since the node project is fully covered with tests I want to mock the Angular HTTP calls.
(I do not want to start a discussion about functional-/smoke-tests in general, thanks).
What I'd like to have is s.th. like this
Api = $injector.get('Api');
sinon.mock(Api, 'getSomethingFromServer').andRespondWith({foo: 'bar'})
assert(Api.getSomethingFromServer.wasCalledOnce);
But no matter how I can't find a nice solution.
I found several posts regarding the same issue.
For example this one.
Since protractor is changing a lot and frequently, I just like to ask here on SO if anyone found a proper solution for mocking the HTTP requests.
we are currently doing that using http://apiary.io
Besides being able to "mock" your responses, you get a nice API description as a bonus!
What we do is we run the Angular app against a proxy, which depending on whether we are in dev or in production can forward either to real backend or the one provided by apiary.
I agree with previous answer. An answer to frequent change of Protractor is to completly decorrelate the backend from the system under test, no matter if it is mock, stub, or fake.
The difficulty is to maintain a strong coherence with the real backend, but it is not said that it is more overhead than trying to maintain an always changing way of mocking with angular.