Stuck loading after page refresh

[Teddy-Schmitz]

Hi,

If I refresh the page vue-apollo seems to be stuck in a loading state, never resolving even after there is a network response from the server. I even tried with turning the server off so it would get an immediate connection refused and it still is stuck in a "loading" state. I can see the browser throwing a network error but get no errors from vue-apollo. However if I go to another link on the site (using vue-router) then everything starts working properly and data starts loading or errors are thrown as appropriate. I'm not sure if this is a problem with vue-apollo or apollo client.

Thanks!

[Teddy-Schmitz]

Some more information if I change the default fetchPolicy to cache-and-network then things start working but I start getting these errors in the console

[Vue warn]: Error in created hook: "Error: Expecting a parsed GraphQL document. Perhaps you need to wrap the query string in a "gql" tag? http://docs.apollostack.com/apollo-client/core.html#gql"

vue.runtime.esm.js?2b0e:1878 Error: Expecting a parsed GraphQL document. Perhaps you need to wrap the query string in a "gql" tag? http://docs.apollostack.com/apollo-client/core.html#gql
    at checkDocument (getFromAST.js?e703:16)
    at getOperationDefinition (getFromAST.js?e703:32)
    at getQueryDefinition (getFromAST.js?e703:53)
    at QueryManager.watchQuery (QueryManager.js?96af:382)
    at DefaultClient.ApolloClient.watchQuery (ApolloClient.js?27b0:91)
    at DollarApollo.watchQuery (vue-apollo.esm.js?522d:1223)
    at SmartQuery.executeApollo (vue-apollo.esm.js?522d:794)
    at SmartQuery.start (vue-apollo.esm.js?522d:513)
    at SmartQuery.autostart (vue-apollo.esm.js?522d:430)
    at DollarApollo.addSmartQuery (vue-apollo.esm.js?522d:1293)

They are wrapped in gql tags though

[Teddy-Schmitz]

If I change the individual query to use a different fetchPolicy rather then setting it on vue-apollo it goes back to the previous behaviour of not loading properly on refresh but the gql errors go away.

Using Vue-Apollo 3.0.0-beta.28

[fvigotti]

Hi,
I'm having a similar issue, with different setup so maybe it's the same bug anywa..

nuxt-ts / vue 2.6.6 / "@nuxtjs/apollo": "^4.0.0-rc4" -> Vue-Apollo 3.0.0-beta.28

in a vue page, into a "get apollo()" method
the query gets correctly prefetched, if I use "$prefetch : false ," the query gets correctly NON-prefetched on serverside ,
BUT :
if i use

skip:true,

or

prefetch:false,

in the query the page takes 2 minutes to load , no error logged from the node process, but then , after those 2 minutes the browser page load and there are those errors in the browser console:

fetching start 
12:42:36.759 vendors.app.js:36798 [HMR] connected
12:42:37.761 A bad HTTP response code (404) was received when fetching the script.
12:42:37.761 sw.js Failed to load resource: net::ERR_INVALID_RESPONSE

-note> then the browser-page fetch correctly the query (client side)

what is interesting, is that if i leave $prefetch: false and prefetch: false
the page is loaded immediately without prefetch on server, but the console show this error :

A bad HTTP response code (404) was received when fetching the script.
12:35:31.967 sw.js Failed to load resource: net::ERR_INVALID_RESPONSE

-note> then the browser-page fetch correctly the query (client side)

[ydfzgyj]

I have tried to fix this bug in #511 and waiting merged, but I thought the bug only appears when use SSR. I'm not sure if this PR can help you now, can you try to modify your code locally whether it works.

[Teddy-Schmitz]

No, I'm not doing SSR so this has nothing to do with either of your issues. Doing further testing it seems to have something to do with rendering inside a dynamic component. I have my main layouts all inside a dynamic component so I can change the parent layout for different pages (having topbar vs having no topbar for example). If I remove the dynamic layout and just render the content directly everything seems to work fine.

[Akryum]

Please provide a minimal runnable reproduction so I can look into this issue.