Best practices for managing data loading with composition API and onBeforeRouteUpdate

Question

Best practices for managing data loading with composition API and onBeforeRouteUpdate

I have a Vue 3 single-page component that contains the following script:

export default defineComponent({
  props: {
    id: String,
  },
  setup(props) {
    const error = ref<boolean>(false)
    const thisCategory = ref<CategoryDetails>()
    const subcategories= ref<Category[]>()

    const fetchData = (categoryId: string) => {
      fetchCategoryDetails(categoryId)
        .then((v) => {
          thisCategory.value = v
          subcategories.value = v.child_categories
        })
        .catch(() => error.value = true)
    }

    fetchData(props.id || "")

    onBeforeRouteUpdate((to) => fetchData(to.params.id as string))

    return {
      error,
      thisCategory,
      subcategories,
    }
  }
})

The function fetchData is used to retrieve necessary data for the view. It is called twice within setup(): once to load data when the component is initialized, and once again in onBeforeRouteUpdate to ensure new data is loaded when navigating between links of the same component with different data.

I foresee needing to replicate this behavior in other components and am struggling to abstract it successfully.

An additional challenge arises when getting the ID from props directly versus using to.params in the route guard to ensure correct loading of new IDs.

How can I create a single function to handle both initial data loading and navigation changes, which can be easily implemented across various components by simply passing in a function like fetchData?

typescript vue.js vue-router vuejs3 reusability

Answer 1

Answer №1

Revised Version

If you aim to streamline the process by handling error and incorporating the onBeforeRouteUpdate listener exclusively, managing variable updates through the parent is still necessary. Therefore, you must manage the updates of local variables like thisCategory and subcategories using a method that you provide.

import { ref, computed } from "vue";
import { onBeforeRouteUpdate } from "vue-router";

export const STATE = {
  INIT: "INIT",
  LOADING: "LOADING",
  SUCCESS: "SUCCESS",
  ERROR: "ERROR",
};

export const withFetchResource = (fetchMethod, id) => {
  const loadingState = ref(STATE.INIT);
  const error = computed(() => loadingState.value === STATE.ERROR);

  const fetchData = (resourceId) => {
    loadingState.value = STATE.LOADING;
    fetchMethod(resourceId)
      .then((response) => {
        loadingState.value = LOADING.SUCCESS;
        return response;
      })
      .catch((error) => {
        loadingState.value = LOADING.ERROR;
      });
  };

  fetchData(id.value);

  onBeforeRouteUpdate((to) => fetchData(to.params.id as string));

  return { error, loadingState, fetchData };
};

import { ref, defineComponent } from "vue";
import { STATE, fetchCategoryDetails } from "./myApi.ts";
import { withFetchResource } from "./withFetchResource.ts";

export default defineComponent({
  props: {
    id: String,
  },
  setup(props) {
    const thisCategory = ref<CategoryDetails>();
    const subcategories = ref<Category[]>();

    const categoryFetchHandler = (id) => {
      return fetchCategoryDetails(id).then((v) => {
        thisCategory.value = v;
        subcategories.value = v.child_categories;
      });
    };

    const { error: categoryError } = withFetchResource(
      categoryFetchHandler,
      props.id || ""
    );

    return {};
  },
});

Perhaps consider moving the entire content to another file or method.

// withFetchCategoryDetail.ts
import {ref} from "vue";
import {onBeforeRouteUpdate} from "vue-router";
import {fetchCategoryDetails} from "./myApi.ts";

export const withFetchCategoryDetail = (props) => {
  const error = ref<boolean>(false)
  const thisCategory = ref<CategoryDetails>()
  const subcategories= ref<Category[]>()

  const fetchData = (categoryId: string) => {
    fetchCategoryDetails(categoryId)
      .then((v) => {
        thisCategory.value = v
        subcategories.value = v.child_categories
      })
      .catch(() => error.value = true)
  }

  fetchData(props.id || "")

  onBeforeRouteUpdate((to) => fetchData(to.params.id as string))

  return {
    error,
    thisCategory,
    subcategories,
  }
}

import { ref, onBeforeRouteUpdate, defineComponent } from "vue";
import { withFetchCategoryDetail } from "./withFetchCategoryDetail.ts";

export default defineComponent({
  props: {
    id: String,
  },
  setup(props) {
    return {
      ...withFetchCategoryDetail(props)
    };
  },
});

I haven't tested whether onBeforeRouteUpdate will work within the hook method, but can't see why it wouldn't

Answer 2

Revised Version

