GraphQL helpers

[abdonrd]

The same as with Redux, do you have any workaround about Web Components + GraphQL?

Maybe with something like apollo-client.

Thanks in advance!

[eskan]

@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();
  }

[drejohnson]

There's this also: https://github.com/bennypowers/lit-apollo

[abdonrd]

@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

[eskan]

@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 ?

[abdonrd]

@eskan That error occurs just with:

import ApolloClient from 'apollo-boost';
const client = new ApolloClient();

[eskan]

it should be related to the way you serve/package your application.
How do you serve files ?

[abdonrd]

With npm start (polymer serve), the project is built with the PWA Starter Kit.

[abdonrd]

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'

[eskan]

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>

[hashamhabib]

@abdonrd Did you manage to resolve the issue?

[abdonrd]

@hashamhabib not in a easy way for the PWA Starter Kit with ES Modules. 😕

• Exporting as ES Module Syntax (ESM) apollographql/apollo-feature-requests#81
• Exporting as ES Module Syntax (ESM) apollographql/graphql-tag#229

[eskan]

@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.