useAsyncData example with Axios

[kadiryazici]

Hi, What do you think about my solution to make async requests special to component?
A key needed for requests so component can get the data which is created on server side.
Requires Suspense

import { useContext } from 'vite-ssr/vue';
import { onMounted, onUnmounted, Ref, ref, onDeactivated } from 'vue';
import axios, { AxiosRequestConfig } from 'axios';

interface Config {
   axiosConfig: AxiosRequestConfig;
   /**
    * For Client, if {true} asyncData will try to block component's initialization
    * if {false} it will fetch the data onMounted hook.
    */
   awaitSetup: boolean;
}

export async function useAsyncData<T>(key: string, location: string, config?: Partial<Config>) {
   const { isClient, initialState } = useContext();
   //- craete a ref via initialState[key] value
   const responseValue = ref(initialState[key] || null) as Ref<T | null>;
   //- Axios get request
   const request = () => axios.get<T>(location, config?.axiosConfig);

   //- request handler function, to prevent code duplication I created inline function.
   const handler = async (type: 'server' | 'client') => {
      try {
         const { data } = await request();
         responseValue.value = data;
         if (type === 'server') initialState[key] = data;
      } catch (error) {
         throw error;
      }
   };

   // remove data from initialState when component unmounts or deactivates
   onUnmounted(() => {
      //- make sure that it is client
      if (isClient) initialState[key] = null;
   });
   onDeactivated(() => {
      if (isClient) initialState[key] = null;
   });

   //- is this function running on server side
   if (!isClient) {
      await handler('server');
   } else {
      //- if this function is running on client side

      //- if initialState[key] already exists mutate responseValue.value
      if (initialState[key]) {
         responseValue.value = initialState[key];
      } else {
         //- if inital state value does not exist fetch the data in onMounted hook.
         const fn = async () => {
            await handler('client');
         };
         if (config?.awaitSetup) {
            await fn();
         } else {
            onMounted(fn);
         }
      }
   }

   return responseValue;
}

Usage

<template>
   <div v-if="!myRes">Loading...</div>
   <div v-else>
      {{ myRes }}
   </div>
</template>

<script lang="ts" setup>
import { useAsyncData } from '/src/helpers/useAsyncData';

interface RequestData {
   completed: boolean;
   id: number;
   title: string;
   userId: number;
}

const myRes = await useAsyncData<RequestData>(
   'home',
   'https://jsonplaceholder.typicode.com/todos/1',
   {
      axiosConfig: {},
      awaitSetup: false // default is false
   }
);
</script>

[frandiox]

@kadiryazici Looks nice! I think it follows the same concept as the one in the readme. I will link to this discussion from the readme since this looks like a more complete solution.

Not a big issue but perhaps you could save some bytes by using import.meta.env.SSR instead of isClient, since the former would do tree-shaking of some unneeded code.
Also, vite-ssr is automatically adding fetch polyfill in Node environment so it would be possible to use raw fetch instead of Axios, but that's also a minor change.

Another observation, this will need some kind of loading state in the browser since it fetches data during the mounted hook instead of stopping the rendering in setup. I guess that can be easily changed depending on user preferences 👍

[kadiryazici]

I edited the code, now there is no keep options because it is KeepAlive's job. I added awaitSetup option, which stops setup function until request ends.

[frandiox]

Awesome, thanks for sharing!
Did you find any issue with the default state serializer? I see you've added devalue. Any particular reason?

[kadiryazici]

I just saw it here https://pinia.esm.dev/ssr/#state-hydration

[frandiox]

Ah I see! That was written before vite-ssr was doing proper serialization. I think now it's should be fine, but of course devalue is still a valid option :)

[kadiryazici]

I added vercel support to the demo app https://github.com/kadiryazici/vite-ssr-vue3-example/

This can be simple demo app for vite-ssr while vitesse-ssr-template is too complicated