If you aim to streamline the process by handling error and incorporating the onBeforeRouteUpdate listener exclusively, managing variable updates through the parent is still necessary. Therefore, you must manage the updates of local variables like thisCategory and subcategories using a method that you provide.

import { ref, computed } from "vue";
import { onBeforeRouteUpdate } from "vue-router";

export const STATE = {
  INIT: "INIT",
  LOADING: "LOADING",
  SUCCESS: "SUCCESS",
  ERROR: "ERROR",
};

export const withFetchResource = (fetchMethod, id) => {
  const loadingState = ref(STATE.INIT);
  const error = computed(() => loadingState.value === STATE.ERROR);

  const fetchData = (resourceId) => {
    loadingState.value = STATE.LOADING;
    fetchMethod(resourceId)
      .then((response) => {
        loadingState.value = LOADING.SUCCESS;
        return response;
      })
      .catch((error) => {
        loadingState.value = LOADING.ERROR;
      });
  };

  fetchData(id.value);

  onBeforeRouteUpdate((to) => fetchData(to.params.id as string));

  return { error, loadingState, fetchData };
};

import { ref, defineComponent } from "vue";
import { STATE, fetchCategoryDetails } from "./myApi.ts";
import { withFetchResource } from "./withFetchResource.ts";

export default defineComponent({
  props: {
    id: String,
  },
  setup(props) {
    const thisCategory = ref<CategoryDetails>();
    const subcategories = ref<Category[]>();

    const categoryFetchHandler = (id) => {
      return fetchCategoryDetails(id).then((v) => {
        thisCategory.value = v;
        subcategories.value = v.child_categories;
      });
    };

    const { error: categoryError } = withFetchResource(
      categoryFetchHandler,
      props.id || ""
    );

    return {};
  },
});

Perhaps consider moving the entire content to another file or method.

// withFetchCategoryDetail.ts
import {ref} from "vue";
import {onBeforeRouteUpdate} from "vue-router";
import {fetchCategoryDetails} from "./myApi.ts";

export const withFetchCategoryDetail = (props) => {
  const error = ref<boolean>(false)
  const thisCategory = ref<CategoryDetails>()
  const subcategories= ref<Category[]>()

  const fetchData = (categoryId: string) => {
    fetchCategoryDetails(categoryId)
      .then((v) => {
        thisCategory.value = v
        subcategories.value = v.child_categories
      })
      .catch(() => error.value = true)
  }

  fetchData(props.id || "")

  onBeforeRouteUpdate((to) => fetchData(to.params.id as string))

  return {
    error,
    thisCategory,
    subcategories,
  }
}

import { ref, onBeforeRouteUpdate, defineComponent } from "vue";
import { withFetchCategoryDetail } from "./withFetchCategoryDetail.ts";

export default defineComponent({
  props: {
    id: String,
  },
  setup(props) {
    return {
      ...withFetchCategoryDetail(props)
    };
  },
});

I haven't tested whether onBeforeRouteUpdate will work within the hook method, but can't see why it wouldn't

Best practices for managing data loading with composition API and onBeforeRouteUpdate

Answer №1

Revised Version

Similar questions

On a mobile device, the keyboard is hiding the PrimeNG dropdown

Make sure to verify if the mode in Angular is either visible-print or hidden-print

Enhance the focus on a textarea by adding specific text using VueJS/Vuetify

Using asynchronous functions in a loop in Node.js

What is the best way to transform a string array into a number array?

Restrict scrolling within content boundaries

Having trouble creating a unit test for exporting to CSV in Angular

Error detected in Deno project's tsconfig.json file, spreading into other project files - yet code executes without issues?

The Stencil EventEmitter fails to send data to the Vue instance

How to utilize string interpolation in Vue 3 template attribute with quotation marks

Leveraging the power of RXJS and typescript for executing work conditionally between Server and Client Code

Setting the font size for the entire body of a webpage globally is ineffective

Exploring Vue 3: Crafting a custom plugin using the composition API and enhancing it with Typescript type augmentation

Create a loop in Vue.js 3 without the need for a query

Exploring the power of Node JS with Promise.all and forEach within a nested array

The error message "npm run dev Error: The derived class t must have a greater number of constructor arguments than its base class" is indicating a mismatch in the number of constructor arguments between

Express server experiencing issues with generating Swagger documentation

Interfacing Contact Form Data from Vue Application to Magento Using API - A Step-by-Step Guide

Retrieve the following object in an array of objects using a specific property value in Javascript

I am attempting to store the primary array in local storage, but unfortunately, the value is not being saved within the React context API