Open
Description
openedon Dec 29, 2019
Version
Reproduction link
https://github.com/chriscalo/nuxt-apollo-polling
Steps to reproduce
- Create Nuxt app (
yarn create nuxt-app nuxt-apollo-polling) - Add
@nuxtjs/apolloand create basic graphql server - Add graphql query to a
.vuepage and include apollInterval
(See the exact steps I've taken in the repro repo commits)
For example, in pages/index.vue:
<script>
import Logo from '~/components/Logo.vue'
import { User } from '~/queries/auth.graphql'
export default {
apollo: {
user: {
query: User,
prefetch: true,
// adding this `pollInterval` value causes the problem
pollInterval: 1000,
},
},
components: {
Logo
}
}
</script>What is expected ?
Adding a pollInterval to an Apollo query works without breaking anything.
What is actually happening?
Adding a pollInterval value causes the server to return empty page content. You can see this by right-clicking the page and selecting View Page Source. All of the Nuxt <scripts> and containing <div>s are there, but the page content is empty.
Here's what I see in the <body> when the pollInterval is present:
<div data-server-rendered="true" id="__nuxt"><!----><div id="__layout"><div><script>window.__NUXT__={layout:"default",data:[{}],error:null,serverRendered:true,apollo:{defaultClient:Object.create(null)},logs:[]};</script><script src="/_nuxt/runtime.js" defer></script><script src="/_nuxt/pages/index.js" defer></script><script src="/_nuxt/pages/index.a474644729814055f4ea.hot-update.js" defer></script><script src="/_nuxt/commons.app.js" defer></script><script src="/_nuxt/vendors.app.js" defer></script><script src="/_nuxt/app.js" defer></script>Compare that with what's in the <body> when the pollInterval is removed:
<div data-server-rendered="true" id="__nuxt"><!----><div id="__layout"><div><div class="container"><div><svg width="245" height="180" viewBox="0 0 452 342" xmlns="http://www.w3.org/2000/svg" class="NuxtLogo"><g fill="none" fill-rule="evenodd"><path d="M139 330l-1-2c-2-4-2-8-1-13H29L189 31l67 121 22-16-67-121c-1-2-9-14-22-14-6 0-15 2-22 15L5 303c-1 3-8 16-2 27 4 6 10 12 24 12h136c-14 0-21-6-24-12z" fill="#00C58E"></path> <path d="M447 304L317 70c-2-2-9-15-22-15-6 0-15 3-22 15l-17 28v54l39-67 129 230h-49a23 23 0 0 1-2 14l-1 1c-6 11-21 12-23 12h76c3 0 17-1 24-12 3-5 5-14-2-26z" fill="#108775"></path> <path d="M376 330v-1l1-2c1-4 2-8 1-12l-4-12-102-178-15-27h-1l-15 27-102 178-4 12a24 24 0 0 0 2 15c4 6 10 12 24 12h190c3 0 18-1 25-12zM256 152l93 163H163l93-163z" fill="#2F495E" fill-rule="nonzero"></path></g></svg> <h1 class="title">
nuxt-apollo-polling
</h1> <h2 class="subtitle">
repro for polling bug in @nuxtjs/apollo
</h2> <p>
user = user@example.com
</p> <div class="links"><a href="https://nuxtjs.org/" target="_blank" class="button--green">
Documentation
</a> <a href="https://github.com/nuxt/nuxt.js" target="_blank" class="button--grey">
GitHub
</a></div></div></div></div></div></div><script>window.__NUXT__={layout:"default",data:[{}],error:null,serverRendered:true,apollo:{defaultClient:Object.create(null,{ROOT_QUERY:{writable:true,enumerable:true,value:{user:"user@example.com"}}})},logs:[]};</script><script src="/_nuxt/runtime.js" defer></script><script src="/_nuxt/pages/index.js" defer></script><script src="/_nuxt/pages/index.8be2ffa62aee797d62e6.hot-update.js" defer></script><script src="/_nuxt/commons.app.js" defer></script><script src="/_nuxt/vendors.app.js" defer></script><script src="/_nuxt/app.js" defer></script>Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment