Lwc: Add support for GraphQL client.

[NeroBlackstone]

So far, It seems that LWC has no way to work well with GraphQL.

Vue-apollo is a good example.
https://akryum.github.io/vue-apollo/

I would consider migrating from Vue.js if there is a similar solution like Vue-apollo.

[caridy]

@NeroBlackstone I hope is that someone in the community can pick this up and implement it, and if there is anything needed at the core pkg to support that, we can definitely do it.

[larkintuckerllc]

@NeroBlackstone Actually turns out that one does NOT NEED a view integration library to work with Apollo Client; does make the code a little simpler though. Here is an article that I wrote that gives a concrete example of Apollo Client with LWC.

https://medium.com/@johntucker_48673/lightning-web-components-and-apollo-client-7471457bbb16?source=friends_link&sk=38889fc78e34cccd76510ab4d49c3491

[larkintuckerllc]

Related to creating a standard view integration library (would make code more declarative), I have an open question to the folks at LWC about the best way to create cross-cutting concerns (exactly what we would want to do here). https://github.com/salesforce/lwc/issues/1332

[davidturissini]

I'm not a big fan of the approach taken in that article. What is done there works, but I think there is a better way. @larkintuckerllc lets sync and talk about approaches.

[larkintuckerllc]

@davidturissini Would love to explore an alternative approach to incorporating Apollo Client with LWC; do you have a recommended mechanism to sync and talk outside of this GitHub issue?

Also, for context, the approach I took was based on my experience in using react-apollo where you connect components directly using the Query and Mutation components (render-props pattern). The problem, however with LWC is that there does not seem to be an established pattern for developing cross-cutting concerns (thus the link to the issue above). Without such a pattern, the solution that I provided would become increasingly lengthy as one stacked up multiple queries and mutations into a single component.

At the same time, I tend to write fairly narrowly scoped components (in React) so that one component does not use more than a couple Queries and Mutations.

[davidturissini]

@larkintuckerllc Just sent you an email

[larkintuckerllc]

So, after a bit for work with @davidturissini, created another example (and supporting article) that shows a better approach.

https://medium.com/@johntucker_48673/cross-cutting-concerns-in-lightning-web-components-solved-e8eca2c4ad3?source=friends_link&sk=55ebcbb04d54e0d52c91ddccff474661

[priandsf]

We just released this open source project, see: https://blog.riand.com/2020/02/lwc-accessing-graphql-data-with-apollo.html. The code is here: https://github.com/LWC-Essentials/apollo-client. It is aligned with what @larkintuckerllc proposed.
If you feel a need in this area, please contribute to the project and let's make it rock! Ideally, we should make it on par with the React implementation, and ready for the upcoming Apollo client 3.0.

[pmdartus]

Thanks for sharing this @priandsf.