Data fetching 📡

In Weblands web can use asyncData hook to fetch data on the server side. This hook can be placed both on page components and on any others.

In the follow example apiResult variable returned from asyncData will be merged with initial apiResult in data.

export default defineComponent({
  // Some component stuff

  // When this hook will be invoked, it's result
  // will be merged with component "data" property
  async asyncData() {
    // Some api calls like below
    const apiResult = await fetchDataMethod();

    // Return data fetching operation result.
    return {
      apiResult,
    };
  },

  data: () => ({
    apiResult: {},
  })
});

Server side only

asyncData hook called only on server, not in browser!
Do not hydrate components with asyncData, hook invocation will be ignored on client side.

Customizing app behavior

asyncData hook takes an SSR app execution context as parameter (EnhanceAppContext), so you can modify app behaviour during to your specific needs

For example, add page-specific meta-tags

export default defineComponent({
  // Some component stuff

  async asyncData({ route, head }: EnhanceAppContext) {
    const params = route.params;
    const post: any = await PostGateway.getPostByID(params.postId as string);

    const meta: HeadObjectPlain = {
      title: post.title,

      meta: [
        {
          name: 'description',
          content: `Post ${post.title} description`
        },
      ],
    };

    head.addHeadObjs(meta as Ref<HeadObjectPlain>);

    return {
      post,
    };
  }
});