GraphQL helpers
abdonrd opened this issue ยท 12 comments
The same as with Redux, do you have any workaround about Web Components + GraphQL?
Maybe with something like apollo-client.
Thanks in advance!
@abdonrd you can use apollo-client from web components and with lit-element.
Create an apollo client
import { ApolloClient } from 'apollo-client';
import { HttpLink } from 'apollo-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { ApolloLink, concat } from 'apollo-link';
const httpLink = new HttpLink({ uri: '/graphql' });
const cache = new InMemoryCache();
...
...
const link = authFlowLink.concat(httpLink);
export const client = new ApolloClient({
link: link,
cache
});
Import it where you need it and do query
import { client } from "./apollo-client.js";
...
constructor() {
this.actionsQuery = client.watchQuery({
query: gql`
{
actions {
date
msg
}
}
`
});
}
...
userLoggedIn({ user }) {
this.actionsQuery.subscribe({
next: ({ data }) => {
this.actions = data.actions;
}
});
}
userLoggedOut() {
if (this.actionsQuery) this.actionsQuery.unsubscribe();
}
There's this also: https://github.com/bennypowers/lit-apollo
@eskan your example doesn't work because ES Modules.
Uncaught (in promise) SyntaxError: The requested module '../../../../fast-json-stable-stringify/index.js' does not provide an export named 'default'
Another reference: apollographql/apollo-client#3571
@abdonrd this sample is a bit outdated with latest Apollo-client but it works like a charm. The error you've mentioned seems not related to apollo ?
@eskan That error occurs just with:
import ApolloClient from 'apollo-boost';
const client = new ApolloClient();
it should be related to the way you serve/package your application.
How do you serve files ?
With npm start
(polymer serve
), the project is built with the PWA Starter Kit.
Error reproduction: https://jsfiddle.net/va2uxesr/
You can see in the console:
Uncaught SyntaxError: The requested module 'https://unpkg.com/fast-json-stable-stringify@^2.0.0?module' does not provide an export named 'default'
Here i write a sample that can help you : https://stackblitz.com/edit/lit-demo-base-ts-graphql
I know it's not an easy way but you shoud think to switch to webpack instead
npm i -D webpack@latest webpack-dev-server@latest webpack-cli@latest
a simple webpack.config.js
const path = require("path");
module.exports = {
entry: {
app: "./src/components/my-app.js"
},
output: {
filename: "[name].js",
path: path.resolve(__dirname, "build"),
publicPath: "build"
}
};
and change the import in your index.html to
<script type="module" src="build/app.js" crossorigin></script>
@abdonrd Did you manage to resolve the issue?
@hashamhabib not in a easy way for the PWA Starter Kit with ES Modules.
@hashamhabib is not really an issue related to pwa-helpers or lit-element. You're able to use many other libraries to handle data : locally/remotely
Use apollo in a lit-element is not a substitute to redux. To replace redux in an apollo way, you need to use apollo-link-state https://www.apollographql.com/docs/link/links/state.html
it allows you to query local data from cache with the @client
query getState {
currentPage @client
currentUser @client {
dn
}
}
IMHO Apollo-client doesn't need helpers. Uses of Vanilla client is a perfect way to deal with apollo.