Closed
Description
Version
3.10.0
Reproduction link
https://github.com/datacite/spitz
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
Metadata
Metadata
Assignees
Labels
No labels