nuxt-modules / apollo

Nuxt.js module to use Vue-Apollo. The Apollo integration for GraphQL.
https://apollo.nuxtjs.org
MIT License
955 stars 199 forks source link

Using Apollo-module in middleware cause HTML to grow up #251

Open LuXDAmore opened 5 years ago

LuXDAmore commented 5 years ago

Version

v4.0.0-rc.12

Reproduction link

nuxt-apollo-middleware

Steps to reproduce

Install apollo-module for Nuxt; Use a query from 'apollo' in a middle-ware.

What is expected ?

The HTML doesn't not have to grow up on every navigation.

What is actually happening?

The HTML grow up since ~ 100 MB.

Additional comments?

Using apollo.cache.data.clear(); before the apollo.query() remove the issue. I've tried to remove the cache in the default-config, but without success.

(In my project i need in-cache-memory because i have some Fragments, but unfortunately i don't have a valid example for that.)

This bug report is available on Nuxt community (#c234)
kieusonlam commented 5 years ago

Can we test if this issue still exists?

tarunmangukiya commented 5 years ago

@kieusonlam I think this is related https://github.com/nuxt-community/apollo-module/issues/273

tarunmangukiya commented 5 years ago

I've seen clearing apollo cacahe app.apolloProvider.defaultClient.cache.data.clear() in nuxtServerInit, helps with this. @kieusonlam any idea about this?

Also, this issue seems there in the production, in development it's not there.

tarunmangukiya commented 5 years ago

Hey @LuXDAmore, can you check this bug with https://github.com/nuxt-community/apollo-module/pull/274 PR?

rchl commented 5 years ago

I've made this comment in the review (after it was merged though):

Wouldn't it be better to configure InMemoryCache to not cache in the first place?

Author of the issue said:

I've tried to remove the cache in the default-config, but without success.

So I wonder what have you tried @LuXDAmore

LuXDAmore commented 5 years ago

@rchl I'm using inMemoryCache, there's another thread here

@tarunmangukiya To keep page size small i've added apollo.cache.data.clear(); after every request in a middleware here.. So, your PR seems good! Thank you! 🚀

rchl commented 5 years ago

@LuXDAmore I'm using configuration like this:

            defaultOptions: {
                query: {
                    fetchPolicy: 'no-cache',
                    errorPolicy: 'all',
                },
            },

and it works to disable cache. In you message you seem to use $query instead of query.

LuXDAmore commented 5 years ago

@rchl I've read about it here.. But yes, i've tried without too.. Maybe it's something related to the fact that it's in a middle-ware 🤷‍♂

rchl commented 5 years ago

Unfortunately, I can't reproduce the initial problem with your test repo (tried with yarn start in production, on Node 10) so I can't test it out myself and see if I could make it work. Reloading page doesn't make response size to grow...

I think it's wasteful to let apollo cache stuff if it's cleared anyway.

tarunmangukiya commented 5 years ago

I think changing fetchPolicy won't help much as we need to use caching in case of process.client.

Regarding, I think we're forcefully using InMemoryCache even if that's not defined in apollo-config.

I've tried to remove the cache in the default-config, but without success.

https://github.com/nuxt-community/apollo-module/blob/a8882162edbeaed9bdf8ca4db44b3d24e5a37f1d/lib/templates/plugin.js#L47

rchl commented 5 years ago

But plugin runs on both client and server and configuration for each can differ

tarunmangukiya commented 5 years ago

Yes, we can do that manually, but I think that's not good idea. As it should be there in the package itself.