Comments (24)
adding apollo configuration like following helps:
posts: {
query: postsQuery,
loadingKey: 'loading',
watchLoading(isLoading) {
// TODO: remove this hack after resolving: https://github.com/Akryum/vue-apollo/issues/13
this.loading = isLoading;
}
},
but this shouldn't be required IMO.
from apollo.
Won't you mind sharing your app code?
from apollo.
here it is https://github.com/matteodem/vue-apollo-loadingkey-bug, see https://github.com/matteodem/vue-apollo-loadingkey-bug/blob/master/src/app/components/About.vue#L43 for initialized loading value
from apollo.
any idea how to solve this?
from apollo.
Well I can't launch your app, I'll have to make a SSR version of frontpage when I have time.
Specified access path not found
from apollo.
oh. seems to work on OSX. isn't the simple reprodctuon description I have sufficient?
To reproduce, change 0 to 1 or true in here https://github.com/Akryum/frontpage-vue-app/blob/master/src/PostList.vue#L48.
It should just display "loading" and not load the data from the graphql endpoint.
from apollo.
The problem is here: https://github.com/Akryum/vue-apollo/blob/master/src/vue-plugin.js#L160
Do you remember any reason the if
is in there?
from apollo.
If you don't define loadingKey
in the apollo options.
from apollo.
ah yes. ignore that sorry
from apollo.
What's the reasoning behind using numbers instead of booleans for the loading key?
from apollo.
So that you can have multiple queries for one loading spinner. 😸
from apollo.
I guess it's just weird to me that the counter is set to 1 even before the component is mounted / rendered. That's why on the server it renders it with false (as in 0) and then the mismatch happens on the client.
Do you have any suggested solution to this? I'll happily submit a PR later today
from apollo.
The q
function is called the first and then every time Vue dispatch a change in the reactive data inside the variables
function. This in turns increment your loadingKey
property. This means that as soon as your component's created
is called, a query is sent and the counter equals 1
. It may be the reason you have a mismatch in the HTML, since it was 0 on the server, and before the component is mounted it will be 1.
from apollo.
We may have to make a server-side version of the package to increment the value of loadingKey
for each query defined on the component only on the server, so it matches the client.
from apollo.
We could also add the option to run the queries on the server. What results do you get by installing the Vue plugin in your server-side code too?
from apollo.
I get errors when running it on the server
from apollo.
Error sending the query undefined ReferenceError: fetch is not defined
at HTTPBatchedNetworkInterface.HTTPFetchNetworkInterface.fetchFromRemoteEndpoint (/Users/Matteo/Projects/personal/relaxstack/kits/standard/src/networkInterface.ts:186:12)
from apollo.
Since fetch
is only available in a browser, try installing node-fetch and exposing it globally:
import fetch from 'fetch'
global.fetch = fetch
from apollo.
awesome! so with loading: false
by default it now loads all the data on the server side before delivering the result. Even though that's great, it doesn't serve the same markup on the client.
(on the client it's loading for a split second and on the server it's not loading at all as it already has the data)
from apollo.
probably need to get this to work with vuex to have a consistent state on the server and client. unless you have another idea
from apollo.
Could you try with the latest version of vue-apollo
?
from apollo.
What can I try?
from apollo.
If there are still issues with loadingKey
like described in the original post, since I rewrote that feature recently.
from apollo.
Please re-open if you still have this issue.
from apollo.
Related Issues (20)
- Remove automatic subscription retry on error
- Can't receive messages in a chat using subscription
- skip() doesn't skip query HOT 1
- @vue/apollo-ssr doesn't work in SSR mode
- Fragments aren't returned in results when using useQuery/useLazyQuery reactive refs HOT 2
- Using vue-apollo-composable inside a Pinia setup store HOT 2
- `useApolloClient` checks wrong conditions before calling `inject()`
- useQuery blocks page load on 4.0.0 HOT 2
- useQuery with fetchPolicy: cache-only does not return expected data HOT 3
- Doesn't update the data after a mutation if `enabled` is `false` in `useQuery`
- Queries are not executed in given order
- @vue/[email protected] has a peer dependency conflict with Vue 3 HOT 4
- [docs] The installation guide is very bad HOT 1
- Refetch with New Variables Overrides Other Existing Refetches HOT 1
- `onBeforeUnmount` hook in `useQuery` is undesirable when used in pinia store HOT 1
- [Documentation] Composition API + Options API Configuration, how to make it work together? HOT 2
- Updating the `variables` ref does not work when using the function form
- Production breaks, dev mode works (Apollo client with id default not found.) HOT 3
- onResult does not fire on the first load of useLazyQuery HOT 5
- @vue/apollo-option - memory leak on SSR render
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from apollo.