prefetchAll on client

[JounQin]

After reading document, prefetchAll is only used on server, but like vue-hackernews-2.0 asyncData can also be called in beforeResolve hook, and I tried to add prefetchAll on client also like following:

if (activated.length) {
  await Promise.all([
    ...activated.map(
      ({ asyncData }) => asyncData && asyncData({ axios, store, route: to }),
    ),
    apolloProvider.prefetchAll({ route: to }, activated),
  ])
}

However it seems it will try to query twice, and also when I leave current route, prefetch will also be called although I've passed correct activated routes.

Is that working as expected?

[ozguruysal]

As far as I can see, each time you click a link it will call prefetchAll() method and the query will be included into prefetchQueries array to be fetched again on the next prefetchAll() call. I think you can reset that array before prefetchAll() method to avoid refetching everything each time you click a route link. So your code becomes:

if (activated.length) {
  apolloProvider.prefetchQueries = []; 

  await Promise.all([
    ...activated.map(
      ({ asyncData }) => asyncData && asyncData({ axios, store, route: to }),
    ),
    apolloProvider.prefetchAll({ route: to }, activated),
  ])
}

I'm not sure though if this is the right way but it seems to work for me. I think a better solution would be to have an API method to prefetch a single route rather than calling prefetchAll.

[ozguruysal]

An issue with this implementation in general is that, a network request is always sent even if the data is in apollo store. A solution or a direction to do this right would really be very helpful.

[Akryum]

I'm not sure what's the use case for prefetchAll on the client-side. It's only purpose is to execute the Apollo queries on the server. On the client, everything will happen automatically.

[JounQin]

@Akryum Isn't this issue clear? I want to prefetch data before jumping into next route like asyncData on client.

[ozguruysal]

Here are two different solutions I can think of for prefetching data before moving to next route. These solutions don't depend on prefecthAll but uses asyncData instead.

Option 1: Using Vuex

export default {
    computed: {
        product() {
            return this.$store.state.product;
        },
    },

    async asyncData({ apolloProvider, route, store }) {
        const { data } = await apolloProvider.defaultClient.query({
            query: GET_PRODUCT,

            variables: {
                id: parseInt(route.params.id, 10),
            },
        });

        store.commit("UPDATE_PRODUCT", data.getProduct);
    },
};

Option 2: Using Apollo Store

const buildQuery = route => ({
    query: GET_PRODUCT,

    variables: {
        id: parseInt(route.params.id, 10),
    },
});

export default {
    computed: {
        product() {
            return this.$apolloProvider.defaultClient.readQuery(
                buildQuery(this.$route),
            ).getProduct;
        },
    },

    async asyncData({ apolloProvider, route }) {
        await apolloProvider.defaultClient.query(buildQuery(route));
    },
};

I'm not in favor of using Vuex since the same data is already inside Apollo store. But I'm not a fan of the way we have to read data from Apollo store.

Any other ideas are welcomed.

I still think it'd be really cool if Vue Apollo provided a method to achieve this. I think this issue is more of a feature request.

[JounQin]

Yes, I'm using Apollo store in asyncData for now, then I remove vue-apollo as dependence because there is no usage of any specific feature of vue-apollo any more.

[ozguruysal]

Just realized that, in my Apollo Store example, computed property product is not reactive. When the data in store changes it doesn't update the component data.

@JounQin since you said you're using a similar approach, do you have this problem?
@Akryum any plans to add a feature to support prefetching data before moving to next route?

[JounQin]

@ozguruysal My App is so simple which calls GitHub GraphQL API inside, so I'm manually using query and readQuery instead of watchQuery now.

https://github.com/JounQin/blog/blob/master/src/views/Home.vue

[ozguruysal]

Thanks @JounQin. watchQuery is indeed the solution for reactivity.

[dohomi]

@ozguruysal your proposed Option 2, is it working on SSR? I tried it but on client the readQuery would fail because its only instanciated on server before, or did I miss something?

[ozguruysal]

@dohomi yes it worked for me with SSR (I have a set up very similar to vue-hackernews-2.0 example) but the data was not reactive as discussed above. Eventually I ended up with a solution like this:

const buildQuery = route => ({
    query: GET_PRODUCT,

    variables: {
        id: parseInt(route.params.id, 10),
    },
});

export default {
    data() {
        return {
            product: {},
        };
    },

    created() {
        this.fetchLocalData();
    },

    async asyncData({ apolloProvider, route }) {
        await apolloProvider.defaultClient.query(buildQuery(route));
    },

    methods: {
        fetchLocalData() {
            this.$apollo.addSmartQuery("getProduct", {
                ...buildQuery(this.$route),

                update(data) {
                    this.product = data.getProduct;
                },

                fetchPolicy: "cache-only",
            });
        },
    },
};

Alternatively you can use watchQuery in fetchLocalData() method. Hope this helps and if you have a cleaner solution please share here.

[dohomi]

@ozguruysal one question: how do you asign anything via asyncData? and another one: if you do fetchPolicy: "cache-only" this means you pulled already all data right? Because in my opinion on a normal search where you only publish like 20 items on one query you would need to re-fetch the data from the server. I was playing around today and came up with a very similar solution:
https://gist.github.com/dohomi/8de918fa638c548df29dd00254a4a274

[ozguruysal]

@dohomi regarding your first question, if you mean something like updating component data, I don't do anything like that because asyncData method is not able to access component data. I see Nuxt does it somehow, which is nice. I'm hoping at some point Vue Apollo is able to provide a feature to prefetch data and update components data :)

Second question; yes all data must have been already fetched and available in apollo store at that point since asyncData should have been resolved successfully here.

If you need to call asyncData again in the same component like pagination, filtering etc. here's a nice solution I use too.

[dohomi]

@ozguruysal ok thanks. I am using Nuxt as you can see in my gist so thats the solution I'm doing right now and asyncData is setting the context on the component directly. So I guess we both came up with the same path even though different setup.

[tfoxy]

To fix this, I did the same thing as @ozguruysal of initializing prefetchQueries with an empty array.

The reason for querying twice is that prefetchAll always use fetchPolicy: 'network-only'

https://github.com/Akryum/vue-apollo/blob/64f4db963510a359de512ef6f02d60587af93fcb/src/apollo-provider.js#L157

To use the cache instead of always making a request, I patched VueApollo#prefetchQuery method.

https://gist.github.com/tfoxy/03beda1d680a2644fb90cdcedacc8305

[gwardwell]

Should this really be tagged a question rather than a bug? I have my nuxt application set up to use Vue Apollo (by way of Nuxt Apollo) and, on the client side, use prefetchQuery inside fetch to prepopulate my Apollo cache. That way my loading indicator and route transitions are in sync with the queries themselves. With options.fetchPolicy = 'network-only' in prefetchQuery, I get additional queries every time that route is accessed. The code @tfoxy wrote solves my issue, specifically lines 78 and 80-82:

const options = omit(localQueryOptions, VUE_APOLLO_QUERY_KEYWORDS);
//...
if (process.env.VUE_ENV === 'server') {
  options.fetchPolicy = 'network-only';
}

Shouldn't that change make it into the library itself?