Data pre-fetching about sub components

[harvey-woo]

This document descibing data pre-fetching about the components whitch router.getMatchedComponents
But how about the sub components those belong the matched components,
how to load pre-fetching data with these components?

https://ssr.vuejs.org/en/data.html#

[egoist]

Prefetching data in route components and pass them down as props to ( or use vuex in) child components.

[jazoom]

I wondered this myself a while ago. The answer was to make them child routes in the router and use <router-view></router-view> (can be named or not named) to insert the children where I wanted.

Maybe this should be mentioned in the documentation so others don't need to find out by experimentation as well?

[romandrahan]

@jazoom

make them child routes in the router

I'm afraid it looks like hack. I suppose, there must be another workaround, when components is registered in normal way, without adding them to the child routes?

@yyx990803, is there more elegant solution for that?

[LennonChin]

I have a hack way to solve this problem, recursive query sub components and pre-fetching their datum, just like code:

// entry-server.js
import { createApp } from './app'
export default context => {
  return new Promise((resolve, reject) => {
    const { app, router, store } = createApp()
    router.push(context.url)
    router.onReady(() => {
      const matchedComponents = router.getMatchedComponents()
      if (!matchedComponents.length) {
        return reject({ code: 404 })
      }
      // used to load Promises
      const targetPromises = [];
      // encapsulate pre-fetch datum function
      const doAsyncData = (component) => {
        if (component.asyncData) {
          targetPromises.push(component.asyncData({
            store,
            route: router.currentRoute
          }));
        }
      };
      // recursive query sub components
      const recursive = (component) => {
        doAsyncData(component);
        if (component.components) {
          Object.keys(component.components).forEach(key => {
            recursive(component.components[key]);
          });
        }
      };
      // call asyncData() in all matched componets
      matchedComponents.map(component => {
        recursive(component);
      });
      Promise.all(targetPromises).then(() => {
        context.state = store.state
        resolve(app)
      }).catch(reject)
    }, reject)
  })
}

but there may be performance issues with this approach, need to discuss.

[ozguruysal]

I was thinking the same solution as @LennonChin but rather then making it recursive just go one level deep. @LennonChin were you able to find another solution or what did you end up with?

[LennonChin]

@ozguruysal
Use the code I pasted up can recursive the whole levels, then if you use this way you should designate the name option for your custom component to avoid infinite recursion conducting out-of memory problem. the improved code:

return new Promise((resolve, reject) => {
  const {app, router, store} = createApp();
  router.push(context.url);
  router.onReady(() => {
    const matchedComponents = router.getMatchedComponents();
    if (!matchedComponents.length) {
      return reject(new Error('no component matched'));
    }
    // in order to load all promises
    let targetPromises = [];
    // this cache is used to record operated components' keys, avoid infinite recursion
    let keyCache = [];
    const doAsyncData = (component) => {
      if (component.asyncData) {
        targetPromises.push(component.asyncData({
          route: router.currentRoute,
          store
        }));
      }
    };
    const recursive = (component, key) => {
      // if has key, recursived
      if (keyCache.indexOf(key) !== -1) return;
      // cache key
      keyCache.push(key);
      // do async data
      doAsyncData(component);
      // query sub components
      if (component.components) {
        Object.keys(component.components).forEach(key => {
          recursive(component.components[key], key);
        });
      }
    };
    matchedComponents.map(component => {
      recursive(component, component.name);
    });
    Promise.all(targetPromises).then(data => {
      targetPromises = [];
      keyCache = [];
      context.state = store.state;
      resolve(app);
    }).catch(error => {
      targetPromises = [];
      keyCache = [];
      reject(app);
    });
  }, reject);
});

[ozguruysal]

@LennonChin thanks for sharing.

[mach-kernel]

The way I went about this was a little bit different. vue-router lets us define props, so in the routes definition something like this can be done:

    {
      path: '/foo/bar',
      component: () => import('...'),
      props: {
        asyncDataHooks: [
          'MyModule/fetchThing'
        ]
      }
    }

Then, in the server entry point:

    let hooks = router.currentRoute.matched.reduce((hooks, cur) => {
      let adh = cur.props.default.asyncDataHooks;
      if (!adh) return hooks;
      return hooks.concat(adh);
    }, []);

    Promise.all(hooks.map((h) => store.dispatch(h)))...

[darkiron]

good solution but have two question:
how init store in subComponent asyncDate ?
and:
how fetch data action and return one Promise ?