I cannot build a Web-Component that includes vue-apollo client #4555

kjgarza · 2019-09-09T11:23:05Z

Version

3.10.0

Reproduction link

Environment info


  System:
    OS: macOS 10.14.6
    CPU: (4) x64 Intel(R) Core(TM) i7-5557U CPU @ 3.10GHz
  Binaries:
    Node: 12.8.0 - /usr/local/bin/node
    Yarn: 1.17.3 - /usr/local/bin/yarn
    npm: 6.10.3 - /usr/local/bin/npm
  Browsers:
    Chrome: 76.0.3809.132
    Firefox: 65.0.1
    Safari: 12.1.2
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0
    @vue/babel-plugin-transform-vue-jsx:  1.0.0
    @vue/babel-preset-app:  3.8.0
    @vue/babel-preset-jsx:  1.0.0
    @vue/babel-sugar-functional-vue:  1.0.0
    @vue/babel-sugar-inject-h:  1.0.0
    @vue/babel-sugar-v-model:  1.0.0
    @vue/babel-sugar-v-on:  1.0.0
    @vue/cli-overlay:  3.8.0
    @vue/cli-plugin-babel: ^3.8.0 => 3.8.0
    @vue/cli-plugin-eslint: ^3.8.0 => 3.8.0
    @vue/cli-plugin-unit-mocha: ^3.10.0 => 3.10.0
    @vue/cli-service: ^3.8.0 => 3.8.4
    @vue/cli-shared-utils:  3.8.0 (3.10.0)
    @vue/component-compiler-utils:  2.6.0
    @vue/preload-webpack-plugin:  1.1.0
    @vue/test-utils: 1.0.0-beta.29 => 1.0.0-beta.29
    @vue/web-component-wrapper:  1.2.0
    eslint-plugin-vue: ^5.0.0 => 5.2.3 (4.7.1)
    svg-to-vue:  0.4.0
    vue: ^2.6.10 => 2.6.10
    vue-apollo: ^3.0.0-rc.2 => 3.0.0-rc.2
    vue-eslint-parser:  2.0.3 (5.0.0)
    vue-hot-reload-api:  2.3.3
    vue-loader:  15.7.0
    vue-style-loader:  4.1.2
    vue-svg-loader: ^0.12.0 => 0.12.0
    vue-template-compiler: ^2.6.10 => 2.6.10
    vue-template-es2015-compiler:  1.9.1
    vue-vega: ^1.0.0-alpha.13 => 1.0.0-alpha.13
  npmGlobalPackages:
    @vue/cli: 3.8.4

Steps to reproduce

This is a build the component

vue build --target wc --name data-metrics-badge 'src/components/DataMetricsBadge.vue'

Paste this tag in the body of a webpage.

<body>
  <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
  <script src="//dist/data-metrics-badge.min.js"></script>
  <data-metrics-badge doi="10.7272/q6g15xs4" display="medium"></data-metrics-badge>
</body>

Reload the page.
An Icon should display and graphQL query would be executed populating the data next to icons.
The graphql query is never executed

In essence, the building process does not include the apolloProvider into the Web Component.

  class CustomElement extends HTMLElement {
    constructor () {
      super();
      this.attachShadow({ mode: 'open' });

      const wrapper = this._wrapper = new Vue({
        name: 'shadow-root',
        customElement: this,
        // apolloProvider,  <----------IT SHOULD BE INCLUDED HERE
        shadowRoot: this.shadowRoot,
        data () {
          return {
            props: {},
            slotChildren: []
          }
        },
        render (h) {
          return h(Component, {
            ref: 'inner',
            props: this.props
          }, this.slotChildren)
        }
      });

What is expected?

I expect the building process to pass apolloProvider to the web component.

What is actually happening?

The building process is not including apolloProvider and thuse the web component does not execute the graphQL query

The text was updated successfully, but these errors were encountered:

LinusBorg · 2019-09-10T14:25:21Z

The apolloProvider is not part of DataMetricsBadge.vue or any files that this component imports, so of course its not included in the build - none of the code requires it.

The thing is, the apolloProvider is injected into the root instance of an app, and child components can access it through an injection/global mixin.

However, even if used inside of a Vue app that has an apolloPropvider, your Vue component that is wrapped in a web component doesn't have access to these injected properties since there's not $parent.

(Additionally, no apolloProvider related code is even accessed in that component or its child components, so I'm not sure how you expect the graphql query to be triggered)

in short: web components should not depend on framework-specific side-effects like injections of dependencies. they should be totally independent.

You will have to include the apolloProvider in DataMetricsBadge.vue, or rely on the parent app to inject the data directly and have that handle apollo.

kjgarza · 2019-09-10T15:00:12Z

Thanks @LinusBorg

Apologies, I should have linked to https://github.com/datacite/spitz/tree/1b2eb869abdcc2bb9e596c4f61bd791cc2b2432a

(Additionally, no apolloProvider related code is even accessed in that component or its child components, so I'm not sure how you expect the graphql query to be triggered)

Well DataMetricsBadge.vue implements SmallWidget.vue which extends models/BaseWidget.vue. BaseWidget has the code related for apolloProvider. I guess my main problem is I don't know whete to include apolloProvider without relying on the parent app.

LinusBorg · 2019-09-10T15:04:18Z

I guess my main problem is I don't know whete to include apolloProvider without relying on the parent app.

I would think in BaseWidget - you alrady have the provider, just add it to the component options...

const apolloProvider = new VueApollo({
  defaultClient: apolloClient,
})
export default {
  name: 'BaseWidget',
  apolloProvider,
  components:{

 //....

LinusBorg · 2019-09-10T15:05:17Z

Aynway, this is not a support forum so until you figure out that this is a bug and not an unclear usage scenario of a plugin, please use the forums and other dedicated channels to ask for support.

forum.vuejs.org
chat.vuejs.org
Stack Overflow
etc.

LinusBorg closed this as completed Sep 10, 2019

This was referenced Sep 16, 2021

[Snyk] Security upgrade mocha from 6.2.3 to 8.3.0 Matthelonianxl/vue-cli#61

Open

[Snyk] Security upgrade mocha from 6.2.3 to 8.3.0 carlosrojaso/vue-cli#83

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

I cannot build a Web-Component that includes vue-apollo client #4555

I cannot build a Web-Component that includes vue-apollo client #4555

kjgarza commented Sep 9, 2019

LinusBorg commented Sep 10, 2019 •

edited

kjgarza commented Sep 10, 2019

LinusBorg commented Sep 10, 2019

LinusBorg commented Sep 10, 2019 •

edited

I cannot build a Web-Component that includes vue-apollo client #4555

I cannot build a Web-Component that includes vue-apollo client #4555

Comments

kjgarza commented Sep 9, 2019

Version

Reproduction link

Environment info

Steps to reproduce

What is expected?

What is actually happening?

LinusBorg commented Sep 10, 2019 • edited

kjgarza commented Sep 10, 2019

LinusBorg commented Sep 10, 2019

LinusBorg commented Sep 10, 2019 • edited

LinusBorg commented Sep 10, 2019 •

edited

LinusBorg commented Sep 10, 2019 •

edited