I am facing an issue with a component that I want to decouple from the data fetching implementation. My goal is to be able to pass a data fetching callback as a prop.
The reason for this is so that I can easily mock the data fetching process in storybook.
Request.js
export const endpoints = {
fetchProducts: page => `https://some-end-point-here?page=${page}`
};
export const fetchProducts = async (page = 1, endpoint = endpoints.fetchProducts(1)) => {
const response = await fetch(endpoint);
return await response.json();
};
(storybook) Usage of the component
import {fetchProducts} from "./request";
export const someCPM = ()=> ({
components: {SomeCPM},
props: {
fetchProducts: {default: fetchProducts},
},
template: `<product-grid v-bind="$props"></product-grid>`
});
Component's Prop type
fetchProducts: {
type: Function,
required: true
}
The issue arises when the incorrect prop type warning is displayed. The prop is being recognized as a Promise instead of a function, causing it to fail execution as fetchProducts is not considered a function.
Even after changing fetchProducts to return a number and removing the async behavior like this:
const fetchProducts = () => 9999
I still encounter errors stating that fetchProducts is a number, not a function! This indicates that even though I am passing a reference to the function, it is somehow being executed elsewhere.