[lit-apollo] Clarify "Usage" in README about apollo-elements HOT 7 CLOSED

Those are great suggestions and I agree the documentation should be improved. PR's are surely welcome. Thanks for the issue.

from apollo-elements.

Thank you very much, this looks super good now!

from apollo-elements.

I just found https://apolloelements.dev/lit-apollo/#/classes/ApolloQuery, which is super helpful and should be added to the README of lit-apollo too.

from apollo-elements.

That there is no link to ./cache & ./link is just making this super confusing, I normally go to Webcomponents for a simpler approach and this made me more confused and the demo is super complex as well 😅

from apollo-elements.

Thanks @kevinsimper for the notes. Not to kick the can but in our case, the majority of the DX complexity comes from apollo. Luckily for us, apollo-client 2.6.0 just landed which hopefully will provide some niceties for developers that want to bundle it. God-willing, I'll soon have some time to review the README and improve it.

from apollo-elements.

I'm still don't unterstand that part:
<connected-child id="child-component"
.client="${this.client}"
.query="${childQuery}"
>`

from apollo-elements.

@teamgroove

In that example, we are binding the ApolloClient instance down to the child component.

If in the first place, we assign the client to window.__APOLLO_CLIENT__, then it will not be necessary to explicitly bind it, which Is what I prefer.

The point of showing an example of explicitly binding is for someone who, for whatever reason, doesn't want to assign it to a global variable.

☝️ all that, it seems, should be added to the docs.

As for the query, just like we can bind a GraphQL query document in a class field, or in the constructor, you can also set it as a property on a component instance. This might be useful if you have a variety of queries which all share a common response schema, and you want to write a common display component for them:

html`
  <response-element .query="${catsQuery}"></response-element>
  <response-element .query="${dogsQuery}"></response-element>
  <response-element .query="${ayeayesQuery}"></response-element>
`

This, too, should be made explicit in docs.

I really appreciate your coming here to give your feedback. I'll reopen this issue until those points are resolved.

from apollo-elements.